pointerlock/pointerlock-maintains-mousedown.html

<!DOCTYPE html>
<meta name="variant" content="?unadjustedmovement=true">
<meta name="variant" content="?unadjustedmovement=false">
<html>
<head>
  <meta charset="utf-8" />
  <title>Pointer lock maintains button state during mouse move</title>
  <link rel="help" href="https://w3c.github.io/pointerlock/" />
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
</head>
<body></body>
<script>
  // The test will do two mouse actions:
  // 1. A simple click to request pointer lock via a gesture.
  // 2. A drag to verify that mousemove events report correct button state.
  let waiting_for_first_mouseup = true;
  let pointer_locked = false;
  const test_buttons_during_drag = async_test(
    'Tests that mousemove events during pointer lock report correct button state'
  );

  document.addEventListener('mousemove', function(e) {
    if (!pointer_locked) {
      return;
    }
    test_buttons_during_drag.step(function() {
      // e.buttons is a bitmask: 1 = left button down
      assert_equals(e.buttons, 1,
        'mousemove event should have left button (buttons=1) while dragging'
      );
    });
  });

  // We will use the first "mouseup" to request pointer lock, and the second one
  // as the signal that the drag is complete and we can finish the test.
  document.addEventListener('mouseup', function(e) {
    if (waiting_for_first_mouseup) {
      const urlSearch = new URLSearchParams(window.location.search);
      document.body.requestPointerLock({
        unadjustedMovement: urlSearch.get("unadjustedmovement") === "true"
      });
      waiting_for_first_mouseup = false;
    } else {
      test_buttons_during_drag.done();
    }
  });

  document.addEventListener("pointerlockerror", function() {
    test_buttons_during_drag.step(function() {
      assert_unreached("Pointer lock error occurred");
    });
  });

  // When pointer lock is acquired, run the drag test
  document.addEventListener("pointerlockchange", async function() {
    if (document.pointerLockElement) {
      pointer_locked = true;
      test_buttons_during_drag.step(function() {
        assert_equals(document.pointerLockElement, document.body,
          'Pointer should be locked to body');
      });

      var dragActions = new test_driver.Actions();
      await dragActions
        .pointerDown({button: dragActions.ButtonType.LEFT})
        .pointerMove(10, 10)
        .pointerMove(20, 20)
        .pointerMove(30, 30)
        .pointerUp({button: dragActions.ButtonType.LEFT})
        .send();
    } else {
      pointer_locked = false;
    }
  }, {once: true});

  // Step 0: Click to acquire pointer lock.
  (async function() {
    var actions = new test_driver.Actions();
    await actions
      .pointerMove(1, 1)
      .pointerDown({button: actions.ButtonType.LEFT})
      .pointerUp({button: actions.ButtonType.LEFT})
      .send();
  })();
</script>
</html>