<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="resources/fake-vr-displays.js"></script>
<script src="file:///gen/layout_test_data/mojo/public/js/mojo_bindings.js"></script>
<script src="file:///gen/device/vr/vr_service.mojom.js"></script>
<script src="resources/mock-vr-service.js"></script>
<script>
let fakeDisplays = fakeVRDisplays();

vr_test( (t) => {
  return navigator.getVRDisplays().then( (displays) => {
    let display = displays[0];
    let canFinish = false;
    let counter = 0;

    function onAnimationFrame() {
      // Intentionally display.rAF at the beginning, ensuring that there's an
      // outstanding callback when t.done() is called. This is to make sure it
      // doesn't cause any unexpected behavior like it did with
      // crbug.com/679401
      display.requestAnimationFrame(onAnimationFrame);
      if (counter > 10) {
        t.done();
      }
      if (counter > 0) {
        counter++;
      }
      if (canFinish) {
        canFinish = false;
        counter++;
      }
    }

    let handle = display.requestAnimationFrame(onAnimationFrame);
    display.cancelAnimationFrame(0);
    display.cancelAnimationFrame(-1);
    display.cancelAnimationFrame(handle + 1);
    display.cancelAnimationFrame(handle - 1);
    display.cancelAnimationFrame(0.5);
    display.cancelAnimationFrame(null);
    canFinish = true;
  }, (err) => {
    t.step( () => {
      assert_unreached("getVRDisplays rejected");
    });
    t.done();
  });
}, [fakeDisplays["Pixel"]],
"cancelAnimationFrame does not have unexpected behavior when given invalid handles");

</script>