diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/pointerevents/compat | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/pointerevents/compat')
8 files changed, 810 insertions, 0 deletions
diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_compat-mouse-events-when-removing-nodes.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_compat-mouse-events-when-removing-nodes.html new file mode 100644 index 0000000000..6d13b0de35 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_compat-mouse-events-when-removing-nodes.html @@ -0,0 +1,111 @@ +<!DOCTYPE HTML> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script type="text/javascript" src="../pointerevent_support.js"></script> +<!-- There are significant differences in how browsers fire pointer events and +compat mouse events when elements are removed from the dom. +There is a discussion about the order of pointer events and mouse compat events +for this scenario in the pointer event working group (See link below)--> +<link rel="help" href="https://github.com/w3c/pointerevents/issues/285"> +<style> +div.box { + margin: 5px; + padding: 20px; + float: left; + background-color:green; +} +#grey { + width: 50px; + height: 50px; +} +</style> + +<h1>Verifies the compatibility mouse events are sent correctly when the node is deleted on pointer event handler.</h1> + +<div id="grey" class="box" style="background-color:grey"> +</div> +<button id="done">Done</button> + +<div id="console"></div> + +<script> + +var receivedEvents = []; +var done_clicked = false; + +var eventList = ["mousedown", "mouseup", "mousemove", + "pointerdown", "pointerup", "pointermove"]; + + +var removeNodeEvent = ""; + +var greyDiv = document.getElementById("grey"); +eventList.forEach(function(eventName) { + greyDiv.addEventListener(eventName, function(event) { + if (event.eventPhase == Event.AT_TARGET) { + receivedEvents.push(event.type+"@grey"); + } + }); +}); + +function createGreenBoxAndAddListeners() { + var greenDiv = document.createElement("div"); + greenDiv.setAttribute("class", "box"); + greenDiv.id = "green"; + greyDiv.innerHTML = ""; + greyDiv.appendChild(greenDiv); + eventList.forEach(function(eventName) { + greenDiv.addEventListener(eventName, function(event) { + if (event.eventPhase == Event.AT_TARGET) { + receivedEvents.push(event.type+"@green"); + if (event.type == removeNodeEvent) { + greenDiv.parentNode.removeChild(greenDiv); + } + } + }); + }); +} + +var done_button = document.getElementById("done"); +done_button.addEventListener("click",()=>done_clicked=true); + +function performActions() { + var rect = document.getElementById("green").getBoundingClientRect(); + var x1 = Math.ceil(rect.left + 5); + var y1 = Math.ceil(rect.top + 5); + + return new test_driver.Actions() + .pointerMove(0, 0) + .pointerMove(x1, y1) + .pointerDown() + .pointerUp() + .send() + .then(()=> test_driver.click(done_button)); +} + +function testScenario(targetEvent, expectedEvents, description) { + promise_test(async () => { + receivedEvents = []; + removeNodeEvent = targetEvent; + createGreenBoxAndAddListeners(); + + await performActions(); + assert_array_equals(receivedEvents, expectedEvents); + }, description); +} + +testScenario("", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@green"], + "Compat mouse events with no node removal"); + +testScenario("pointermove", ["pointermove@green", "mousemove@grey", "pointerdown@grey", "mousedown@grey", "pointerup@grey", "mouseup@grey"], + "Compat mouse events with node removal on pointermove"); + +testScenario("pointerdown", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@grey", "pointerup@grey", "mouseup@grey"], + "Compat mouse events with node removal on pointerdown"); + +testScenario("pointerup", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@grey"], + "Compat mouse events with node removal on pointerup"); +</script> diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-on-object.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-on-object.html new file mode 100644 index 0000000000..78edfbde1b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-on-object.html @@ -0,0 +1,111 @@ +<!DOCTYPE HTML> +<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-vendor.js"></script> +<script type="text/javascript" src="/resources/testdriver-actions.js"></script> +<script type="text/javascript" src="../pointerevent_support.js"></script> + +<style> +#obj { + width: 50px; + height: 50px; + padding: 50px; + background-color: lightblue; + border:1px solid black; +} +div { + display: block; +} +</style> + +<h1>Verifies that mouse activities on an object fire pointerevents. It expected to get pointerup when the pointerdown happened on the object for compatibility with flash objects.</h1> + + +<p> + To test that when clicking inside the blue rectangle all compat mouse events are correct: + <ul> + <li> Click once in the blue rectangle + <li> Click the Done button + </ul> +</p> +<p> + To test that when dragging mouse outside all compat mouse events are correct: + <ul> + <li> Press left mouse button in the blue rectangle + <li> Drag the mouse cursor out of the blue rectangle + <li> Release the left mouse button + <li> Click the Done button + </ul> +</p> +<!-- draggable is set to false because there is a difference between auto draggable value in different browsers --> +<object id="obj" draggable="false"></object> +<button id="done">Done</button> +<div id="log"></div> +<script> +var target = document.getElementById("obj"); +var done = document.getElementById("done"); + +var rect = target.getBoundingClientRect(); +var done_clicked = 0; +var receivedEvents = []; +var previous_done_clicked = 0; + +["mousedown", "mouseup", "mousemove", "pointerdown", "pointerup", "pointermove"].forEach(function(eventName) { + target.addEventListener(eventName, function(event) { + // This will clear receivedEvents once another test starts + if(previous_done_clicked !== done_clicked){ + previous_done_clicked = done_clicked; + receivedEvents = []; + } + receivedEvents.push(event.type); + }); +}); + +document.getElementById('done').addEventListener('click', (e) => done_clicked++); + +// Need to prevent the default behaviour for firefox +target.addEventListener("dragstart", (e)=>e.preventDefault()); + +if(window.promise_test){ + promise_test(async() => { + receivedEvents = []; + + await new test_driver.Actions() + .pointerMove(Math.ceil(rect.left+5), Math.ceil(rect.top+5)) + .pointerDown() + .pointerUp() + .send() + .then(() => clickInTarget("mouse", done)); + await resolveWhen(() => done_clicked === 1); + + assert_array_equals(receivedEvents.filter(isPointerEvent), ["pointermove", "pointerdown", "pointerup"], + "Click on object should result in the correct sequence of pointer events"); + assert_array_equals(receivedEvents.filter(isMouseEvent), ["mousemove", "mousedown", "mouseup"], + "Click on object should result in the correct sequence of mouse events"); + assert_true(arePointerEventsBeforeCompatMouseEvents(receivedEvents), + "Click on object should result in the correct sequence of events: " + receivedEvents); + }, "Normal click event sequence within object"); + + promise_test(async() => { + receivedEvents = []; + + await new test_driver.Actions() + .pointerMove(Math.ceil(rect.left+5), Math.ceil(rect.top+5)) + .pointerDown() + .pointerMove(Math.ceil(rect.left-5), Math.ceil(rect.top-5)) + .pointerUp() + .send() + .then(() => clickInTarget("mouse", done)); + await resolveWhen(() => done_clicked === 2); + + assert_array_equals(receivedEvents.filter(isPointerEvent), ["pointermove", "pointerdown", "pointermove", "pointerup"], + "Drag from object should result in the correct sequence of pointer events"); + assert_array_equals(receivedEvents.filter(isMouseEvent), ["mousemove", "mousedown", "mousemove", "mouseup"], + "Drag from object should result in the correct sequence of mouse events"); + assert_true(arePointerEventsBeforeCompatMouseEvents(receivedEvents), + "Drag from object should result in the correct sequence of events: " + receivedEvents); + + }, "Click and drag outside of object event sequence"); +} +</script> diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-on-scrollbar.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-on-scrollbar.html new file mode 100644 index 0000000000..43d78e147e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-on-scrollbar.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script type="text/javascript" src="../pointerevent_support.js"></script> +<style> +#target { + height: 100px; + width: 100px; + overflow-y: scroll; +} +#spacer { + background: green; + height: 200px; +} +</style> +<h1>Verifies that pointerup/down are fired correctly for corresponding mouse events on the scollbar.</h1> +<div id="target"> +<div id="spacer"></div> +</div> + +<div id="console"></div> + +<script> +var receivedEvents = []; +var targetDiv = document.getElementById('target'); + +function init() { + var eventList = ["mousedown", "mouseup", "pointerdown", "pointerup"]; + eventList.forEach(function(eventName) { + targetDiv.addEventListener(eventName, function(event) { + receivedEvents.push(event.type + "@target"); + }); + }); +} + +function performActions(x, y){ + return new test_driver.Actions() + .pointerMove(0, 0) + .pointerMove(x, y) + .pointerDown(0) + .pointerUp(0) + .send() + .then(()=>resolveWhen(()=>receivedEvents.length == 4)); +} + +function runTests() { + var rect = targetDiv.getBoundingClientRect(); + var x1 = rect.right - 5; + var y1 = rect.top + 20; + + test(function(){ + assert_equals(targetDiv, document.elementFromPoint(x1,y1), + "Didn't hit the scrollbar as expected"); + }, `Test point (${x1},${y1}) is on the scrollbar`); + + promise_test(async () => { + await performActions(Math.ceil(x1), Math.ceil(y1)); + assert_array_equals(receivedEvents, ["pointerdown@target", "mousedown@target", + "pointerup@target", "mouseup@target"]); + }, "Verifies that pointerup/down are fired correctly for corresponding mouse events on the scollbar."); +} + +init(); +runTests(); +</script> diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-preventdefault.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-preventdefault.html new file mode 100644 index 0000000000..c4990ff5f9 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-preventdefault.html @@ -0,0 +1,204 @@ +<!DOCTYPE HTML> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script type="text/javascript" src="../pointerevent_support.js"></script> +<style> +div.box { + margin: 10px; + padding: 50px; + float: left; +} +</style> +<h1>Verifies the effect of pointer event prevent-default on following pointer & mouse events.</h1> +<div id="target" class="box" style="background-color:green;"> +</div> + +<script> +var receivedEvents = []; +var receivedMouseEvents = []; +var receivedPointerEvents = []; +var mouseEventList = ["mousedown", "mouseup", "mouseenter", "mouseleave", "mouseover", "mouseout", "mousemove"]; +var pointerEventList = ["pointerdown", "pointerup", "pointerenter", "pointerleave", "pointerover", "pointerout", "pointermove"]; + +var preventDefaultList = ["none"].concat(pointerEventList); +var eventToPreventDefault = ""; + +function init() { + var targetDiv = document.getElementById("target"); + + mouseEventList.forEach(function(eventName) { + targetDiv.addEventListener(eventName, function(event) { + receivedEvents.push(eventName); + receivedMouseEvents.push(eventName); + }); + }); + + pointerEventList.forEach(function(eventName) { + targetDiv.addEventListener(eventName, function(event) { + if (event.type == eventToPreventDefault) { + event.preventDefault(); + } + receivedEvents.push(eventName); + receivedPointerEvents.push(eventName); + }); + }); +} + +var expectedPointerEvents = new Map([ + ["none", ["pointerover", "pointerenter", "pointermove", "pointerdown", "pointerup", + "pointerdown", "pointermove", "pointerout", "pointerleave", + "pointerover", "pointerenter", "pointermove", "pointerup", "pointerout", + "pointerleave" + ]], + ["pointerdown", ["pointerover", "pointerenter", "pointermove", "pointerdown", + "pointerup", "pointerdown", "pointermove", "pointerout", "pointerleave", + "pointerover", "pointerenter", "pointermove", "pointerup", "pointerout", + "pointerleave" + ]], + ["pointerup", ["pointerover", "pointerenter", "pointermove", "pointerdown", + "pointerup", "pointerdown", "pointermove", "pointerout", "pointerleave", + "pointerover", "pointerenter", "pointermove", "pointerup", + "pointerout", "pointerleave" + ]], + ["pointerenter", ["pointerover", "pointerenter", "pointermove", + "pointerdown", "pointerup", "pointerdown", "pointermove", + "pointerout", "pointerleave", "pointerover", "pointerenter", + "pointermove", "pointerup", "pointerout", "pointerleave" + ]], + ["pointerleave", ["pointerover", "pointerenter", "pointermove", + "pointerdown", "pointerup", "pointerdown", "pointermove", + "pointerout", "pointerleave", "pointerover", "pointerenter", + "pointermove", "pointerup", "pointerout", "pointerleave" + ]], + ["pointerover", ["pointerover", "pointerenter", "pointermove", + "pointerdown", "pointerup", "pointerdown", "pointermove", + "pointerout", "pointerleave", "pointerover", "pointerenter", + "pointermove", "pointerup", "pointerout", + "pointerleave" + ]], + ["pointerout", ["pointerover", "pointerenter", "pointermove", + "pointerdown", "pointerup", "pointerdown", "pointermove", + "pointerout", "pointerleave", "pointerover", "pointerenter", + "pointermove", "pointerup", "pointerout", + "pointerleave" + ]], + ["pointermove", ["pointerover", "pointerenter", "pointermove", + "pointerdown", "pointerup", "pointerdown", "pointermove", + "pointerout", "pointerleave", "pointerover", "pointerenter", + "pointermove", "pointerup", "pointerout", "pointerleave" + ]] + ]); +var expectedMouseEvents = new Map([ + ["none", ["mouseover", "mouseenter", "mousemove", "mousedown", "mouseup", + "mousedown", "mousemove", "mouseout", "mouseleave", + "mouseover", "mouseenter", "mousemove", "mouseup", "mouseout", "mouseleave" + ]], + ["pointerdown", ["mouseover", "mouseenter", "mousemove", + "mouseout", "mouseleave", "mouseover", "mouseenter", + "mouseout", "mouseleave" + ]], + ["pointerup", ["mouseover", "mouseenter", "mousemove", + "mousedown", "mouseup", "mousedown", "mousemove", + "mouseout", "mouseleave", "mouseover", + "mouseenter", "mousemove", "mouseup", "mouseout", "mouseleave" + ]], + ["pointerenter", ["mouseover", "mouseenter", "mousemove", "mousedown", + "mouseup", "mousedown", "mousemove", "mouseout", "mouseleave", + "mouseover", "mouseenter", "mousemove", "mouseup", "mouseout", "mouseleave" + ]], + ["pointerleave", ["mouseover", "mouseenter", "mousemove", "mousedown", + "mouseup", "mousedown", "mousemove", "mouseout", "mouseleave", + "mouseover", "mouseenter", "mousemove", "mouseup", + "mouseout", "mouseleave" + ]], + ["pointerover", ["mouseover", "mouseenter", "mousemove", + "mousedown", "mouseup", "mousedown", "mousemove", "mouseout", + "mouseleave", "mouseover", "mouseenter", "mousemove", "mouseup", + "mouseout", "mouseleave" + ]], + ["pointerout", ["mouseover", "mouseenter", "mousemove", + "mousedown", "mouseup", "mousedown", "mousemove", + "mouseout", "mouseleave", "mouseover", "mouseenter", + "mousemove", "mouseup", "mouseout", "mouseleave" + ]], + ["pointermove", ["mouseover", "mouseenter", "mousemove", + "mousedown", "mouseup", "mousedown", "mousemove", + "mouseout", "mouseleave", "mouseover", "mouseenter", + "mousemove", "mouseup", "mouseout", "mouseleave" + ]] + ]); + +async function runTestForDefaultEvent(preventDefaultEvent) { + promise_test((test)=> + new Promise(async (resolve, reject)=>{ + test.add_cleanup(()=>{ + receivedEvents = []; + receivedPointerEvents = []; + receivedMouseEvents = []; + eventToPreventDefault = ""; + }); + eventToPreventDefault = preventDefaultEvent; + + try{ + // if awaited Promise rejects then fail the test + await performActions(test, preventDefaultEvent); + } + catch(e){ + reject(e); + } + test.step(()=>{ + if(eventToPreventDefault === 'none'){ + assert_true(arePointerEventsBeforeCompatMouseEvents(receivedEvents), "There are no compatible mouse events for all pointer events:" + receivedEvents); + } + assert_array_equals(receivedPointerEvents, expectedPointerEvents.get(preventDefaultEvent)); + assert_array_equals(receivedMouseEvents, expectedMouseEvents.get(preventDefaultEvent)); + }); + resolve(); + }), `Verifies the effect of pointer event prevent-default on ${preventDefaultEvent}`); +} + +async function runTests(){ + // create one test for each event in preventDefaultList + // run all tests one by one + preventDefaultList.forEach(preventDefaultEvent=>runTestForDefaultEvent(preventDefaultEvent)); +} + +function performActions(test, preventDefaultEvent){ + let targetDiv = document.getElementById("target"); + let rect = targetDiv.getBoundingClientRect(); + let x1 = Math.ceil(rect.left - 3); + let y1 = Math.ceil(rect.top - 5); + let x2 = Math.ceil(rect.left + 3); + let y2 = Math.ceil(rect.top + 5); + + let eventWatcher = new EventWatcher(test, targetDiv, ["mouseleave"]); + // wait for all expected events to happen. + // Because each test ends with mouseleave and there are 2 mouseleave events, + // we use EventWatcher to wait for the two mouseleave events to happen + let donePromise = eventWatcher.wait_for(["mouseleave", "mouseleave"], { record: 'all' }); + let actionsPromise = new test_driver.Actions() + .pointerMove(0, 0) + // start with mouse outside target + .pointerMove(x1, y1) + // move into target and click + .pointerMove(x2, y2) + .pointerDown() + .pointerUp() + // drag out of and into target & release within target + .pointerDown() + .pointerMove(x2+5, y2+5) + .pointerMove(x1, y1) + .pointerMove(x2+1, y2+1) + .pointerUp() + // move outside target again + .pointerMove(x1, y1) + .send(); + return Promise.all([donePromise, actionsPromise]); +} + +init(); +runTests(); +</script> diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-updown-events.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-updown-events.html new file mode 100644 index 0000000000..a5433aab53 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-updown-events.html @@ -0,0 +1,87 @@ +<!DOCTYPE HTML> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script type="text/javascript" src="../pointerevent_support.js"></script> +<style> +div.box { + margin: 10px; + padding: 50px; + float: left; +} +</style> +<h1>Verifies that pointerup/down are fired correctly for corresponding mouse events</h1> +<div id="lightgreen" class="box" style="background-color:lightgreen"> + <div id="green" class="box" style="background-color:green"> + </div> +</div> + +<div id="console"></div> + +<script> +var eventsReceived = []; +function init() { + var eventList = ["mousedown", "mouseup", "pointerdown", "pointerup"]; + + ["green", "lightgreen"].forEach(function(id) { + var targetDiv = document.getElementById(id); + + eventList.forEach(function(eventName) { + targetDiv.addEventListener(eventName, function(event) { + eventsReceived.push(`${event.type}@${id}`); + }); + }); + }); +} + +function performActions() { + var rect = document.getElementById("green").getBoundingClientRect(); + var x1 = Math.ceil(rect.left + 5); + var y1 = Math.ceil(rect.top + 5); + + var rect = document.getElementById("lightgreen").getBoundingClientRect(); + var x2 = Math.ceil(rect.left + 5); + var y2 = Math.ceil(rect.top + 5); + + return new test_driver.Actions() + .pointerMove(x1, y1) + .pointerDown() + .pointerUp() + .pointerDown() + + .pointerMove(x2, y2) + .pointerUp() + .pointerDown() + + .pointerMove(x1, y1) + .pointerUp() + .send() + .then(()=>resolveWhen(()=>eventsExpected.length === eventsReceived.length)); +} +var eventsExpected = ["pointerdown@green", "pointerdown@lightgreen", + "mousedown@green", "mousedown@lightgreen", + "pointerup@green", "pointerup@lightgreen", + "mouseup@green", "mouseup@lightgreen", + "pointerdown@green", "pointerdown@lightgreen", + "mousedown@green", "mousedown@lightgreen", + "pointerup@lightgreen", "mouseup@lightgreen", + "pointerdown@lightgreen", "mousedown@lightgreen", + "pointerup@green", "pointerup@lightgreen", + "mouseup@green", "mouseup@lightgreen"]; +function runTests(){ + promise_test((test) => { + return new Promise(async (resolve)=>{ + await performActions(); + test.step(()=>{ + assert_array_equals(eventsExpected, eventsReceived); + }); + resolve(); + }); + }, "pointerup/down events are fired correctly for corresponding mouse events"); +} + +init(); +runTests(); +</script> diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_mouseevent_key_pressed.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouseevent_key_pressed.html new file mode 100644 index 0000000000..ea45adee82 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouseevent_key_pressed.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>Mouse events with keys pressed</title> + <link rel="author" title="Google" href="http://www.google.com/" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <script> + let testMouseKeyPressed = async_test('Tests that the mouse events with some keys pressed.'); + let activeKeys = false; + + window.addEventListener('pointermove', function(e) { + activeKeys = e.getModifierState("Alt") && + e.getModifierState("Control") && + e.getModifierState("Meta") && + e.getModifierState("Shift"); + }); + + async function runTest(){ + let event_watcher = new EventWatcher(testMouseKeyPressed, window, ["pointermove"], + ()=>waitForAnimationFrames(200)); + await Promise.all([event_watcher.wait_for(["pointermove"]), inject_input()]); + testMouseKeyPressed.step_func_done(()=>{ + assert_true(activeKeys, "Modifier keys not reflected in the pointermove event!"); + })(); + } + + function inject_input() { + const x = 100; + const y = 100; + const altKey = '\uE00A'; + const ctrlKey = '\uE009'; + const metaKey = '\uE03d'; + const shiftKey = '\uE008' + + // First press Alt, Control, Meta, Shift keys and then send a mouse move. + return new test_driver.Actions() + .keyDown(altKey) + .keyDown(ctrlKey) + .keyDown(metaKey) + .keyDown(shiftKey) + .pointerMove(x,y) + .send(); + } + </script> + + </head> + <body id="target" onload="runTest()"> + <h4>Test Description: Tests that the mouse events with some keys pressed. + <ol> + <li>Press Alt, Control, Meta, Shift keys and move the mouse</li> + </ol> + </h4> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_touch-action-verification.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_touch-action-verification.html new file mode 100644 index 0000000000..311d24b628 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_touch-action-verification.html @@ -0,0 +1,45 @@ +<!doctype html> +<html> + <head> +<!-- This file tests the additional touch-action values that are not in the main spec + but are mostly implemented by browsers. It should be integrated into main test + suite when they are accepted into the specification. --> + <title>touch-action: basic verification</title> + <meta name="assert" content="The touch-action CSS property determines whether touch input MAY trigger default behavior supplied by the user agent. + pinch-zoom: The user agent MAY consider touches that begin on the element only for the purposes of zooming in and out. + <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> + </head> + <body onload="run()"> + <h2>Pointer Events touch-action attribute support</h2> + <h4 id="desc">Test Description: Test will automatically check parsing behaviour of various touch-action combinations.</h4> + <script type='text/javascript'> + var detected_pointertypes = {}; + + setup({ explicit_done: true }); + + function run() { + var tests = document.querySelectorAll('.test'); + //TA 15.20 + for (var i = 0; i < tests.length; i++) { + test(function() { + var style = window.getComputedStyle(tests[i]); + assert_equals(tests[i].attributes.expected.value, style.touchAction); + }, tests[i].id); + } + done(); + } + </script> + <h1>touch-action: basic verification</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + <div class="test" id="explicit-pinch-zoom" style="touch-action: pinch-zoom;" expected="pinch-zoom"></div> + <div class="test" id="explicit-pinch-zoom-pan-x-pan-up" style="touch-action: pinch-zoom pan-x pan-up;" expected="pan-x pan-up pinch-zoom"></div> + <div class="test" id="explicit-pinch-zoom-pan-x-pan-y" style="touch-action: pinch-zoom pan-x pan-y;" expected="manipulation"></div> + <div class="test" id="explicit-invalid-14" style="touch-action: pinch-zoom none;" expected="auto"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/compat/pointerevent_touch-action_two-finger_interaction.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_touch-action_two-finger_interaction.html new file mode 100644 index 0000000000..91b0e6a1b4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_touch-action_two-finger_interaction.html @@ -0,0 +1,124 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: touch-action test for two-finger interaction</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <link rel="help" href="https://compat.spec.whatwg.org/#touch-action" /> + <meta name="assert" content="Tests that a two-finger pan gesture is cancelled in 'touch-action: pan-x pan-y' but is allowed in 'touch-action: pinch-zoom'"/> + <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> + <script type="text/javascript"> + var event_log = []; + var actions_promise; + var down_ids = new Set(); + var release_ids = new Set(); + + function resetTestState() { + event_log = []; + down_ids = new Set(); + release_ids = new Set(); + } + + function run() { + var test_pointer_events = [ + setup_pointerevent_test("two-finger pan on 'touch-action: pan-x pan-y'", ["touch"]), + setup_pointerevent_test("two-finger pan on 'touch-action: pinch-zoom'", ["touch"]) + ]; + var expected_events = [ + "pointerdown@black, pointerdown@black, pointerup@black, pointerup@black", + "pointerdown@grey, pointerdown@grey, pointercancel@grey, pointercancel@grey" + ]; + var current_test_index = 0; + var black = document.getElementById("black"); + var grey = document.getElementById("grey"); + var done = document.getElementById("done"); + + on_event(done, "click", function() { + test_pointer_events[current_test_index].step(function () { + assert_equals(down_ids.size, 2); + assert_equals(release_ids.size, 2); + assert_true([...down_ids].every(value => release_ids.has(value))); + assert_equals(event_log.join(", "), expected_events[current_test_index]); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointer_events[current_test_index++].done(); + if (current_test_index < 2) { + actions_promise = twoFingerDrag(grey).then(function() { + return clickInTarget("touch", done); + }); + } + }); + }); + + var targets = [black, grey]; + + ["pointerdown", "pointerup", "pointercancel"].forEach(function(eventName) { + targets.forEach(function(target){ + on_event(target, eventName, function (event) { + event_log.push(event.type + "@" + event.target.id); + + if (event.type == "pointerdown") { + down_ids.add(event.pointerId); + } else { + release_ids.add(event.pointerId); + } + }); + }); + }); + + // Inject touch inputs. + actions_promise = twoFingerDrag(black).then(function() { + return clickInTarget("touch", done); + }); + } + </script> + <style> + .box { + width: 250px; + height: 150px; + float: left; + margin: 10px; + } + + #black { + touch-action: pan-x pan-y; + background-color: black; + } + + #grey { + touch-action: pinch-zoom; + background-color: grey; + } + + #done { + float: left; + padding: 20px; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: touch-action test for two-finger interaction</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Tests that a two-finger pan gesture is cancelled in 'touch-action: pan-x pan-y' but is allowed in 'touch-action: pinch-zoom' + </h4> + <ol> + <li>Touch on Black with two fingers and drag both fingers down at same speed.</li> + <li>Tap on Done.</li> + <li>Touch on Grey with two fingers and drag both fingers down at same speed.</li> + <li>Tap on Done.</li> + </ol> + <div class="box" id="black"></div> + <input type="button" id="done" value="Done" /> + <div class="box" id="grey"></div> + <div id="log"></div> + </body> +</html> |