| <!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> |
