diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/pointerevents/pointerlock | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/pointerevents/pointerlock')
11 files changed, 995 insertions, 0 deletions
diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_coordinates_when_locked.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_coordinates_when_locked.html new file mode 100644 index 0000000000..a793272522 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_coordinates_when_locked.html @@ -0,0 +1,107 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events pointer lock tests</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <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> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <style> + #testContainer { + touch-action: none; + user-select: none; + position: relative; + } + </style> + <script> + var last_pointer_client_pos = {'x': 0, 'y': 0} + var last_pointer_screen_pos = {'x': 0, 'y': 0} + + const kStateInit = 0 + const kStateLocked = 1 + const kStateUnlocked = 2. + + var test_state = kStateInit; + + function resetTestState() { + test_state = kStateInit; + document.exitPointerLock(); + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("Test pointerevent coordinates when pointer is locked", ['mouse']); + var div1 = document.getElementById("target"); + + on_event(div1, 'click', function(event) { + if (test_state == kStateInit) + div1.requestPointerLock(); + else if (test_state == kStateLocked) + document.exitPointerLock(); + }); + on_event(div1, 'pointermove', function(event) { + if (test_state == kStateLocked) { + test_pointerEvent.step(function() { + assert_equals(event.clientX, last_pointer_client_pos['x'], 'clientX') + assert_equals(event.clientY, last_pointer_client_pos['y'], 'clientY') + assert_equals(event.screenX, last_pointer_screen_pos['x'], 'screenX') + assert_equals(event.screenY, last_pointer_screen_pos['y'], 'screenY') + }); + } else { + last_pointer_client_pos = {'x': event.clientX, 'y': event.clientY} + last_pointer_screen_pos = {'x': event.screenX, 'y': event.screenY} + } + }); + on_event(document, 'pointerlockchange', function(event) { + if (test_state == kStateInit) { + test_state = kStateLocked; + test_pointerEvent.step(function() { + assert_equals(document.pointerLockElement, div1, "document.pointerLockElement should be div1."); + }); + + var actions = new test_driver.Actions(); + pos_x = div1.offsetWidth / 2; + pos_y = div1.offsetHeight / 2; + for (var i = 0; i < 10; i++) { + // Move left and up. + pos_x += 10; + pos_y -= 10; + actions.pointerMove(pos_x, pos_y, {origin: div1}); + } + actions.pointerDown().pointerUp().send(); + } else if (test_state == kStateLocked) { + test_state = kStateUnlocked; + test_pointerEvent.step(function() { + assert_equals(document.pointerLockElement, null, "document.pointerLockElement should be null."); + }); + test_pointerEvent.done(); + } + }); + + new test_driver.Actions().pointerMove(/* x = */ 0, /* y = */ 0, {origin: div1}).pointerDown().pointerUp().send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events movement in locked state test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks the pointer event coordinates stays unchanged when pointer is locked. + <ol> + <li>Click left mouse button on the green rectangle.</li> + <li>Move the mouse around.</li> + <li>Click left mouse button again. </li> + </ol> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div id="target" style="width:200px;height:200px;background:green"></div> + </div> + <div class="spacer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_getCoalescedEvents_when_pointerlocked.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_getCoalescedEvents_when_pointerlocked.html new file mode 100644 index 0000000000..1aa381b466 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_getCoalescedEvents_when_pointerlocked.html @@ -0,0 +1,74 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events pointer lock tests</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <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> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <style> + #testContainer { + touch-action: none; + user-select: none; + position: relative; + } + </style> + <script> + var lock_change_count = 0; + var mouseeventMovements = [] + var pointereventMovements = [] + var has_coalesced_Events = false; + + function resetTestState() { + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointermove getCoalescedEvents when lock test", ['mouse']); + var div1 = document.getElementById("target"); + + on_event(div1, 'pointerdown', function(event) { + div1.requestPointerLock(); + }); + on_event(div1, 'pointermove', function(event) { + if (document.pointerLockElement == div1) { + test_pointerEvent.step(function() { + assert_greater_than(event.getCoalescedEvents().length, 0, "document.pointerLockElement should have coalesced events."); + document.exitPointerLock(); + has_coalesced_Events = true;; + }); + } + }); + + // Inject mouse inputs. + pointerDragInTarget('mouse', div1, 'right').then(function() { + test_pointerEvent.step(function () { + assert_true(has_coalesced_Events, "document.pointerLockElement should have coalesced events."); + }, "document.pointerLockElement should have coalesced events."); + test_pointerEvent.done(); + }); + } + </script> + </head> + <body onload="run()"> + <h1>PointerMove getCoalescedEvent in locked state test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks if pointerevent.getCoalescedEvent work correctly when pointer is locked. + <ol> + <li>Press left button down on the green rectangle to lock pointer.</li> + <li>Move the mouse</li> + </ol> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div id="target" style="width:800px;height:250px;background:green"></div> + </div> + <div class="spacer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_getPredictedEvents_when_pointerlocked-manual.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_getPredictedEvents_when_pointerlocked-manual.html new file mode 100644 index 0000000000..aba08f14b8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_getPredictedEvents_when_pointerlocked-manual.html @@ -0,0 +1,76 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events pointer lock tests</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script type="text/javascript" src="pointerevent_support.js"></script> + <style> + #testContainer { + touch-action: none; + user-select: none; + position: relative; + } + </style> + <script> + var lock_change_count = 0; + var move_event_count = 0; + var mouseeventMovements = [] + var pointereventMovements = [] + + function resetTestState() { + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointermove getPredictedEvents when lock test", ['mouse']); + var div1 = document.getElementById("target"); + + on_event(div1, 'pointerdown', function(event) { + div1.requestPointerLock(); + }); + on_event(div1, 'pointermove', function(event) { + if (document.pointerLockElement == div1) { + test_pointerEvent.step(function() { + if (event.getPredictedEvents().length > 0) { + for (var i=0; i<event.getPredictedEvents().length; i++) { + var predictedEvent = event.getPredictedEvents()[i]; + test_pointerEvent.step(function() { + assert_equals(predictedEvent.pointerId, event.pointerId, "getPredictedEvents()[" + i + "].pointerId"); + assert_equals(predictedEvent.pointerType, event.pointerType, "getPredictedEvents()[" + i + "].pointerType"); + assert_equals(predictedEvent.target, document.pointerLockElement, "getPredictedEvents()[" + i + "].target"); + assert_equals(predictedEvent.clientX, event.clientX, "getPredictedEvents()[" + i + "].clientX"); + assert_equals(predictedEvent.clientY, event.clientY, "getPredictedEvents()[" + i + "].clientY"); + }); + } + document.exitPointerLock(); + test_pointerEvent.done(); + } else { + assert_less_than(++move_event_count, 20, "pointermove have no predicted event in 20 moves") + } + }); + } + }); + } + </script> + </head> + <body onload="run()"> + <h1>PointerMove getPredictedEvent in locked state test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks if pointerevent.getPredictedEvent work correctly when pointer is locked. + <ol> + <li>Press left button down on the green rectangle to lock pointer.</li> + <li>Move the mouse</li> + </ol> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div id="target" style="width:800px;height:250px;background:green"></div> + </div> + <div class="spacer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html new file mode 100644 index 0000000000..00a2b85f59 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_movementxy_with_pointerlock.html @@ -0,0 +1,123 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events pointer lock tests</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="/external/wpt/pointerevents/pointerevent_styles.css"> + <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> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <style> + #testContainer { + touch-action: none; + user-select: none; + position: relative; + } + </style> + <script> + PhaseEnum = { + BeforeLocked: 0, + PointerLocked: 1, + PointerUnlocked: 2, + Done: 3, + }; + var phase = PhaseEnum.BeforeLocked; + var last_event; + var mouseeventMovements = [] + var pointereventMovements = [] + + function resetTestState() { + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent movementX/Y with pointerlock test", ['mouse']); + + function testPointerMoves(event) { + if (last_event) { + if (phase == PhaseEnum.PointerLocked){ + test_pointerEvent.step(function() { + assert_equals(event.screenX, last_event.screenX); + assert_equals(event.screenY, last_event.screenY); + }); + } else { // BeforeLocked || Unlocked + test_pointerEvent.step(function() { + assert_equals(event.screenX - last_event.screenX, event.movementX); + assert_equals(event.screenY - last_event.screenY, event.movementY); + }); + } + } + last_event = event; + } + + on_event(target, 'click', function(event) { + if (phase == PhaseEnum.BeforeLocked) + target.requestPointerLock(); + else if (phase == PhaseEnum.PointerLocked) + document.exitPointerLock(); + else if (phase == PhaseEnum.PointerUnlocked) + test_pointerEvent.done(); + }); + on_event(target, 'pointermove', function(event) { + if (phase == PhaseEnum.PointerLocked) { + pointereventMovements.push(`${event.movementX}, ${event.movementY}`); + } + testPointerMoves(event); + }); + on_event(target, 'mousemove', function(event) { + if (phase == PhaseEnum.PointerLocked) { + mouseeventMovements.push(`${event.movementX}, ${event.movementY}`); + } + }); + on_event(document, 'pointerlockchange', function(event) { + phase++; + last_event = null; + if (phase == PhaseEnum.PointerLocked) { + test_pointerEvent.step(function() { + assert_equals(document.pointerLockElement, target, "document.pointerLockElement should be target."); + }); + } else if (phase == PhaseEnum.PointerUnlocked) { + test_pointerEvent.step(function() { + assert_equals(document.pointerLockElement, null, "document.pointerLockElement should be null."); + assert_not_equals(mouseeventMovements.length, 0); + assert_array_equals(pointereventMovements, mouseeventMovements, "pointermove should have movementX/Y same as mousemove"); + }); + } + pointerHoverInTarget('mouse', target, 'right').then(function() { + return clickInTarget("mouse", target); + }); + }); + + // Inject mouse inputs. + pointerHoverInTarget('mouse', target, 'right').then(function() { + return clickInTarget("mouse", target); + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events movement with pointerlock test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks pointerevent movementX/Y value with pointerlock. + It checks whether movement X/Y matches event.screenX/Y - last_event.screenX/Y when pointer is not locked; + And if pointermove.movementX/Y matches mousemove.movementX/Y when pointer is locked. + <ol> + <li>Move the mouse inside the green rectangle.</li> + <li>Click left button on the green rectangle.(Enter pointerlock)</li> + <li>Move the mouse around.</li> + <li>Click left button again</li> + <li>Move the mouse inside the green rectangle.</li> + <li>Click left button again to end the test.</li> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div id="target" style="width:800px;height:250px;background:green"></div> + </div> + <div class="spacer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerlock_after_pointercapture.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerlock_after_pointercapture.html new file mode 100644 index 0000000000..c66584a939 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerlock_after_pointercapture.html @@ -0,0 +1,94 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events pointer lock test</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <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> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <script> + var got_capture = false; + var lost_capture = false; + var lock_requested = false; + + function resetTestState() { + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("no pointercapture while pointerlock", ['mouse']); + var div1 = document.getElementById("div1"); + var div2 = document.getElementById("div2"); + + on_event(div1, 'pointerdown', function(event) { + div2.setPointerCapture(event.pointerId); + }); + on_event(document, 'contextmenu', function(event) { + event.preventDefault(); + }); + on_event(div2, 'pointermove', function(event) { + if (event.button == 2 && got_capture && !lock_requested) { + div1.requestPointerLock(); + lock_requested = true; + } + }); + on_event(div2, 'gotpointercapture', function(event) { + got_capture = true; + }); + on_event(div2, 'lostpointercapture', function(event) { + lost_capture = true; + }); + on_event(document,"pointerlockerror", function() { + assert_unreached("Pointer lock error"); + }) + + injectInput().then(function(){ + test_pointerEvent.step(function(){ + assert_true(lost_capture, "Pointer capture was lost after got a pointer lock."); + assert_equals(document.pointerLockElement, div1, "document.pointerLockElement should be div1."); + }); + test_pointerEvent.done(); + }) + } + + // Inject mouse input + function injectInput() { + var actions = new test_driver.Actions(); + return actions.pointerMove(0, 0, {origin: div1}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerMove(30, 30, {origin: div1}) + .pointerMove(30, 0, {origin: div1}) + .pointerDown({button: actions.ButtonType.RIGHT}) + .pointerMove(60, 30, {origin: div1}) + .pointerMove(20, 20, {origin: div1}) + .pointerUp({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events pointer lock test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks that we release the exsiting pointer capture when any element in the page gets a pointer lock. + <ol> + <li>Press left button down on the green rectangle and hold it.</li> + <li>Move the mouse inside the green rectangle.</li> + <li>Click right button while keeping left button down</li> + <li>Keep moving the mouse inside the green rectangle.</li> + </ol> + + Test passes if the pointer capture is released on the yellow rectangle when the green rectangle gets the pointer lock. + </h4> + <div id="testContainer"> + <div id="div1" style="width:800px;height:250px;background:green"></div> + <div id="div2" style="width:800px;height:250px;background:yellow"></div> + </div> + <div class="spacer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerlock_supercedes_capture.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerlock_supercedes_capture.html new file mode 100644 index 0000000000..f3f61cf0d0 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerlock_supercedes_capture.html @@ -0,0 +1,112 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events pointer lock tests</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <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> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <script> + var lock_change_count = 0; + var capture_count = 0; + var mouse_move_count = 0; + + function resetTestState() { + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("no pointercapture while pointerlock", ['mouse']); + var div1 = document.getElementById("div1"); + var div2 = document.getElementById("div2"); + + on_event(div1, 'pointerdown', function(event) { + div2.setPointerCapture(event.pointerId); + div1.requestPointerLock(); + }); + on_event(div1, 'pointermove', function(event) { + mouse_move_count++ + if (lock_change_count == 1) { + if (mouse_move_count == 2) { + try { + div2.setPointerCapture(event.pointerId); + test_pointerEvent.step(function () { + assert_unreached("DOMException: InvalidStateError should have been thrown."); + }); + } catch (e) { + test_pointerEvent.step(function () { + assert_equals(e.name, "InvalidStateError", "DOMException should be InvalidStateError"); + }); + } + } else if (mouse_move_count == 3) { + document.exitPointerLock(); + mouse_move_count = 0; + } + + } + }); + on_event(div2, 'gotpointercapture', function(event) { + capture_count++; + }); + on_event(div2, 'lostpointercapture', function(event) { + capture_count++; + }); + on_event(document, 'pointerlockchange', function(event) { + lock_change_count++; + test_pointerEvent.step(function() { + if (lock_change_count == 1) + assert_equals(document.pointerLockElement, div1, "document.pointerLockElement should be div1."); + else if (lock_change_count == 2) + assert_equals(document.pointerLockElement, null, "document.pointerLockElement should be null."); + }); + }); + + injectInput().then(function(){ + test_pointerEvent.step(function(){ + assert_equals(lock_change_count, 2, "Pointer is unlocked"); + assert_greater_than(mouse_move_count, 1, "More than 1 pointermove has been received after unlocked"); + assert_equals(capture_count, 0, "There shouldn't be any capture events fired."); + }); + test_pointerEvent.done(); + }) + } + // Inject mouse input + function injectInput() { + var actions = new test_driver.Actions(); + return actions.pointerMove(0, 0, {origin: div1}) + .pointerDown() + .pointerMove(30, 30, {origin: div1}) + .pointerMove(60, 30, {origin: div1}) + .pointerMove(30, 20, {origin: div1}) + .pointerMove(10, 50, {origin: div1}) + .pointerMove(40, 10, {origin: div1}) + .pointerMove(5, 30, {origin: div1}) + .pointerMove(-5, 15, {origin: div1}) + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events pointer lock test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks that we do not set the pointer capture when any element in the page gets a pointer lock. + <ol> + <li>Press left button down on the green rectangle and hold it.</li> + <li>Move the mouse inside the green rectangle.</li> + </ol> + + Test passes if the pointer capture is not set when the green rectangle gets the pointer lock. + </h4> + <div id="testContainer"> + <div id="div1" style="width:800px;height:250px;background:green"></div> + <div id="div2" style="width:800px;height:250px;background:yellow"></div> + </div> + <div class="spacer"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointermove_in_pointerlock.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointermove_in_pointerlock.html new file mode 100644 index 0000000000..f4155180b8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointermove_in_pointerlock.html @@ -0,0 +1,149 @@ +<!doctype html> +<html> + <head> + <title>pointermove</title> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> + <script type="text/javascript" src="/resources/testdriver.js"></script> + <script type="text/javascript" src="/resources/testdriver-actions.js"></script> + <script type="text/javascript" src="/resources/testdriver-vendor.js"></script> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="../pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h2>pointerlock</h2> + <h4>Test Description: This test checks if pointermove is dispatched correctly while in pointerlock mode. + <ol> + <li>Click in the black box (and accept the pointerlock permission if asked).</li> + <li>Move your mouse.</li> + <li>Click in the purple box inside the iframe</li> + <li>Move your mouse.</li> + </ol> + </h4> + <div id="target0"></div> + <iframe id="innerframe" onload="iframe_loaded()" src="resources/pointerevent_pointermove_in_pointerlock-iframe.html"></iframe> + <script> + window.name="outerframe"; + var test_pointermove = async_test("pointermove event received"); + var test_pointermove_innerframe = async_test("pointermove event received inner frame"); + var actions_promise1; + var actions_promise2; + var actions_promise3; + var actions_promise4; + PhaseEnum = { + Start: 0, + Lock1: 1, + Lock2: 2, + Done: 3, + }; + var iframe_loaded_promise; + var iframe_loaded_resolve; + + iframe_loaded_promise = new Promise((resolve, reject)=>{ + iframe_loaded_resolve = resolve; + }); + + function iframe_loaded(){ + iframe_loaded_resolve(); + } + + async function run() { + // wait for iframe to fully load + await iframe_loaded_promise; + var target0 = document.getElementById("target0"); + var innerframe = document.getElementById('innerframe'); + var target1 = innerframe.contentDocument.getElementById('target1'); + innerframe.contentWindow.name = "innerframe"; + phase = PhaseEnum.Start; + + on_event(target0, "click", async (event)=>{ + if(phase === PhaseEnum.Start){ + target0.requestPointerLock(); + }else{ + await actions_promise2; + document.exitPointerLock(); + } + }); + + on_event(target1, "click", async (event)=>{ + if(phase === PhaseEnum.Lock1){ + target1.requestPointerLock(); + } + else{ + await actions_promise4; + innerframe.contentDocument.exitPointerLock(); + } + }); + + on_event(target0, "pointermove", async (event)=> { + if (phase === PhaseEnum.Lock1) { + test_pointermove.step(()=> { + assert_equals(document.pointerLockElement, target0); + assert_equals(event.view.name, "outerframe", "View attribute of pointermove should be the target frame."); + }, "View attribute of pointermove should be the target frame."); + } + }); + + on_event(target1, "pointermove", async (event)=> { + if (phase === PhaseEnum.Lock2) { + test_pointermove_innerframe.step(()=> { + assert_equals(innerframe.contentDocument.pointerLockElement, target1); + assert_equals(event.view.name, "innerframe", "View attribute of pointermove should be the target frame."); + }, "View attribute of pointermove should be the target frame."); + } + }); + + on_event(document, "pointerlockchange", async (event)=> { + await actions_promise1; + if (phase === PhaseEnum.Start) { + test_pointermove.step(()=>{ + assert_equals(document.pointerLockElement, target0); + }); + phase++; + // Send moves in main frame target and then click on target0 + actions_promise2 = new test_driver.Actions() + .pointerMove(10, 30, {origin: target0}) + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerUp() + .send(); + }else{ + // when we exit pointerlock we are done + test_pointermove.done(); + // user activate innerframe + actions_promise3 = clickInTarget("mouse", target1); + } + }); + + on_event(innerframe.contentDocument, "pointerlockchange", async (event)=> { + await actions_promise3; + if (phase === PhaseEnum.Lock1) { + test_pointermove_innerframe.step(()=> + assert_equals(innerframe.contentDocument.pointerLockElement, target1)); + phase++; + // Send moves in inner frame target and then click anywhere in the inner frame + await new test_driver.Actions() + .pointerMove(10, 30, {origin: target1}) + .send(); + actions_promise4 = clickInTarget("mouse", target1); + } + else{ + // when we exit pointerlock we are done + test_pointermove_innerframe.done(); + } + }); + + on_event(document, "pointerlockerror", test_pointermove.unreached_func("pointer lock request should not fail in document!")); + on_event(innerframe.contentDocument, "pointerlockerror", test_pointermove_innerframe.unreached_func("pointer lock request should not fail in innerframe.contentDocument!")); + + // Click the outer frame target to lock. + actions_promise1 = clickInTarget("mouse", target0); + } + </script> + <div id="complete-notice"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointermove_on_chorded_mouse_button_when_locked.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointermove_on_chorded_mouse_button_when_locked.html new file mode 100644 index 0000000000..8c362a6fc5 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointermove_on_chorded_mouse_button_when_locked.html @@ -0,0 +1,133 @@ +<!doctype html> +<html> + <head> + <title>Pointermove on button state changes</title> + <meta name="viewport" content="width=device-width"> + <meta name="assert" content="When a pointer changes button state and does not produce a different event, the pointermove event must be dispatched."/> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <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> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="../pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h2>PointerMove</h2> + <h4>Test Description: This test checks if pointermove event are triggered by button state changes + <ol> + <li>Click on the black rectangle to lock the pointer </li> + <li>Press a button and hold it</li> + <li>Press a second button</li> + <li>Release the second button</li> + <li>Release the first button to complete the test</li> + </ol> + </h4> + <div id="target0" style="background:black"></div> + <script> + var detected_pointertypes = {}; + var test_pointermove = async_test("pointer locked pointermove events received for button state changes"); + add_completion_callback(showPointerTypes); + var actions_promise; + + var step = 0; + var firstButton = 0; + var pointer_locked = false; + + async function run() { + var target0 = document.getElementById("target0"); + + // When a pointer changes button state and the circumstances produce no other pointer event, the pointermove event must be dispatched. + // 5.2.6 + + on_event(target0, "pointerdown", function (event) { + if (pointer_locked) { + detected_pointertypes[event.pointerType] = true; + test_pointermove.step(function() { + assert_equals(step, 0, "There must not be more than one pointer down event."); + }); + if (step == 0) { + step = 1; + firstButton = event.buttons; + } + } + }); + on_event(target0, "pointermove", function (event) { + if (pointer_locked) { + detected_pointertypes[event.pointerType] = true; + + if (step == 1 && event.button != -1) { // second button pressed + test_pointermove.step(function() { + assert_not_equals(event.buttons, firstButton, "The pointermove event must be triggered by pressing a second button."); + }); + test_pointermove.step(function() { + assert_true((event.buttons & firstButton) != 0, "The first button must still be reported pressed."); + }); + step = 2; + } else if (step == 2 && event.button != -1) { // second button released + test_pointermove.step(function() { + assert_equals(event.buttons, firstButton, "The pointermove event must be triggered by releasing the second button."); + }); + step = 3; + } + } + }); + on_event(target0, "pointerup", function (event) { + if (pointer_locked) { + detected_pointertypes[event.pointerType] = true; + test_pointermove.step(function() { + assert_equals(step, 3, "The pointerup event must be triggered after pressing and releasing the second button."); + }); + test_pointermove.step(function() { + assert_equals(event.buttons, 0, "The pointerup event must be triggered by releasing the last pressed button."); + }); + document.exitPointerLock(); + } else { + target0.requestPointerLock(); + } + }); + on_event(document, 'pointerlockchange', function(event) { + if (document.pointerLockElement == target0) + pointer_locked = true; + else{ + pointer_locked = false; + actions_promise.then( () => { + test_pointermove.done(); + }); + } + }); + on_event(target0, "mouseup", function (event) { + event.preventDefault(); + }); + on_event(target0, "contextmenu", function (event) { + event.preventDefault(); + }); + + // Inject mouse input + var actions = new test_driver.Actions(); + actions_promise = actions + .pointerMove(0, 0, {origin: target0}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + await actions_promise; + await resolveWhen(()=>pointer_locked); + actions = new test_driver.Actions(); + actions_promise = actions + .pointerMove(0, 0, {origin: target0}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerDown({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + } + </script> + <h1>Pointer Lock Pointer Events pointermove on button state changes Tests</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerrawupdate_in_pointerlock.html b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerrawupdate_in_pointerlock.html new file mode 100644 index 0000000000..73aa4e5a58 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/pointerevent_pointerrawupdate_in_pointerlock.html @@ -0,0 +1,108 @@ +<!doctype html> +<html> + <head> + <title>pointerrawupdate</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <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> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="../pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h2>pointerrawupdate</h2> + <h4>Test Description: This test checks if pointerrawupdate is dispatched correctly while in pointerlock mode. + <ol> + <li>Click in the black box (and accept the pointerlock permission if asked).</li> + <li>Move your mouse.</li> + <li>Click in the purple box inside the iframe</li> + <li>Move your mouse.</li> + </ol> + </h4> + <div id="target0"></div> + <iframe id="innerframe" src="../resources/pointerevent_pointerrawupdate_in_pointerlock-iframe.html"></iframe> + <script> + window.name="outerframe"; + var test_pointerrawupdate = async_test("pointerrawupdate event received"); + + var outerframe_pointerrawupdateReceived = false; + var innerframe_pointerrawupdateReceived = false; + + async function run() { + var target0 = document.getElementById("target0"); + var innerframe = document.getElementById('innerframe'); + var target1 = innerframe.contentDocument.getElementById('target1'); + + innerframe.contentWindow.name = "innerframe"; + + on_event(document, "pointerlockchange", function(event) { + if (document.pointerLockElement == target0) { + on_event(target0, "pointerrawupdate", function (event) { + outerframe_pointerrawupdateReceived = true; + test_pointerrawupdate.step(function() { + assert_equals(event.view.name, "outerframe", "View attribute of pointerrawupdate should be the target frame. target0 pointerrawupdate"); + }, "View attribute of pointerrawupdate should be the target frame."); + }); + on_event(target0, "pointermove", function (event) { + test_pointerrawupdate.step(function() { + assert_true(outerframe_pointerrawupdateReceived, + "Pointerrawupdate event should have been received before pointermove while in pointerlock mode."); + assert_equals(event.view.name, "outerframe", "View attribute of pointerrawupdate should be the target frame. target0 pointermove"); + }, "Pointerrawupdate event should have been received before pointermove while in pointerlock mode."); + document.exitPointerLock(); + + on_event(target1, "click", function(event) { + target1.requestPointerLock(); + }); + + on_event(innerframe.contentDocument, "pointerlockchange", function(event) { + if (innerframe.contentDocument.pointerLockElement == target1) { + on_event(target1, "pointerrawupdate", function (event) { + innerframe_pointerrawupdateReceived = true; + test_pointerrawupdate.step(function() { + assert_equals(event.view.name, "innerframe", "View attribute of pointerrawupdate should be the target frame. target1"); + }, "View attribute of pointerrawupdate should be the target frame."); + }); + on_event(target1, "pointermove", function (event) { + test_pointerrawupdate.step(function() { + assert_true(innerframe_pointerrawupdateReceived, + "Pointerrawupdate event should have been received before pointermove while in pointerlock mode."); + }, "Pointerrawupdate event should have been received before pointermove while in pointerlock mode."); + innerframe.contentDocument.exitPointerLock(); + test_pointerrawupdate.done(); + }); + } + }); + + }); + } + }); + on_event(target0, "click", function(event) { + target0.requestPointerLock(); + }); + + // Inject input + var iframeRect = innerframe.getClientRects()[0]; + var rect = target1.getClientRects()[0]; + var center_x = Math.round(iframeRect.left + (rect.left + rect.right) / 2); + var center_y = Math.round(iframeRect.top + (rect.top + rect.bottom) / 2); + await new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerUp() + .pointerMove(10, 0, {origin: target0}) + .pointerMove(center_x, center_y) + .pointerDown() + .pointerUp() + .pointerMove(center_x + 10, center_y) + .send(); + } + + </script> + <div id="complete-notice"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/resources/pointerevent_movementxy-iframe.html b/testing/web-platform/tests/pointerevents/pointerlock/resources/pointerevent_movementxy-iframe.html new file mode 100644 index 0000000000..627af3b61c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/resources/pointerevent_movementxy-iframe.html @@ -0,0 +1,8 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width"> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerlock/resources/pointerevent_pointermove_in_pointerlock-iframe.html b/testing/web-platform/tests/pointerevents/pointerlock/resources/pointerevent_pointermove_in_pointerlock-iframe.html new file mode 100644 index 0000000000..699fb39b8b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerlock/resources/pointerevent_pointermove_in_pointerlock-iframe.html @@ -0,0 +1,11 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../../pointerevent_styles.css"> + </head> + <body> + <div id="target1"></div> + </body> +</html> |