diff options
Diffstat (limited to 'testing/web-platform/tests/pointerevents')
145 files changed, 14278 insertions, 0 deletions
diff --git a/testing/web-platform/tests/pointerevents/META.yml b/testing/web-platform/tests/pointerevents/META.yml new file mode 100644 index 0000000000..1962feaf8a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/META.yml @@ -0,0 +1,6 @@ +spec: https://w3c.github.io/pointerevents/ +suggested_reviewers: + - Steditor + - plehegar + - RByers + - NavidZ diff --git a/testing/web-platform/tests/pointerevents/README.md b/testing/web-platform/tests/pointerevents/README.md new file mode 100644 index 0000000000..0cc0190979 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/README.md @@ -0,0 +1,9 @@ +Directory for Pointer Events Tests + +Latest Editor's Draft: https://w3c.github.io/pointerevents/ + +Latest W3C Technical Report: http://www.w3.org/TR/pointerevents/ + +Discussion forum for tests: http://lists.w3.org/Archives/Public/public-test-infra/ + +Test Assertion table: https://www.w3.org/wiki/PointerEvents/TestAssertions diff --git a/testing/web-platform/tests/pointerevents/capturing_boundary_event_handler_at_ua_shadowdom.html b/testing/web-platform/tests/pointerevents/capturing_boundary_event_handler_at_ua_shadowdom.html new file mode 100644 index 0000000000..7500277f22 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/capturing_boundary_event_handler_at_ua_shadowdom.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML> +<title>Capturing boundary event handler at UA Shadow DOM</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?touch"> +<meta name="variant" content="?pen"> +<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 src="pointerevent_support.js"></script> + +<style> + .target { + width: 100px; + height: 50px; + border: 1px solid red; + } +</style> +<!-- This div has no shadow dom, serves only as a "control" group. --> +<div class="target"></div> +<video class="target"></video> +<input class="target"></input> +<div id="done">done</div> + +<script> + "use strict"; + const pointer_type = location.search.substring(1); + + const targets = document.getElementsByClassName("target"); + const done = document.getElementById("done"); + + let event_log = []; + function logEventAndPhase(e) { + event_log.push(`${e.type}-${e.eventPhase}`); + } + + const logged_events = [ + "pointerenter", "pointerleave", "pointerover", "pointerout" + ]; + const expected_events_and_phases = [ + "pointerover-2", "pointerenter-2", "pointerout-2", "pointerleave-2" + ]; + + function addPromiseTest(target) { + const test_name = `Capturing boundary event handler at ${target.tagName}`; + promise_test(async () => { + event_log = []; + + logged_events.forEach(ename => { + target.addEventListener(ename, logEventAndPhase, {capture:true}); + }); + + let done_click_promise = getEvent("click", done); + + let actions = new test_driver.Actions() + .addPointer("TestPointer", pointer_type) + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: done}) + .pointerDown() + .pointerUp(); + + await actions.send(); + await done_click_promise; + + logged_events.forEach(ename => { + target.removeEventListener(ename, logEventAndPhase, {capture:true}); + }); + + assert_equals(event_log.toString(), + expected_events_and_phases.toString(), + "received events with phases"); + }, test_name); + } + + for (let i = 0; i < targets.length; i++) + addPromiseTest(targets.item(i)); +</script> diff --git a/testing/web-platform/tests/pointerevents/coalesced_events_attributes.html b/testing/web-platform/tests/pointerevents/coalesced_events_attributes.html new file mode 100644 index 0000000000..f6026048b6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/coalesced_events_attributes.html @@ -0,0 +1,130 @@ +<!doctype html> +<title>Coalesced events count and properties</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?pen"> +<meta name="variant" content="?touch"> +<meta name="viewport" content="width=device-width"> +<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 src="pointerevent_support.js"></script> +<link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> +<style> + div { + width: 100px; + height: 100px; + } +</style> +<div id="target"></div> +<div id="done"></div> + +<script> + "use strict"; + const pointer_type = location.search.substring(1); + const target = document.getElementById("target"); + + // https://w3c.github.io/pointerevents/#coalesced-events + function checkListAttributes(event) { + assert_equals(typeof event.getCoalescedEvents, "function", + event.type + ".getCoalescedEvents is a function"); + assert_equals(typeof event.getCoalescedEvents(), "object", + event.type + ".getCoalescedEvents() returns an object"); + if (event.type == "pointermove") { + assert_greater_than_equal(event.getCoalescedEvents().length, 1, + event.type + ".getCoalescedEvents() has at least 1 entry"); + } else { + assert_equals(event.getCoalescedEvents().length, 0, + event.type + ".getCoalescedEvents() has 0 entry"); + } + } + + promise_test(async () => { + const done = document.getElementById("done"); + + let pointerover_promise = getEvent("pointerover", target); + let pointerenter_promise = getEvent("pointerenter", target); + let pointerout_promise = getEvent("pointerout", target); + let pointerleave_promise = getEvent("pointerleave", target); + + await clickInTarget(pointer_type, target); + await clickInTarget(pointer_type, done); + + checkListAttributes(await pointerover_promise); + checkListAttributes(await pointerenter_promise); + checkListAttributes(await pointerout_promise); + checkListAttributes(await pointerleave_promise); + }, "Coalesced list in boundary events"); + + promise_test(async () => { + // We need "touch-action:none" to guarantee pointermove events. + target.classList.add("touchActionNone"); + + target.addEventListener("pointerdown", + e => target.setPointerCapture(e.pointerId), + {once: true}); + + target.addEventListener("pointermove", + e => target.releasePointerCapture(e.pointerId), + {once: true}); + + let gotpointercapture_promise = getEvent("gotpointercapture", target); + let lostpointercapture_promise = getEvent("lostpointercapture", target); + + await new test_driver.Actions() + .addPointer("TestPointer", pointer_type) + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerMove(20, 20, {origin: target}) + .pointerUp() + .send(); + + checkListAttributes(await gotpointercapture_promise); + checkListAttributes(await lostpointercapture_promise); + + target.classList.remove("touchActionNone"); + }, "Coalesced list in pointer-capture events"); + + promise_test(async () => { + // We need "touch-action:none" to guarantee pointermove events. + target.classList.add("touchActionNone"); + + let pointerdown_promise = getEvent("pointerdown", target); + let pointermove_promise = getEvent("pointermove", target); + let pointerup_promise = getEvent("pointerup", target); + + await new test_driver.Actions() + .addPointer("TestPointer", pointer_type) + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerMove(20, 20, {origin: target}) + .pointerUp() + .send(); + + checkListAttributes(await pointerdown_promise); + checkListAttributes(await pointermove_promise); + checkListAttributes(await pointerup_promise); + + target.classList.remove("touchActionNone"); + }, "Coalesced list in pointerdown/move/up events"); + + promise_test(async () => { + if (pointer_type !== "touch") { + assert_true(true, "Skipped for " + pointer_type); + return; + } + + let pointercancel_promise = getEvent("pointercancel", target); + + await new test_driver.Actions() + .addPointer("TestPointer", pointer_type) + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerMove(20, 20, {origin: target}) + .pointerUp() + .send(); + + checkListAttributes(await pointercancel_promise); + }, "Coalesced list in pointercancel event"); +</script> diff --git a/testing/web-platform/tests/pointerevents/coalesced_events_attributes_under_load.html b/testing/web-platform/tests/pointerevents/coalesced_events_attributes_under_load.html new file mode 100644 index 0000000000..442aecb73e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/coalesced_events_attributes_under_load.html @@ -0,0 +1,93 @@ +<!doctype html> +<title>Coalesced events under load</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?pen"> +<meta name="variant" content="?touch"> +<meta name="viewport" content="width=device-width"> +<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 src="pointerevent_support.js"></script> +<style> + #target { + width: 100px; + height: 100px; + touch-action: none; + } +</style> +<div id="target"></div> + +<script> + "use strict"; + const pointer_type = location.search.substring(1); + const target = document.getElementById("target"); + + // https://w3c.github.io/pointerevents/#coalesced-events + function checkCoalescedMoveEventAttributes(event) { + let coalesced_events = event.getCoalescedEvents(); + assert_greater_than_equal(coalesced_events.length, 1, + "pointermove.getCoalescedEvents() has at least 1 entry"); + + for (let i = 0; i < coalesced_events.length; i++) { + let coalesced_event = coalesced_events[i]; + + assert_equals(coalesced_event.isTrusted, true, + "coalesced_event.isTrusted is true"); + assert_equals(coalesced_event.bubbles, false, + "coalesced_event.bubbles is false"); + assert_equals(coalesced_event.cancelable, false, + "coalesced_event.cancelable is false"); + + if (i > 0) { + assert_greater_than_equal(coalesced_event.timeStamp, + coalesced_events[i-1].timeStamp, + "coalesced_event.timeStamp must be ascending"); + } + } + } + + let coalesced_event_received = false; + + promise_test(async t => { + let current_busyloop_ms = 5; + + target.addEventListener("pointerdown", event => { + // Every pointerdown blocks the main thread for a certain time limit, + // and then increases the time limit for next round in case the + // current limit fails to cause event coalescing. + let now = performance.now(); + while (performance.now() < now + current_busyloop_ms) + continue; + current_busyloop_ms *= 2; + }); + + target.addEventListener("pointermove", t.step_func(event => { + checkCoalescedMoveEventAttributes(event); + if (event.getCoalescedEvents().length > 1) + coalesced_event_received = true; + })); + + // Repeatedly send a long action sequence until either a coalesced event is + // encountered or the busyloop becomes too long. + while (!coalesced_event_received && current_busyloop_ms < 500) { + let pointerup_promise = getEvent("pointerup", target); + + let actions = new test_driver.Actions() + .addPointer("TestPointer", pointer_type) + .pointerMove(0, 0, { origin: target }) + .pointerDown(); + for (let i = 0; i < 5; i++) { + actions = actions.pointerMove(20, 20, { origin: target }) + .pointerMove(0, 0, { origin: target }); + } + actions = actions.pointerUp(); + + await actions.send(); + await await pointerup_promise; + } + + assert_true(coalesced_event_received, "Coalesed pointermoves received"); + }, "Coalesced pointermoves under load"); +</script> 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..27142a4f59 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-on-object.html @@ -0,0 +1,117 @@ +<!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); + }); +}); + +// Simple test to check that passive listeners can't prevent compatibility events. +target.addEventListener("pointerdown", function(event) { + event.preventDefault(); + }, + { passive: true, once: true }); + +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-passive.html b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-preventdefault-passive.html new file mode 100644 index 0000000000..57da096866 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-preventdefault-passive.html @@ -0,0 +1,84 @@ +<!DOCTYPE HTML> +<title>Canceling passive pointerevents does not affect compat mouseevents</title> +<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 src="../pointerevent_support.js"></script> +<style> + div { + margin: 20px; + padding: 20px; + background-color: green; + user-select: none; // Prevents text selection on drag. + } +</style> +<div id="logger" draggable="false"></div> +<div id="done"></div> + +<script> + 'use strict'; + + const logger = document.getElementById("logger"); + const done = document.getElementById("done"); + + let received_events = []; + + const logged_pointer_events = ["pointerdown", "pointermove", "pointerup", + "pointerenter", "pointerleave", "pointerover", "pointerout"]; + const logged_mouse_events = ["mousedown", "mousemove", "mouseup", + "mouseenter", "mouseleave", "mouseover", "mouseout"]; + + const expected_pointer_events = [ + "pointerover", "pointerenter", + "pointermove", "pointerdown", "pointermove", "pointerup", + "pointerout", "pointerleave" + ]; + + const expected_mouse_events = [ + "mouseover", "mouseenter", + "mousemove", "mousedown", "mousemove", "mouseup", + "mouseout", "mouseleave" + ]; + + logged_pointer_events.forEach(ename => logger.addEventListener(ename, e => { + received_events.push(e.type); + e.preventDefault(); + }, { passive: true })); + + logged_mouse_events.forEach(ename => logger.addEventListener(ename, e => + received_events.push(e.type))); + + promise_test(async () => { + received_events = []; + + let click_on_done = getEvent("click", done); + + let actions = new test_driver.Actions() + // Start outside all event listeners + .pointerMove(0, 0) + .pointerDown() + .pointerUp() + // Drag within "logger" + .pointerMove(0, 0, { origin: logger }) + .pointerDown() + .pointerMove(15, 15, { origin: logger }) + .pointerUp() + // Click "done" + .pointerMove(0, 0, { origin: done }) + .pointerDown() + .pointerUp() + .send(); + + await actions; + await click_on_done; + + assert_array_equals(received_events.filter(isPointerEvent), + expected_pointer_events, "expected pointer events"); + assert_array_equals(received_events.filter(isMouseEvent), + expected_mouse_events, "expected mouse events"); + assert_true(arePointerEventsBeforeCompatMouseEvents(received_events), + "pairing of pointer/mouse events"); + }, "Canceling passive pointerevents does not affect compat mouseevents"); +</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..549cbf55d8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/compat/pointerevent_mouse-pointer-preventdefault.html @@ -0,0 +1,143 @@ +<!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); + }); + }); + } + + function expectedPointerEvents() { + return [ + "pointerover", "pointerenter", "pointermove", "pointerdown", "pointerup", + "pointerdown", "pointermove", "pointerout", "pointerleave", "pointerover", + "pointerenter", "pointermove", "pointerup", "pointerout", "pointerleave" + ]; + } + + // When "pointerdown" is not prevented, all compat mouse events are fired. + // Otherwise, the "mousedown/move/up" events between "pointerdown" and + // "pointerup" are suppressed. + function expectedMouseEvents(prevented_event) { + return prevented_event === "pointerdown" + ? ["mouseover", "mouseenter", "mousemove", + "mouseout", "mouseleave", "mouseover", "mouseenter", + "mouseout", "mouseleave"] + : ["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()); + assert_array_equals(receivedMouseEvents, expectedMouseEvents(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> diff --git a/testing/web-platform/tests/pointerevents/html/pointerevent_drag_interaction-manual.html b/testing/web-platform/tests/pointerevents/html/pointerevent_drag_interaction-manual.html new file mode 100644 index 0000000000..1a80d239b8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/html/pointerevent_drag_interaction-manual.html @@ -0,0 +1,103 @@ +<html> + <head> + <title>Pointer Events interaction with drag and drop</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> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <script> + var eventList = ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture', 'dragstart', 'mousedown']; + + PhaseEnum = { + DndWithoutCapture: 0, + DndWithCapture: 1, + DndWithCaptureMouse: 2, + DndPrevented: 3, + Done: 4, + }; + var phase = PhaseEnum.DndWithoutCapture; + var received_events = []; + var pointerId = -1; + + function resetTestState() { + phase = PhaseEnum.DndWithoutCapture; + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointer events vs drag and drop", ['mouse']); + + var target0 = document.querySelector('#target0'); + var target1 = document.querySelector('#target1'); + + function handleEvent(e) { + if (e.type == 'pointerdown') { + received_events = []; + if (phase == PhaseEnum.DndWithCapture) { + target0.setPointerCapture(e.pointerId); + } else if (phase == PhaseEnum.DndWithCaptureMouse) { + pointerId = e.pointerId; + } + } + if (e.type == 'mousedown') { + if (phase == PhaseEnum.DndWithCaptureMouse) { + target0.setPointerCapture(pointerId); + } + } + received_events.push(e.type + "@" + e.target.id); + if (e.type == 'dragstart') { + e.dataTransfer.setData('text/plain', 'dragstart test'); + if (phase == PhaseEnum.DndPrevented) + e.preventDefault(); + } + if (phase == PhaseEnum.DndWithoutCapture && e.type == 'pointercancel') { + phase++; + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointercancel@target0", "Pointercancel should be fired with the expected order when drag operation starts."); + }, "Pointercancel when drag operation starts"); + } else if (phase == PhaseEnum.DndWithCapture && e.type == 'lostpointercapture') { + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts."); + }, "Pointercancel while capturing when drag operation starts"); + phase++; + } else if (phase == PhaseEnum.DndWithCaptureMouse && e.type == 'lostpointercapture') { + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts."); + }, "Pointercancel while capturing on mousedown when drag operation starts"); + phase++; + } else if (phase == PhaseEnum.DndPrevented && e.type == 'pointerup') { + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointerup@target1", "Pointerevent stream shouldn't get interrupted when drag is prevented."); + }, "Pointerevent stream when drag is prevented."); + phase++; + test_pointerEvent.done(); + } + } + eventList.forEach(function(eventName) { + on_event(target0, eventName, handleEvent); + on_event(target1, eventName, handleEvent); + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events interaction with drag and drop</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks that the pointercancel (and if needed lostpointercapture) is dispatched when drag starts. + <ol> + <li>Press down on the black square.</li> + <li>Move your pointer to purple square and release.</li> + <li>Repeat the first two steps.</li> + <li>Repeat the first two steps once again.</li> + <li>Repeat the first two steps once again.</li> + </ol> + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div draggable="true" id="target0"></div> + <div id="target1"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/idlharness.window.js b/testing/web-platform/tests/pointerevents/idlharness.window.js new file mode 100644 index 0000000000..e6e84fa9c7 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/idlharness.window.js @@ -0,0 +1,21 @@ +// META: script=/resources/WebIDLParser.js +// META: script=/resources/idlharness.js +// META: timeout=long + +'use strict'; + +// https://w3c.github.io/pointerevents/ + +idl_test( + ['pointerevents'], + ['uievents', 'html', 'dom'], + idl_array => { + idl_array.add_objects({ + Document: ['document'], + Element: ['document.body'], + Window: ['window'], + Navigator: ['navigator'], + PointerEvent: ['new PointerEvent("type")'] + }); + } +); diff --git a/testing/web-platform/tests/pointerevents/inheritance.html b/testing/web-platform/tests/pointerevents/inheritance.html new file mode 100644 index 0000000000..0bf39bcb4d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/inheritance.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of touch-action</title> +<link rel="help" href="https://w3c.github.io/pointerevents/#the-touch-action-css-property"> +<meta name="assert" content="touch-action does not inherit."> +<meta name="assert" content="touch-action initial value is auto."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_not_inherited('touch-action', 'auto', 'none'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/pointerevents/mouse-pointer-boundary-events-for-shadowdom.html b/testing/web-platform/tests/pointerevents/mouse-pointer-boundary-events-for-shadowdom.html new file mode 100644 index 0000000000..ea200d6c96 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/mouse-pointer-boundary-events-for-shadowdom.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<meta name="viewport" content="width=device-width"> +<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> + +<h1>PointerEvent: Verifies that mouse boundary events don't point to shadow-dom</h1> + +<input id="target" style="margin: 20px"> + +<script> +function name(node) { + return node? node.tagName : "(null)"; +} + +promise_test(async () => { + var targetEvents = ["mouseout", "pointerout", "mouseover", "pointerover"]; + var receivedEvents = []; + var moveReceived = false; + + + targetEvents.forEach(function(eventName) { + window.addEventListener(eventName, function(e) { + var eventDetails = e.type + + " target=" + name(e.target) + + " relatedTarget=" + name(e.relatedTarget); + receivedEvents.push(eventDetails); + }); + }); + window.addEventListener('pointermove', () => { moveReceived = true; }); + var rect = document.getElementById("target").getBoundingClientRect(); + + await new test_driver.Actions() + .addPointer("default-mouse") + .pointerMove(Math.ceil(rect.left - 10), Math.ceil(rect.top - 10)) + .send() + await resolveWhen(() => { return moveReceived == true }); + receivedEvents = []; + moveReceived = false; + + await new test_driver.Actions() + .addPointer("default-mouse") + .pointerMove(Math.ceil(rect.left + 10), Math.ceil(rect.top + 10)) + .send() + await resolveWhen(() => { return moveReceived == true }); + + assert_array_equals(receivedEvents, [ + "pointerout target=BODY relatedTarget=INPUT", + "pointerover target=INPUT relatedTarget=BODY", + "mouseout target=BODY relatedTarget=INPUT", + "mouseover target=INPUT relatedTarget=BODY", + ], "Moved into <input>"); + + + receivedEvents = []; + moveReceived = false; + + await new test_driver.Actions() + .addPointer("default-mouse") + .pointerMove(Math.ceil(rect.left - 10), Math.ceil(rect.top - 10)) + .send() + await resolveWhen(() => { return moveReceived == true }); + + assert_array_equals(receivedEvents, [ + "pointerout target=INPUT relatedTarget=BODY", + "pointerover target=BODY relatedTarget=INPUT", + "mouseout target=INPUT relatedTarget=BODY", + "mouseover target=BODY relatedTarget=INPUT", + ], "Moved out of <input>"); +}, "PointerEvent: Verifies that mouse boundary events don't point to shadow-dom"); +</script> diff --git a/testing/web-platform/tests/pointerevents/parsing/touch-action-computed.html b/testing/web-platform/tests/pointerevents/parsing/touch-action-computed.html new file mode 100644 index 0000000000..59255bec45 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/parsing/touch-action-computed.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Pointer Events: getComputedStyle().touchAction</title> +<link rel="help" href="https://w3c.github.io/pointerevents/#the-touch-action-css-property"> +<meta name="assert" content="touch-action computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("touch-action", "auto"); +test_computed_value("touch-action", "none"); +test_computed_value("touch-action", "manipulation"); + +test_computed_value("touch-action", "pan-x"); +test_computed_value("touch-action", "pan-y"); +test_computed_value("touch-action", "pan-x pan-y"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/pointerevents/parsing/touch-action-invalid.html b/testing/web-platform/tests/pointerevents/parsing/touch-action-invalid.html new file mode 100644 index 0000000000..979dc252d3 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/parsing/touch-action-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<title>Pointer Events: parsing touch-action with invalid values</title> +<link rel="help" href="https://w3c.github.io/pointerevents/#the-touch-action-css-property"> +<meta name="assert" content="touch-action supports only the grammar 'auto | none | [ pan-x || pan-y ] | manipulation'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("touch-action", "auto none"); +test_invalid_value("touch-action", "manipulation pan-x"); +test_invalid_value("touch-action", "pan-y pan-x pan-y"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/pointerevents/parsing/touch-action-valid.html b/testing/web-platform/tests/pointerevents/parsing/touch-action-valid.html new file mode 100644 index 0000000000..9bb5d023ed --- /dev/null +++ b/testing/web-platform/tests/pointerevents/parsing/touch-action-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<title>Pointer Events: parsing touch-action with valid values</title> +<link rel="help" href="https://w3c.github.io/pointerevents/#the-touch-action-css-property"> +<meta name="assert" content="touch-action supports the full grammar 'auto | none | [ pan-x || pan-y ] | manipulation'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("touch-action", "auto"); +test_valid_value("touch-action", "none"); +test_valid_value("touch-action", "manipulation"); + +// [ pan-x || pan-y ] +test_valid_value("touch-action", "pan-x"); +test_valid_value("touch-action", "pan-y"); +test_valid_value("touch-action", "pan-y pan-x", "pan-x pan-y"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_after_target_removed.html b/testing/web-platform/tests/pointerevents/pointerevent_after_target_removed.html new file mode 100644 index 0000000000..e426f4db6c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_after_target_removed.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<title>Enter/leave events fired to parent after child is removed</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?touch"> +<meta name="variant" content="?pen"> +<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 src="pointerevent_support.js"></script> + +<style> + div.target { + width: 100px; + height: 50px; + } +</style> +<div class="target" id="parent"> + <div class="target" id="child">child</div> +</div> +<div id="done">done</div> + +<script> + 'use strict'; + const pointer_type = location.search.substring(1); + + const parent = document.getElementById("parent"); + const child = document.getElementById("child"); + const done = document.getElementById("done"); + + let event_log = []; + let logged_event_prefix = ""; + + function logEvent(e) { + if (e.type.startsWith(logged_event_prefix) && e.eventPhase == e.AT_TARGET) + event_log.push(e.type); + } + + function setup() { + const logged_events = [ + "pointerover", "pointerout", "pointerenter", "pointerleave", + "mouseover", "mouseout", "mouseenter", "mouseleave" + ]; + logged_events.forEach(ename => parent.addEventListener(ename, logEvent)); + } + + function addPromiseTest(remover_event, tested_event_prefix) { + const test_name = `${tested_event_prefix} events from ${pointer_type} `+ + `at parent after child is removed at ${remover_event}`; + const expected_events = ["enter", "over", "out", "leave"] + .map(suffix => tested_event_prefix + suffix); + + promise_test(async () => { + event_log = []; + logged_event_prefix = tested_event_prefix; + + // Bring the child back if it was removed in the previous promise_test. + if (!child.parentElement) + parent.appendChild(child); + + child.addEventListener(remover_event, + () => parent.removeChild(child), + { once:true }); + + let done_click_promise = getEvent("click", done); + + let actions = new test_driver.Actions() + .addPointer("TestPointer", pointer_type) + .pointerMove(0, 0, {origin: parent}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: done}) + .pointerDown() + .pointerUp(); + + await actions.send(); + await done_click_promise; + + assert_equals(event_log.toString(), expected_events.toString(), + "received events"); + }, test_name); + } + + setup(); + addPromiseTest("pointerdown", "pointer"); + addPromiseTest("pointerdown", "mouse"); + addPromiseTest("pointerup", "pointer"); + addPromiseTest("pointerup", "mouse"); +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_pointers.html b/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_pointers.html new file mode 100644 index 0000000000..c8443d99ff --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_pointers.html @@ -0,0 +1,158 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events properties tests</title> + <meta name="viewport" content="width=device-width"> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?pen"> + <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 input_pointertype = location.search.substring(1); + var detected_pointertypes = {}; + var detected_eventTypes = {}; + var eventList = ['pointerover', 'pointerenter', 'pointermove', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave']; + var expectedPointerId = NaN; + + function resetTestState() { + detected_eventTypes = {}; + document.getElementById("square1").style.visibility = 'visible'; + document.getElementById('innerFrame').contentDocument.getElementById("square2").style.visibility = 'hidden'; + expectedPointerId = NaN; + } + function checkPointerEventAttributes(event, targetBoundingClientRect, testNamePrefix) { + if (detected_eventTypes[event.type]) + return; + var expectedEventType = eventList[Object.keys(detected_eventTypes).length]; + detected_eventTypes[event.type] = true; + var pointerTestName = (testNamePrefix ? testNamePrefix + ' ' : '') + + expectedPointerType + ' ' + expectedEventType; + + detected_pointertypes[event.pointerType] = true; + + test(function() { + assert_equals(event.type, expectedEventType); + }, pointerTestName + ".type should be " + expectedEventType); + + // Test button and buttons + if (event.type == 'pointerdown') { + test(function() { + assert_equals(event.button, 0); + }, pointerTestName + ".button attribute is 0 when left mouse button is pressed."); + test(function() { + assert_equals(event.buttons, 1); + }, pointerTestName + ".buttons attribute is 1 when left mouse button is pressed."); + } else if (event.type == 'pointerup') { + test(function() { + assert_equals(event.button, 0); + }, pointerTestName + ".button attribute is 0 when left mouse button is just released."); + test(function() { + assert_equals(event.buttons, 0); + }, pointerTestName + ".buttons attribute is 0 when left mouse button is just released."); + } else { + test(function() { + assert_equals(event.button, -1); + }, pointerTestName + ".button is -1 when mouse buttons are in released state."); + test(function() { + assert_equals(event.buttons, 0); + }, pointerTestName + ".buttons is 0 when mouse buttons are in released state."); + } + + // Test clientX and clientY + if (event.type != 'pointerout' && event.type != 'pointerleave' ) { + test(function () { + assert_greater_than_equal(event.clientX, targetBoundingClientRect.left, "clientX should be greater or equal than left of the box"); + assert_greater_than_equal(event.clientY, targetBoundingClientRect.top, "clientY should be greater or equal than top of the box"); + assert_less_than_equal(event.clientX, targetBoundingClientRect.right, "clientX should be less or equal than right of the box"); + assert_less_than_equal(event.clientY, targetBoundingClientRect.bottom, "clientY should be less or equal than bottom of the box"); + }, pointerTestName + ".clientX and .clientY attributes are correct."); + } else { + test(function () { + assert_true(event.clientX < targetBoundingClientRect.left || event.clientX >= targetBoundingClientRect.right || event.clientY < targetBoundingClientRect.top || event.clientY >= targetBoundingClientRect.bottom); + }, pointerTestName + ".clientX and .clientY attributes are correct."); + } + + check_PointerEvent(event, testNamePrefix); + + // Test isPrimary + test(function () { + assert_equals(event.isPrimary, true); + }, pointerTestName + ".isPrimary attribute is true."); + + // Test pointerId value + if (isNaN(expectedPointerId)) { + expectedPointerId = event.pointerId; + } else { + test(function () { + assert_equals(event.pointerId, expectedPointerId); + }, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer."); + } + } + + async function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", [input_pointertype]); + var square1 = document.getElementById("square1"); + var rectSquare1 = square1.getBoundingClientRect(); + var innerFrame = document.getElementById('innerFrame'); + var square2 = innerFrame.contentDocument.getElementById('square2'); + var rectSquare2 = square2.getBoundingClientRect(); + + eventList.forEach(function(eventName) { + on_event(square1, eventName, function (event) { + if (square1.style.visibility == 'hidden') + return; + checkPointerEventAttributes(event, rectSquare1, ""); + if (Object.keys(detected_eventTypes).length == eventList.length) { + square1.style.visibility = 'hidden'; + detected_eventTypes = {}; + square2.style.visibility = 'visible'; + expectedPointerId = NaN; + } + }); + on_event(square2, eventName, function (event) { + checkPointerEventAttributes(event, rectSquare2, "Inner frame "); + if (Object.keys(detected_eventTypes).length == eventList.length) { + square2.style.visibility = 'hidden'; + test_pointerEvent.done(); + } + }); + }); + + // Inject mouse or pen inputs. + await clickInTarget(input_pointertype, square1); + await moveToDocument(input_pointertype); + await clickInTarget(input_pointertype, square2); + await moveToDocument(input_pointertype); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events hoverable pointer attributes test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks the properties of hoverable pointer events. If you are using hoverable pen don't leave the range of digitizer while doing the instructions. + <ol> + <li>Move your pointer over the black square and click on it.</li> + <li>Then move it off the black square so that it disappears.</li> + <li>When red square appears move your pointer over the red square and click on it.</li> + <li>Then move it off the red square.</li> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="square1" class="square"></div> + <iframe id="innerFrame" src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"></iframe> + <div class="spacer"></div> + <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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_rightbutton.html b/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_rightbutton.html new file mode 100644 index 0000000000..9a449ed753 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_rightbutton.html @@ -0,0 +1,168 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events properties tests</title> + <meta name="viewport" content="width=device-width"> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?pen"> + <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 input_pointertype = location.search.substring(1); + var detected_eventTypes = {}; + var eventList = [ + 'pointerover', 'pointerenter', 'pointermove', 'pointerdown', + 'pointerup', 'pointerout', 'pointerleave' + ]; + var expectedPointerId = NaN; + + function resetTestState() { + detected_eventTypes = {}; + document.getElementById("square1").style.visibility = 'visible'; + document.getElementById('innerFrame').contentDocument + .getElementById("square2").style.visibility = 'hidden'; + expectedPointerId = NaN; + } + function checkPointerEventAttributes( + event, targetBoundingClientRect, testNamePrefix) { + if (detected_eventTypes[event.type]) + return; + var expectedEventType = + eventList[Object.keys(detected_eventTypes).length]; + detected_eventTypes[event.type] = true; + var pointerTestName = (testNamePrefix ? testNamePrefix + ' ' : '') + + expectedPointerType + ' ' + expectedEventType; + + test(function() { + assert_equals(event.type, expectedEventType); + }, pointerTestName + "'s type should be " + expectedEventType); + + // Test button and buttons + if (event.type == 'pointerdown') { + test(function() { + assert_equals(event.button, 2); + }, pointerTestName + "'s button attribute is 2 when right mouse " + + "button is pressed."); + test(function() { + assert_equals(event.buttons, 2); + }, pointerTestName + "'s buttons attribute is 2 when right mouse " + + "button is pressed."); + } else if (event.type == 'pointerup') { + test(function() { + assert_equals(event.button, 2); + }, pointerTestName + "'s button attribute is 0 when right mouse " + + "button is just released."); + test(function() { + assert_equals(event.buttons, 0); + }, pointerTestName + "'s buttons attribute is 0 when right mouse " + + "button is just released."); + } else { + test(function() { + assert_equals(event.button, -1); + }, pointerTestName + "'s button is -1 when mouse buttons are in " + + "released state."); + test(function() { + assert_equals(event.buttons, 0); + }, pointerTestName + "'s buttons is 0 when mouse buttons are in " + + "released state."); + } + + // Test clientX and clientY + if (event.type != 'pointerout' && event.type != 'pointerleave' ) { + test(function () { + assert_greater_than_equal( + event.clientX, targetBoundingClientRect.left, + "clientX should be greater or equal than left of the box"); + assert_greater_than_equal( + event.clientY, targetBoundingClientRect.top, + "clientY should be greater or equal than top of the box"); + assert_less_than_equal( + event.clientX, targetBoundingClientRect.right, + "clientX should be less or equal than right of the box"); + assert_less_than_equal( + event.clientY, targetBoundingClientRect.bottom, + "clientY should be less or equal than bottom of the box"); + }, pointerTestName + "'s ClientX and ClientY attributes are correct."); + } else { + test(function () { + assert_true( + event.clientX < targetBoundingClientRect.left + || event.clientX >= targetBoundingClientRect.right + || event.clientY < targetBoundingClientRect.top + || event.clientY >= targetBoundingClientRect.bottom, + "ClientX/Y should be out of the boundaries of the box"); + }, pointerTestName + "'s ClientX and ClientY attributes are correct."); + } + + check_PointerEvent(event, testNamePrefix); + + // Test isPrimary + test(function () { + assert_equals(event.isPrimary, true); + }, pointerTestName + ".isPrimary attribute is correct."); + + // Test pointerId value + if (isNaN(expectedPointerId)) { + expectedPointerId = event.pointerId; + } else { + test(function () { + assert_equals(event.pointerId, expectedPointerId); + }, pointerTestName + ".pointerId should be the same as previous " + + "pointer events for this active pointer."); + } + } + + async function run() { + var test_pointerEvent = setup_pointerevent_test( + "pointerevent attributes", [input_pointertype]); + var square1 = document.getElementById("square1"); + var rectSquare1 = square1.getBoundingClientRect(); + var innerFrame = document.getElementById('innerFrame'); + var square2 = innerFrame.contentDocument.getElementById('square2'); + var rectSquare2 = square2.getBoundingClientRect(); + var actions_promise; + + eventList.forEach(function(eventName) { + on_event(square1, eventName, function (event) { + if (square1.style.visibility == 'hidden') + return; + checkPointerEventAttributes(event, rectSquare1, ""); + if (Object.keys(detected_eventTypes).length == eventList.length) { + square1.style.visibility = 'hidden'; + detected_eventTypes = {}; + square2.style.visibility = 'visible'; + expectedPointerId = NaN; + } + }); + on_event(square2, eventName, function (event) { + checkPointerEventAttributes(event, rectSquare2, "Inner frame"); + if (Object.keys(detected_eventTypes).length == eventList.length) { + square2.style.visibility = 'hidden'; + test_pointerEvent.done(); + } + }); + }); + + // Inject mouse or pen inputs. + await rightClickInTarget(input_pointertype, square1); + await moveToDocument(input_pointertype); + await rightClickInTarget(input_pointertype, square2); + await moveToDocument(input_pointertype); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events hoverable pointer attributes test</h1> + <h2 id="pointerTypeDescription"></h2> + <div id="square1" class="square"></div> + <iframe id="innerFrame" + src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"> + </iframe> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_attributes_nohover_pointers.html b/testing/web-platform/tests/pointerevents/pointerevent_attributes_nohover_pointers.html new file mode 100644 index 0000000000..d501ae0afd --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_attributes_nohover_pointers.html @@ -0,0 +1,134 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events properties 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 detected_pointertypes = {}; + var detected_eventTypes = {}; + var eventList = ['pointerover', 'pointerenter', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave']; + // TODO(mustaq@chromium.org): missing touch pointermove coverage! + var expectedPointerId = NaN; + + function resetTestState() { + detected_eventTypes = {}; + document.getElementById("square1").style.visibility = 'visible'; + document.getElementById('innerFrame').contentDocument.getElementById("square2").style.visibility = 'hidden'; + } + function checkPointerEventAttributes(event, targetBoundingClientRect, testNamePrefix) { + if (detected_eventTypes[event.type]) + return; + var expectedEventType = eventList[Object.keys(detected_eventTypes).length]; + detected_eventTypes[event.type] = true; + var pointerTestName = (testNamePrefix ? testNamePrefix + ' ' : '') + + expectedPointerType + ' ' + expectedEventType; + + detected_pointertypes[event.pointerType] = true; + + test(function() { + assert_equals(event.type, expectedEventType); + }, pointerTestName + ".type should be " + expectedEventType); + + // Test button and buttons + test(function() { + assert_equals(event.button, 0); + }, pointerTestName + ".button attribute is 0 on touch-down."); + + if (event.type == 'pointerdown' || event.type == 'pointerover' || event.type == 'pointerenter') { + test(function() { + assert_equals(event.buttons, 1); + }, pointerTestName + ".buttons attribute is 1 on touch-down."); + } else { + test(function() { + assert_equals(event.buttons, 0); + }, pointerTestName + ".buttons is 0 on touch-release."); + } + + // Test clientX and clientY + test(function () { + assert_true(event.clientX >= targetBoundingClientRect.left && event.clientX < targetBoundingClientRect.right && event.clientY >= targetBoundingClientRect.top && event.clientY < targetBoundingClientRect.bottom); + }, pointerTestName + ".clientX and .clientY attributes are correct."); + + check_PointerEvent(event, testNamePrefix); + + // Test isPrimary + test(function () { + assert_equals(event.isPrimary, true); + }, pointerTestName + ".isPrimary attribute is true."); + + // Test pointerId value + if (isNaN(expectedPointerId)) { + expectedPointerId = event.pointerId; + } else { + test(function () { + assert_equals(event.pointerId, expectedPointerId); + }, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer."); + } + } + + async function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", ['touch']); + var square1 = document.getElementById("square1"); + var rectSquare1 = square1.getBoundingClientRect(); + var innerFrame = document.getElementById('innerFrame'); + var square2 = innerFrame.contentDocument.getElementById('square2'); + var rectSquare2 = square2.getBoundingClientRect(); + + eventList.forEach(function(eventName) { + on_event(square1, eventName, function (event) { + if (square1.style.visibility == 'hidden') + return; + checkPointerEventAttributes(event, rectSquare1, ""); + if (Object.keys(detected_eventTypes).length == eventList.length) { + square1.style.visibility = 'hidden'; + detected_eventTypes = {}; + square2.style.visibility = 'visible'; + expectedPointerId = NaN; + } + }); + on_event(square2, eventName, function (event) { + checkPointerEventAttributes(event, rectSquare2, "Inner frame "); + if (Object.keys(detected_eventTypes).length == eventList.length) { + square2.style.visibility = 'hidden'; + test_pointerEvent.done(); + } + }); + }); + + // Inject touch inputs. + await clickInTarget("touch", square1); + await clickInTarget("touch", square2); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events no-hover pointer attributes test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks the properties of pointer events that do not support hover. + <ol> + <li>Tap the black square.</li> + <li>Then move it off the black square so that it disappears.</li> + <li>When the red square appears tap on that as well.</li> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="square1" class="square"></div> + <iframe id="innerFrame" src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"></iframe> + <div class="spacer"></div> + <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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_auxclick_is_a_pointerevent.html b/testing/web-platform/tests/pointerevents/pointerevent_auxclick_is_a_pointerevent.html new file mode 100644 index 0000000000..5ec1bab164 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_auxclick_is_a_pointerevent.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<title>auxclick is a PointerEvent</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?pen"> +<link rel="help" href="https://github.com/w3c/pointerevents/pull/317"> +<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 src="pointerevent_support.js"></script> + +<input id="target" style="margin: 20px"> + +<script> +'use strict'; +let target = document.getElementById("target"); +let pointerId = 0; +let pointerType = ""; +let inputSource = location.search.substring(1); + +target.addEventListener("pointerdown", (e)=>{ + pointerId = e.pointerId; + pointerType = e.pointerType; +}); + +function testFunction(test){ + return test.step_func(e=>{ + assert_equals(e.constructor, window.PointerEvent, + "auxclick should use a PointerEvent constructor"); + assert_true(e instanceof PointerEvent, + "auxclick should be a PointerEvent"); + assert_equals(e.pointerId, pointerId, + "auxclick's pointerId should match the pointerId of the pointer event that triggers it"); + assert_equals(e.pointerType, pointerType, + "auxclick's pointerType should match the pointerType of the pointer event that triggers it"); + assert_equals(e.composed, true, "auxclick.composed should be true"); + }); +} + +function run_test(pointerType){ + promise_test((test) => new Promise((resolve, reject) => { + const testPointer = pointerType + "TestPointer"; + let auxclickFunc = testFunction(test); + test.add_cleanup(() => { + target.removeEventListener("auxclick", auxclickFunc); + pointerId = 0; + pointerType = ""; + }); + let pointerDownPrevented = preventDefaultPointerdownOnce(target); + target.addEventListener("auxclick", auxclickFunc); + let eventWatcher = new EventWatcher(test, target, ["auxclick"]); + let actions = new test_driver.Actions(); + actions = actions + .addPointer(testPointer, pointerType) + .pointerMove(0,0, {origin:target, sourceName:testPointer}) + .pointerDown({button:actions.ButtonType.MIDDLE, sourceName:testPointer}) + .pointerUp({button:actions.ButtonType.MIDDLE, sourceName:testPointer}); + Promise.all([ + pointerDownPrevented, + eventWatcher.wait_for("auxclick"), + actions.send() + ]).then(()=>resolve()); + }), "auxclick using " + pointerType + " is a PointerEvent"); +} + +run_test(inputSource); +// TODO(crbug.com/1150441): Add test for auxclick from touch. Note: Calling +// run_test("touch") here times out. +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_boundary_events_at_implicit_release_hoverable_pointers.html b/testing/web-platform/tests/pointerevents/pointerevent_boundary_events_at_implicit_release_hoverable_pointers.html new file mode 100644 index 0000000000..066f3a7ea8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_boundary_events_at_implicit_release_hoverable_pointers.html @@ -0,0 +1,95 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Boundary event sequence at implicit capture release</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When a captured pointer is implicitly released after a click, the boundary events should follow the lostpointercapture event."/> + <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 detected_pointertypes = {}; + var event_log = []; + var start_logging = false; + + function resetTestState() { + detected_eventTypes = {}; + event_log = []; + start_logging = false; + } + + function run() { + var test_pointer_event = setup_pointerevent_test("Event sequence at implicit release on click", ["mouse"]); + var actions_promise; + + var target = document.getElementById("target"); + var capture_target = document.getElementById("capture-target"); + + All_Pointer_Events.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + + if (event.type == "pointerdown") { + capture_target.setPointerCapture(event.pointerId); + start_logging = true; + } else if (start_logging) { + event_log.push(event.type + '@' + event.target.id); + } + }); + + on_event(capture_target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + event_log.push(event.type + '@' + event.target.id); + if (event.type == 'lostpointercapture') { + step_timeout(function() { + test_pointer_event.step(function () { + var expected_events = "pointerup, lostpointercapture, pointerout, pointerleave"; + assert_equals(event_log.join(", "), "pointerout@target, pointerleave@target, pointerover@capture-target, pointerenter@capture-target, gotpointercapture@capture-target, pointerup@capture-target, lostpointercapture@capture-target, pointerout@capture-target, pointerleave@capture-target, pointerover@target, pointerenter@target"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointer_event.done(); + }); + }, 200); + } + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerUp() + .send(); + } + </script> + <style> + #target { + margin: 20px; + background-color: black; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Boundary event sequence at implicit capture release</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + When a captured pointer is implicitly released after a click, the boundary events should follow the lostpointercapture event. + </h4> + <ol> + <li>Click on the black box with mouse and do not move the mouse after or during the click.</li> + </ol> + <div id="capture-target"></div> + <div id="target"></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_boundary_events_in_capturing.html b/testing/web-platform/tests/pointerevents/pointerevent_boundary_events_in_capturing.html new file mode 100644 index 0000000000..b3a3fe7fe1 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_boundary_events_in_capturing.html @@ -0,0 +1,98 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events boundary events in capturing tests</title> + <meta name="viewport" content="width=device-width"> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?touch"> + <meta name="variant" content="?pen"> + <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 src="pointerevent_support.js"></script> + </head> + <body> + <h1>Pointer Events boundary events in capturing</h1> + <h2 id="pointerTypeDescription"></h2> + <h4 id="desc"> + This automated test checks the boundary events of pointer events while the capturing + changes. This test cannot be run manually. + </h4> + <div id="target0" class="touchActionNone"></div> + <div id="capturer">Do not hover over or touch this element.</div> + <div id="log"></div> + </body> + <script> + let input_source = location.search.substring(1); + + let events_received = []; + let log_events = false; + + // The events are handled as follows: + // - When "target0" receives a "pointerdown", the pointer is captured to "capturer" and event + // logging starts. + // - During event logging, all boundary events and "got/lostpointercapture" events to both + // "target0" and "capturer" are logged. + // - The first "pointermove" at "capturer" releases the pointer capture, so that subsequent + // "pointermove"/"pointerup" events go to "target0". + // - Event logging ends when "target0" receives a "pointerup". + + function logEvent(event, element) { + if (log_events) + events_received.push(event.type + "@" + element.id); + } + + let target0 = document.getElementById("target0"); + let capturer = document.getElementById("capturer"); + + target0.addEventListener("pointerdown", event => { + capturer.setPointerCapture(event.pointerId); + }); + + capturer.addEventListener("pointermove", event => { + if (capturer.hasPointerCapture(event.pointerId)) + capturer.releasePointerCapture(event.pointerId); + }); + + let other_event_types = [ "pointercancel", + "pointerover", "pointerout", "pointerenter", "pointerleave", + "gotpointercapture", "lostpointercapture" ]; + other_event_types.forEach(event_name => { + [target0, capturer].forEach(target => { + target.addEventListener(event_name, event => logEvent(event, target)); + }); + }); + + promise_test(async () => { + // Start logging events after the pointerdown in the drag. + getEvent("pointerdown", target0).then(() => { + log_events = true; + }); + + let pointerup_promise = getEvent("pointerup", target0); + pointerup_promise.then(() => { + log_events = false; + }); + + await pointerDragInTarget(input_source, target0, "right"); + + // Wait for all events in the drag to have been dispatched. + await pointerup_promise; + + const expected_events = [ + "pointerout@target0", "pointerleave@target0", + "pointerover@capturer", "pointerenter@capturer", + "gotpointercapture@capturer", + "lostpointercapture@capturer", + "pointerout@capturer", "pointerleave@capturer", + "pointerover@target0", "pointerenter@target0" + ]; + assert_array_equals(events_received, expected_events); + + updateDescriptionComplete(); + }, "Boundary events around pointer capture and release"); + </script> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_capture_mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_capture_mouse.html new file mode 100644 index 0000000000..61a933afd8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_capture_mouse.html @@ -0,0 +1,169 @@ +<!doctype html> +<html> + <head> + <title>Set/Release capture</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> + <h1>Pointer Events capture test</h1> + <h4> + Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions: + <ol> + <li> Move your mouse over the black rectangle. pointermove event should be logged in the black rectangle</li> + <li> Move your mouse over the purple rectangle. pointerover event should be logged in the purple rectangle</li> + <li> Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged in the black rectangle</li> + <li> Move your mouse anywhere. pointermove should be logged in the black rectangle</li> + <li> Move your mouse over the purple rectangle. Nothig should happen</li> + <li> Move your mouse over the black rectangle. pointermove should be logged in the black rectangle</li> + <li> Release left mouse button. "lostpointercapture" should be logged in the black rectangle</li> + </ol> + </h4> + Test passes if the proper behaviour of the events is observed. + <div id="target0"></div> + <br> + <div id="target1"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <script type='text/javascript'> + var isPointerCapture = false; + var pointermoveNoCaptureGot0 = false; + var pointermoveCaptureGot0 = false; + var pointermoveNoCaptureGot1 = false; + var ownEventForTheCapturedTargetGot = false; + var count=0; + var event_log = []; + var actions_promise1; + var actions_promise2; + var actions_promise3; + var actions_promise4; + + var detected_pointertypes = {}; + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var target0 = document.getElementById('target0'); + var target1 = document.getElementById('target1'); + var captureButton = document.getElementById('btnCapture'); + + var test_gotpointercapture = async_test("gotpointercapture event received"); + var test_lostpointercapture = async_test("lostpointercapture event received"); + + window.onload = function() { + on_event(captureButton, 'pointerdown', function(e) { + if(isPointerCapture == false) { + isPointerCapture = true; + sPointerCapture(e); + } + }); + + on_event(target0, 'gotpointercapture', function(e) { + actions_promise3.then( () => { + test_gotpointercapture.done(); + }); + event_log.push('gotpointercapture@target0'); + }); + + on_event(target0, 'lostpointercapture', function(e) { + actions_promise4.then( () => { + test_lostpointercapture.done(); + }); + isPointerCapture = false; + event_log.push('lostpointercapture@target0'); + }); + + run(); + } + + function run() { + var test_pointermove0 = async_test("pointerover event for black rectangle received") + var test_pointermove1 = async_test("pointerover event for purple rectangle received") + + on_event(target0, "pointermove", function (event) { + detected_pointertypes[ event.pointerType ] = true; + if(!pointermoveNoCaptureGot0) { + actions_promise2 = actions_promise1.then( () => { + test_pointermove0.done(); + event_log.push('pointermove@target0'); + pointermoveNoCaptureGot0 = true; + // Second dispatch a pointer move to target1. + return new test_driver.Actions().pointerMove(0, 0, {origin: target1}).send(); + }); + } + if(isPointerCapture) { + if(!pointermoveCaptureGot0) { + test(function() { + assert_equals(event.relatedTarget, null, "relatedTarget is null when the capture is set") + }, "relatedTarget is null when the capture is set. relatedTarget is " + event.relatedTarget); + test(function() { + assert_true((event.clientX < target0.getBoundingClientRect().left)|| + (event.clientX > target0.getBoundingClientRect().right)|| + (event.clientY < target0.getBoundingClientRect().top)|| + (event.clientY > target0.getBoundingClientRect().bottom), + "pointermove received for captured element while out of it") + }, "pointermove received for captured element while out of it"); + event_log.push('pointermove@target0'); + pointermoveCaptureGot0 = true; + // Fourth dispatch a pointer move to target0. + actions_promise4 = actions_promise3.then( () => { + return new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send(); + }); + } + if((event.clientX > target0.getBoundingClientRect().left)&& + (event.clientX < target0.getBoundingClientRect().right)&& + (event.clientY > target0.getBoundingClientRect().top)&& + (event.clientY < target0.getBoundingClientRect().bottom)&& + !ownEventForTheCapturedTargetGot) { + test(function() { + assert_true(true, "pointermove received for captured element while inside of it"); + }, "pointermove received for captured element while inside of it"); + event_log.push('pointermove@target0'); + ownEventForTheCapturedTargetGot = true; + } + } + }); + + // First dispatch a pointer move to target0. + actions_promise1 = new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send(); + + on_event(target1, "pointermove", function (event) { + test(function() { + assert_false(isPointerCapture, "pointermove shouldn't trigger for this target when capture is enabled"); + }, "pointermove shouldn't trigger for the purple rectangle while the black rectangle has capture"); + + if(!pointermoveNoCaptureGot1) { + actions_promise3 = actions_promise2.then( () => { + test_pointermove1.done(); + event_log.push('pointermove@target1'); + pointermoveNoCaptureGot1 = true; + // Third, drag the mouse from btnCapture, target1 to target0. + return new test_driver.Actions() + .pointerMove(0, 0, {origin: btnCapture}) + .pointerDown() + .pointerMove(0, 0, {origin: target1}) + .pointerMove(0, 0, {origin: target0}) + .pointerUp() + .send(); + }); + } + }); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_capture_suppressing_mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_capture_suppressing_mouse.html new file mode 100644 index 0000000000..0d7756335d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_capture_suppressing_mouse.html @@ -0,0 +1,239 @@ +<!doctype html> +<html> + <head> + <title>Set/Release capture</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> + <div class="spacer"></div> + <div id="target0"></div> + <div class="spacer"></div> + <div id="target1"></div> + <div class="spacer"></div> + <input type="button" id="captureButton" value="Set Capture"> + </body> + <script type='text/javascript'> + window.onload = () => { + let eventLog = []; + let nextUncheckedEventIndex = 0; + const target0 = document.getElementById('target0'); + const target1 = document.getElementById('target1'); + const captureButton = document.getElementById('captureButton'); + + function eventLabel(target, eventName) { + return `${eventName}@${target.id}`; + } + + function recordEvent(target, eventName) { + eventLog.push(eventLabel(target, eventName)); + } + + // Ensure match to the next sequence of events in the event log. + function assert_next_events(target, expectedEventNames, message) { + for (let i = 0; i < expectedEventNames.length; i++) { + assert_true(nextUncheckedEventIndex < eventLog.length, + `${message}: empty event queue`); + const observed = eventLog[nextUncheckedEventIndex++]; + const expected = eventLabel(target, expectedEventNames[i]); + assert_equals(observed, expected,`${message}: Event mismatch`); + } + } + + // After validating the expected events, all entries in the event map + // must be false or we have recorded an unexpected event. + function assert_empty_event_queue(message) { + const uncheckedEvents = eventLog.length - nextUncheckedEventIndex; + assert_equals(uncheckedEvents, 0, + `${message}: Unexpected events ` + + `${eventLog.slice(-uncheckedEvents).join(", ")}`); + } + + // Adds listeners for all element-pointerevent combinations. Each listener + // records the event for validation. the pointerdown event on the button + // triggers an extra step of triggering pointer capture. + function addEventListeners(t) { + // Adds a single event that is removed at the conclusion of the test. + const addListener = (target, eventName, fn) => { + const callback = (e) => { + recordEvent(target, eventName); + // Additional event handling is optional. + if (fn) + fn(e); + }; + target.addEventListener(eventName, callback); + t.add_cleanup(() => { + target.removeEventListener(eventName, callback); + }); + }; + [target0, target1, captureButton].forEach(el => { + ['gotpointercapture', 'lostpointercapture', 'pointerenter', + 'pointerleave', 'pointermove', 'pointerout', + 'pointerover'].forEach(eventName => { + addListener(el, eventName); + }); + }); + addListener(captureButton, 'pointerdown', (e) => { + target0.setPointerCapture(e.pointerId); + }); + t.add_cleanup(() => { + eventLog = []; + nextUncheckedEventIndex = 0; + }); + } + + // Trigger and wait for a pointer move. The wait is to ensure there is + // no coalescence of pointer move events. + async function moveTo(x, y, target) { + const movePromise = getEvent('pointermove', target); + let actions = new test_driver.Actions() + .pointerMove(x, y, { origin: target }) + .send(); + await actions; + await movePromise; + } + + promise_test(async t => { + // Reset pointer position. + await moveTo(0, 0, document.body); + addEventListeners(t); + // Move to the first target. + await moveTo(0, 0, target0); + assert_next_events(target0,["pointerover", "pointerenter", "pointermove"], + 'Move to first target'); + assert_empty_event_queue('Check after first move'); + + // Move to the second taret. + await moveTo(0, 0, target1); + assert_next_events(target0, ['pointerout', 'pointerleave'], + 'Exit first target'); + assert_next_events(target1, + ["pointerover", "pointerenter", "pointermove"], + 'Move to second target'); + assert_empty_event_queue('Check after second move'); + + // Move to the capture button. + await moveTo(0, 0, captureButton); + assert_next_events(target1, ['pointerout', 'pointerleave'], + 'Exit second target'); + assert_next_events( + captureButton, ["pointerover", "pointerenter", "pointermove"], + 'Move to button'); + assert_empty_event_queue('Check after third move'); + }, 'Validate pointer events track pointer movement without pointer ' + + 'capture.'); + + async function runCaptureAndHoverTargetActionSequence(t, hoverTarget) { + const pointerUpPromise = getEvent('pointerup', document); + const actionsPromise = + new test_driver.Actions() + // Start outside capture button. + .pointerMove(0, 0) + .pointerDown() + .pointerUp() + // Move to the capture button + .pointerMove(0, 0, {origin: captureButton}) + // Trigger pointer capture + .pointerDown() + // Hover over the target element + .pointerMove(10, 0, {origin: hoverTarget}) + // Release capture + .pointerUp() + .send(); + await actionsPromise; + await pointerUpPromise; + } + + promise_test(async t => { + // Reset pointer position. + await moveTo(0, 0, document.body); + addEventListeners(t); + + // On entry for this sub-test, the pointer is at the document origin. + await runCaptureAndHoverTargetActionSequence(t, captureButton); + assert_next_events( + captureButton, + ['pointerover', 'pointerenter', 'pointermove'], + 'Move to button from origin'); + assert_next_events( + captureButton, + ['pointerdown', 'pointerout', 'pointerleave'], + 'Pointer down on button to trigger capture'); + assert_next_events( + target0, + ['pointerover', 'pointerenter', 'gotpointercapture', 'pointermove'], + 'Capture triggered while hovering over button'); + assert_next_events( + target0, + ['lostpointercapture', 'pointerout', 'pointerleave'], + 'Lose pointer capture while hovering over button'); + // Post pointer capture. + assert_next_events( + captureButton, + ['pointerover', 'pointerenter'], + 'Post capture while hovering over button'); + assert_empty_event_queue('Check after button hover'); + + // On entry for this sub-test, the pointer is over the button. + await runCaptureAndHoverTargetActionSequence(t, target0); + assert_next_events( + captureButton, + ['pointerout', 'pointerleave'], + 'Move from button to document origin'); + assert_next_events( + captureButton, + ['pointerover', 'pointerenter', 'pointermove'], + 'Move from document origin to button'); + assert_next_events( + captureButton, + [ 'pointerdown', 'pointerout', 'pointerleave'], + 'Pointer down on button to trigger capture'); + assert_next_events( + target0, + ['pointerover', 'pointerenter', 'gotpointercapture', 'pointermove'], + 'Capture triggered while hovering over capture target'); + assert_next_events( + target0, + ['lostpointercapture'], + 'Lose pointer capture while hovering over capture target'); + assert_empty_event_queue('Check after hover on capture target'); + + + // On entry for this sub-test, the pointer is over the capture target. + await runCaptureAndHoverTargetActionSequence(t, target1); + assert_next_events( + target0, + ['pointerout', 'pointerleave'], + 'Move from capture target to button'); + assert_next_events( + captureButton, + ['pointerover', 'pointerenter', 'pointermove'], + 'Move from capture target to button'); + assert_next_events( + captureButton, + [ 'pointerdown', 'pointerout', 'pointerleave'], + 'Pointer down on button to trigger capture'); + assert_next_events( + target0, + ['pointerover', 'pointerenter', 'gotpointercapture', 'pointermove'], + 'Capture triggered while hovering over non-capture target'); + assert_next_events( + target0, + ['lostpointercapture', 'pointerout', 'pointerleave'], + 'Lose pointer capture while hovering over non-capture target'); + assert_next_events( + target1, + ["pointerover", "pointerenter"], + 'Post capture while hovering over non-capture target'); + assert_empty_event_queue('Check after hover on non-capture target '); + }, 'Test pointer capture.'); + }; + </script> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_change-touch-action-onpointerdown_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_change-touch-action-onpointerdown_touch.html new file mode 100644 index 0000000000..40dbbed72f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_change-touch-action-onpointerdown_touch.html @@ -0,0 +1,147 @@ +<!doctype html> +<html> + <head> + <title>Change touch-action on pointerdown</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 src="pointerevent_support.js"></script> + <style> + #target0 { + background: black; + width: 700px; + height: 430px; + color: white; + overflow-y: auto; + overflow-x: auto; + white-space: nowrap; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4>Test Description: Press and hold your touch. Try to scroll text in any direction. + Then release your touch and try to scroll again. Expected: no panning. + </h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0" style="touch-action: auto;"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <script type='text/javascript'> + var detected_pointertypes = {}; + + var styleIsChanged = false; + var scrollIsReceived = false; + var scrollReceivedCorrectly = false; + var firstTouchCompleted = false; + var countToPass = 50; + var xScr0, yScr0, xScr1, yScr1; + + setup({ explicit_done: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + on_event(target0, 'scroll', function(event) { + if(!scrollIsReceived && firstTouchCompleted) { + test(function() { + failOnScroll(); + }, "scroll was received while shouldn't"); + scrollIsReceived = true; + } + scrollReceivedCorrectly = true; + }); + + on_event(target0, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + if(!styleIsChanged) { + var before = document.getElementById('target0').style.touchAction; + + document.getElementById('target0').style.touchAction = 'none'; + + var after = document.getElementById('target0').style.touchAction; + + test(function() { + assert_not_equals(before, after, "touch-action was changed"); + }, "touch-action was changed"); + + styleIsChanged = true; + } + }); + + on_event(target0, 'pointerup', function(event) { + firstTouchCompleted = true; + }); + + // Inject touch inputs and wait for all the actions finish to end the test. + touchScrollInTarget(target0, 'down').then(function() { + test(function () { + assert_true(scrollReceivedCorrectly, "scroll should be received before the test finishes"); + }, "scroll should be received before the test finishes"); + done(); + }); + } + </script> + <h1>touch-action: auto to none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html b/testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html new file mode 100644 index 0000000000..e7448c7a8b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html @@ -0,0 +1,138 @@ +<!doctype html> +<html> + <head> + <title>click event target during capture</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="pointerevent_support.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <style> + .box { + margin: 10px; + } + #grey { + background: grey; + } + #blue { + background: blue; + } + #green { + background: green; + } + </style> + <script type="text/javascript"> + PhaseEnum = { + Phase1: "phase1", + Phase2: "phase2", + Phase1WithCapturing: "phase1withcapturing", + Phase2WithCapturing: "phase2withcapturing", + } + var phase; + var receivedEvents; + + function resetTestState() { + phase = PhaseEnum.Phase1; + receivedEvents = []; + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("click target during capture", ['mouse']); + var grey = document.getElementById('grey'); + var blue = document.getElementById('blue'); + var green = document.getElementById('green'); + var actions_promise; + + ['gotpointercapture', 'lostpointercapture', 'pointerdown', 'pointerup', 'click'].forEach(function(eventName) { + [grey, blue, green].forEach(function(target) { + target.addEventListener(eventName, function(event) { + if (event.eventPhase == event.AT_TARGET) { + receivedEvents.push(event.type + '@' + target.id); + if (phase == PhaseEnum.Phase1 && target == green && event.type == 'click') { + test(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@green,pointerup@green,click@green', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }, "Click target when pointerup/down targeted at the same element with no capture"); + phase = PhaseEnum.Phase2; + receivedEvents = []; + } + if (phase == PhaseEnum.Phase2 && target == grey && event.type == 'click') { + test(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@blue,pointerup@green,click@grey', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }, "Click target when pointerup/down targeted at different elements with no capture"); + phase = PhaseEnum.Phase1WithCapturing; + receivedEvents = []; + } + if (target == blue && event.type == 'lostpointercapture') { + if (phase == PhaseEnum.Phase1WithCapturing) { + test_pointerEvent.step(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@green,gotpointercapture@blue,pointerup@blue,click@blue,lostpointercapture@blue', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }); + phase = PhaseEnum.Phase2WithCapturing; + receivedEvents = []; + } else if (phase == PhaseEnum.Phase2WithCapturing) { + test_pointerEvent.step(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@blue,gotpointercapture@blue,pointerup@blue,click@blue,lostpointercapture@blue', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + } + } + if (event.type == 'pointerdown' && (target == blue || target == green)) { + if (phase == PhaseEnum.Phase1WithCapturing || phase == PhaseEnum.Phase2WithCapturing) + blue.setPointerCapture(event.pointerId); + } + } + }); + }); + }); + + // Inject mouse inputs. + // + // TODO(mustaq@chromium.org): It is no longer testable manually. + // Switch it to a promise_test to simplify the code, and remove + // the instructions on HTML. + var actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: green}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: blue}) + .pointerDown() + .pointerMove(0, 0, {origin: green}) + .pointerUp() + .pointerMove(0, 0, {origin: green}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: blue}) + .pointerDown() + .pointerMove(0, 0, {origin: green}) + .pointerUp() + .send(); + + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: click event during capture</h1> + <h2 id="pointerTypeDescription"></h2> + <h4>Test Description: + Click event should be sent to the first common ancestor of the pointerdown and pointerup targets. + <ol> + <li>Click on the green box with the left button of mouse.</li> + <li>Press down the left button on the blue box and drag to the green box and release the button.</li> + <li>Repeat the two steps above once again.</li> + </ol> + </h4> + <br> + <div> + <div id="grey" class="box"> + <div id="green" class="box"></div> + <div id="blue" class="box"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_click_is_a_pointerevent.html b/testing/web-platform/tests/pointerevents/pointerevent_click_is_a_pointerevent.html new file mode 100644 index 0000000000..36b80b66f5 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_click_is_a_pointerevent.html @@ -0,0 +1,106 @@ +<!DOCTYPE HTML> +<title>click is a PointerEvent</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?pen"> +<meta name="variant" content="?touch"> +<link rel="help" href="https://github.com/w3c/pointerevents/pull/317"> +<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 src="pointerevent_support.js"></script> + +<input id="target" style="margin: 20px"> + +<iframe src="resources/minimal.html" height="20" width="20"></iframe> + +<script> +'use strict'; +const pointer_type = location.search.substring(1); +let subframe_loaded = getMessageData("subframe-loaded", frames[0]); + +function assert_click_construction(click_event, window_object) { + assert_equals(click_event.constructor, window_object.PointerEvent, + "click should use a PointerEvent constructor"); + assert_true(click_event instanceof window_object.PointerEvent, + "click should be a PointerEvent instance"); + assert_equals(click_event.composed, true, "click.composed should be true"); +} + +function assert_click_attributes(click_event, pointerdown_event, pointerup_event) { + assert_equals(click_event.pointerId, pointerdown_event.pointerId, + "click.pointerId should match the pointerId of the triggering pointerdown"); + assert_equals(click_event.pointerType, pointerdown_event.pointerType, + "click.pointerType should match the pointerType of the triggering pointerdown"); + + assert_equals(click_event.pointerId, pointerup_event.pointerId, + "click.pointerId should match the pointerId of the triggering pointerup"); + assert_equals(click_event.pointerType, pointerup_event.pointerType, + "click.pointerType should match the pointerType of the triggering pointerup"); +} + +promise_test(async () => { + const target = document.getElementById("target"); + + let pointerDownPrevented = preventDefaultPointerdownOnce(target); + + let pointerdown_promise = getEvent("pointerdown", target); + let pointerup_promise = getEvent("pointerup", target); + let click_promise = getEvent("click", target); + + await clickInTarget(pointer_type, target); + + await pointerDownPrevented; + let pointerdown_event = await pointerdown_promise; + let pointerup_event = await pointerup_promise; + let click_event = await click_promise; + + assert_click_construction(click_event, this); + assert_click_attributes(click_event, pointerdown_event, pointerup_event); + assert_not_equals(click_event.pointerId, -1, + "Click event triggered by a pointing device should not have -1 as the pointerId"); +}, "click using " + pointer_type + " is a PointerEvent"); + +promise_test(async () => { + await subframe_loaded; + + const target = frames[0]; + let pointerdown_promise = getEvent("pointerdown", target); + let pointerup_promise = getEvent("pointerup", target); + let click_promise = getEvent("click", target); + + await clickInTarget(pointer_type, frames[0].document.body); + + let pointerdown_event = await pointerdown_promise; + let pointerup_event = await pointerup_promise; + let click_event = await click_promise; + + assert_click_construction(click_event, frames[0]); + assert_click_attributes(click_event, pointerdown_event, pointerup_event); +}, "click in a subframe using " + pointer_type + " is a PointerEvent"); + +// Run this part of the test only once, since it doesn't rely on the pointer_type. +if (pointer_type == "mouse") { + promise_test(async () => { + const target = document.getElementById("target"); + let click_promise = getEvent("click", target); + target.click(); + let click_event = await click_promise; + assert_equals(click_event.pointerId, -1, + "Click event triggered by a non-pointing device should have -1 as the pointerId"); + + target.type = "button"; + target.focus(); + click_promise = getEvent("click", target); + // Press enter + let actions = new test_driver.Actions() + .keyDown("\uE007") + .keyUp("\uE007"); + await actions.send(); + click_event = await click_promise; + assert_equals(click_event.pointerId, -1, + "Click event triggered by a non-pointing device should have -1 as the pointerId"); + }, "Click event triggered by a non-pointing device should have -1 as the pointerId"); +} +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_click_is_a_pointerevent_multiple_clicks.html b/testing/web-platform/tests/pointerevents/pointerevent_click_is_a_pointerevent_multiple_clicks.html new file mode 100644 index 0000000000..fe18302ae4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_click_is_a_pointerevent_multiple_clicks.html @@ -0,0 +1,98 @@ +<!DOCTYPE HTML> +<title>click is a PointerEvent</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?pen"> +<meta name="variant" content="?touch"> +<link rel="help" href="https://github.com/w3c/pointerevents/pull/317"> +<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> + +<input id="target" style="margin: 20px"> + +<script> +'use strict'; +let target = document.getElementById("target"); +let pointerId_one = 0; +let pointerType_one = ""; +let pointerId_two = 0; +let pointerType_two = ""; +let pointerId_three = 0; +let pointerType_three = ""; +let inputSource = location.search.substring(1); +const phase_one = 1; +const phase_two = 2; +const phase_three = 3; +let pointerdown_phase = phase_one; +let click_phase = phase_one; + +target.addEventListener("pointerdown", (e)=>{ + if(pointerdown_phase === phase_one){ + pointerdown_phase = phase_two; + pointerId_one = e.pointerId; + pointerType_one = e.pointerType; + }else if(pointerdown_phase === phase_two){ + pointerdown_phase = phase_three; + pointerId_two = e.pointerId; + pointerType_two = e.pointerType; + }else if(pointerdown_phase === phase_three){ + pointerId_three = e.pointerId; + pointerType_three = e.pointerType; + } +}); + +function test_pointer(e, pointerId, pointerType, click_phase){ + assert_equals(e.constructor, window.PointerEvent, "click should use a PointerEvent constructor in phase " + click_phase); + assert_true(e instanceof PointerEvent, "click should be a PointerEvent in phase " + click_phase); + assert_equals(e.pointerId, pointerId, "click's pointerId should match the pointerId of the pointer event that triggers it in phase " + click_phase); + assert_equals(e.pointerType, pointerType, "click's pointerType should match the pointerType of the pointer event that triggers it in phase " + click_phase); +} + +function testFunction(test){ + return test.step_func(e=>{ + if(click_phase === phase_one){ + test_pointer(e, pointerId_one, pointerType_one, click_phase); + click_phase = phase_two; + }else if(click_phase === phase_two){ + test_pointer(e, pointerId_two, pointerType_two, click_phase); + click_phase = phase_three; + }else if(click_phase === phase_three) + test_pointer(e, pointerId_three, pointerType_three, click_phase); + }); +} + +function run_test(pointerType){ + promise_test((test) => new Promise((resolve, reject) => { + const testPointer = pointerType + "TestPointer"; + let clickFunc = testFunction(test); + test.add_cleanup(() => { + target.removeEventListener("click", clickFunc); + pointerId_one = 0; + pointerType_one = ""; + pointerId_two = 0; + pointerType_two = ""; + pointerId_three = 0; + pointerType_three = ""; + pointerdown_phase = phase_one; + click_phase = phase_one; + }); + target.addEventListener("click", clickFunc); + let eventWatcher = new EventWatcher(test, target, ["click"]); + let actions = new test_driver.Actions(); + actions = actions + .addPointer(testPointer, pointerType) + .pointerMove(0,0, {origin:target, sourceName:testPointer}) + .pointerDown({sourceName:testPointer}) + .pointerUp({sourceName:testPointer}) + .pointerDown({sourceName:testPointer}) + .pointerUp({sourceName:testPointer}) + .pointerDown({sourceName:testPointer}) + .pointerUp({sourceName:testPointer}); + Promise.all([eventWatcher.wait_for(["click", "click", "click"]), actions.send()]).then(()=>resolve()); + }), "click using " + pointerType + " is a PointerEvent"); +} + +run_test(inputSource); +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_constructor.html b/testing/web-platform/tests/pointerevents/pointerevent_constructor.html new file mode 100644 index 0000000000..3b278746e1 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_constructor.html @@ -0,0 +1,118 @@ +<!doctype html> +<html> + <head> + <title>PointerEvent: Constructor 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> + <!-- Additional helper script for common checks across event types --> + </head> + <body> + <h1>PointerEvent: Dispatch custom event</h1> + <h4>Test Description: This test checks if PointerEvent constructor works properly.</h4> + <div id="target0"></div> + <script> + async_test(function() { + var target0 = document.getElementById("target0"); + // set values for non-default constructor + on_event(target0, "pointermove", this.step_func(function(event) { + generate_tests(assert_equals, [ + ["getCoalescedEvents().length", event.getCoalescedEvents().length, 2], + ["getPredictedEvents().length", event.getPredictedEvents().length, 2], + ["event.target", event.target, target0], + ["event.currentTarget", event.currentTarget, target0], + ["event.eventPhase", event.eventPhase, Event.AT_TARGET], + ["event.clientX", event.clientX, 310], + ["event.pointerType", event.pointerType, "pen"], + ["getCoalescedEvents()[0].clientX", event.getCoalescedEvents()[0].clientX, 300], + ["getCoalescedEvents()[1].clientX", event.getCoalescedEvents()[1].clientX, 310], + ["getPredictedEvents()[0].clientX", event.getPredictedEvents()[0].clientX, 320], + ["getPredictedEvents()[1].clientX", event.getPredictedEvents()[1].clientX, 330], + ]); + for (var i=0; i<event.getCoalescedEvents().length; i++) { + var coalescedEvent = event.getCoalescedEvents()[i]; + generate_tests(assert_equals, [ + ["getCoalescedEvents()[" + i + "].pointerId", coalescedEvent.pointerId, event.pointerId], + ["getCoalescedEvents()[" + i + "].pointerType", coalescedEvent.pointerType, event.pointerType], + ["getCoalescedEvents()[" + i + "].isPrimary", coalescedEvent.isPrimary, event.isPrimary], + ["getCoalescedEvents()[" + i + "].getCoalescedEvents().length", coalescedEvent.getCoalescedEvents().length, 0], + ["getCoalescedEvents()[" + i + "].getPredictedEvents().length", coalescedEvent.getPredictedEvents().length, 0], + ["getCoalescedEvents()[" + i + "].target", coalescedEvent.target, null], + ["getCoalescedEvents()[" + i + "].currentTarget", coalescedEvent.currentTarget, null], + ["getCoalescedEvents()[" + i + "].eventPhase", coalescedEvent.eventPhase, Event.NONE], + ["getCoalescedEvents()[" + i + "].cancelable", coalescedEvent.cancelable, false], + ["getCoalescedEvents()[" + i + "].bubbles", coalescedEvent.bubbles, false], + ["getCoalescedEvents()[" + i + "].offsetX", coalescedEvent.offsetX, 310 + (i==0?-10:0)], + ["getCoalescedEvents()[" + i + "].offsetY", coalescedEvent.offsetY, 0], + ]); + } + for (var i=0; i<event.getPredictedEvents().length; i++) { + var predictedEvent = event.getPredictedEvents()[i]; + generate_tests(assert_equals, [ + ["getPredictedEvents()[" + i + "].pointerId", predictedEvent.pointerId, event.pointerId], + ["getPredictedEvents()[" + i + "].pointerType", predictedEvent.pointerType, event.pointerType], + ["getPredictedEvents()[" + i + "].isPrimary", predictedEvent.isPrimary, event.isPrimary], + ["getPredictedEvents()[" + i + "].getCoalescedEvents().length", predictedEvent.getCoalescedEvents().length, 0], + ["getPredictedEvents()[" + i + "].getPredictedEvents().length", predictedEvent.getPredictedEvents().length, 0], + ["getPredictedEvents()[" + i + "].target", predictedEvent.target, null], + ["getPredictedEvents()[" + i + "].currentTarget", predictedEvent.currentTarget, null], + ["getPredictedEvents()[" + i + "].eventPhase", predictedEvent.eventPhase, Event.NONE], + ["getPredictedEvents()[" + i + "].cancelable", predictedEvent.cancelable, false], + ["getPredictedEvents()[" + i + "].bubbles", predictedEvent.bubbles, false], + ["getPredictedEvents()[" + i + "].offsetX", predictedEvent.offsetX, 310 + (i==0?10:20)], + ["getPredictedEvents()[" + i + "].offsetY", predictedEvent.offsetY, 0], + ]); + } + })); + on_event(target0, "pointerout", this.step_func(function(event) { + generate_tests(assert_equals, [ + ["default event.pointerType", event.pointerType, ""], + ["default getCoalescedEvents().length", event.getCoalescedEvents().length, 0], + ["default getPredictedEvents().length", event.getPredictedEvents().length, 0], + ]); + })); + on_event(target0, "pointerup", this.step_func(function(event) { + generate_tests(assert_equals, [ + ["type event.pointerType", event.pointerType, "foo"], + ]); + })); + + on_event(window, "load", this.step_func_done(function() { + assert_not_equals(window.PointerEvent, undefined); + + var pointerEventInitDict = + { + pointerId: 42, + pointerType: "pen", + isPrimary: true, + clientX: 300, + }; + + var p1 = new PointerEvent("pointermove", pointerEventInitDict); + pointerEventInitDict.clientX += 10; + var p2 = new PointerEvent("pointermove", pointerEventInitDict); + pointerEventInitDict.clientX += 10; + var p3 = new PointerEvent("pointermove", pointerEventInitDict); + pointerEventInitDict.clientX += 10; + var p4 = new PointerEvent("pointermove", pointerEventInitDict); + pointerEventInitDict.coalescedEvents = [p1, p2]; + pointerEventInitDict.predictedEvents = [p3, p4]; + pointerEventInitDict.clientX = 310; + var event = new PointerEvent("pointermove", pointerEventInitDict); + target0.dispatchEvent(event); + + var pointerEventDefault = new PointerEvent("pointerout"); + target0.dispatchEvent(pointerEventDefault); + + var pointerEventType = new PointerEvent("pointerup", { pointerType: "foo" } ); + target0.dispatchEvent(pointerEventType); + }, "PointerEvent constructor")); + }) + </script> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_contextmenu_is_a_pointerevent.html b/testing/web-platform/tests/pointerevents/pointerevent_contextmenu_is_a_pointerevent.html new file mode 100644 index 0000000000..d951be542a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_contextmenu_is_a_pointerevent.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<title>contexmenu is a PointerEvent</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?touch"> +<link rel="help" href="https://github.com/w3c/pointerevents/pull/317"> +<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 src="pointerevent_support.js"></script> + +<input id="target" style="margin: 20px"> + +<script> +'use strict'; +let contextmenuTest = async_test("contextmenu is a PointerEvent"); +let target = document.getElementById("target"); +let pointerdownPointerId, pointerdownPointerType; +let inputSource = location.search.substring(1); + +target.addEventListener("contextmenu", contextmenuTest.step_func((e)=>{ + assert_equals(e.constructor, window.PointerEvent, + "contextmenu should use a PointerEvent constructor"); + assert_true(e instanceof PointerEvent, + "contextmenu should be a PointerEvent"); + assert_equals(e.pointerId, pointerdownPointerId, + "contextmenu's pointerId should match the pointerId of the pointer event that triggers it"); + assert_equals(e.pointerType, pointerdownPointerType, + "contextmenu's pointerType should match the pointerType of the pointer event that triggers it"); + assert_equals(e.composed, true, "contextmenu.composed should be true"); +})); +target.addEventListener("pointerdown", e=>{ + pointerdownPointerId = e.pointerId; + pointerdownPointerType = e.pointerType; +}); + +let pointerDownPrevented = preventDefaultPointerdownOnce(target); +let eventWatcher = new EventWatcher(contextmenuTest, target, ["contextmenu"]); +let actions = new test_driver.Actions(); +// TODO: We might be able to test "pen" just like "touch". +let testPointer = inputSource + "TestPointer"; +actions = actions.addPointer(testPointer, inputSource) + .pointerMove(0,0, {sourceName:testPointer, origin:target}) + .pointerDown({sourceName:testPointer, button:actions.ButtonType.RIGHT}) + .pause(inputSource === "touch" ? 1500 : 0, "pointer", {sourceName:testPointer}) + .pointerUp({sourceName:testPointer, button:actions.ButtonType.RIGHT}); +Promise.all([pointerDownPrevented, eventWatcher.wait_for("contextmenu"), actions.send()]).then(()=>contextmenuTest.done()); +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_disabled_form_control.html b/testing/web-platform/tests/pointerevents/pointerevent_disabled_form_control.html new file mode 100644 index 0000000000..d253111115 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_disabled_form_control.html @@ -0,0 +1,98 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events properties tests</title> + <meta name="viewport" content="width=device-width"> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?touch"> + <meta name="variant" content="?pen"> + <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 inputSource = location.search.substring(1); + var detected_pointertypes = {}; + var detected_eventTypes = {}; + var eventList = ['pointerout', 'pointerover', 'pointerenter', 'pointermove', 'pointerdown', 'gotpointercapture', 'pointerup', 'lostpointercapture', 'pointerleave']; + + function resetTestState() { + detected_eventTypes = {}; + } + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", [inputSource]); + var target = document.getElementById("target0"); + var actions_promise; + + eventList.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_eventTypes[event.type] = true; + detected_pointertypes[event.pointerType] = true; + + if (event.type === "pointerdown") { + target.setPointerCapture(event.pointerId); + } + + if (Object.keys(detected_eventTypes).length == eventList.length) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + } + }); + }); + on_event(target, "click", function (event) { + assert_unreached("click should not fire on disabled element"); + }); + + // Inject inputs. + switch (inputSource) { + case "touch": + actions_promise = pointerDragInTarget(inputSource, target, 'right'); + break; + case "mouse": + case "pen": + actions_promise = clickInTarget(inputSource, target).then(function() { + return new test_driver.Actions() + .addPointer(inputSource + "Pointer1", inputSource) + .pointerMove(0, 0, {origin: target}) + .pointerMove(0, 0) + .send(); + }); + break; + } + } + </script> + <style> + #target0 { + background: purple; + border: 1px solid orange; + touch-action: none; + width: 200px; + height: 100px; + } + </style> + </head> + <body onload="run()"> + <h1> Pointer Event: pointerevents fire to disabled form controls</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: + Pointerevents are dispatched to disabled form controls. + </h4> + <div id="instructions"> + Use the mouse or pen to press on the purple button. Or with touch, tap on the purple box. + </div> + <button id="target0" disabled>Disabled button</button> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture.html b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture.html new file mode 100644 index 0000000000..3db6acf8e5 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture.html @@ -0,0 +1,149 @@ +<!doctype html> +<html> + <head> + <title>Element.hasPointerCapture 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> + <script type="text/javascript" src="pointerevent_support.js"></script> + <script> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + var test_pointerEvent = async_test("hasPointerCapture"); + var listening_events = [ + "pointerover", + "pointerenter", + "pointerout", + "pointerleave", + "pointermove", + "gotpointercapture" + ]; + var set_capture_to_target0 = false; + + function run() { + var target0 = document.getElementById("target0"); + var target1 = document.getElementById("target1"); + var actions_promise; + + on_event(target0, "pointerdown", function (e) { + detected_pointertypes[e.pointerType] = true; + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), false, + "before target0.setPointerCapture, target0.hasPointerCapture should be false"); + }); + target1.setPointerCapture(e.pointerId); + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), false, + "after target1.setPointerCapture, target0.hasPointerCapture should be false"); + assert_equals(target1.hasPointerCapture(e.pointerId), true, + "after target1.setPointerCapture, target1.hasPointerCapture should be true"); + }); + target0.setPointerCapture(e.pointerId); + set_capture_to_target0 = true; + // hasPointerCapture will return true immediately after a call to setPointerCapture + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), true, + "after target0.setPointerCapture, target0.hasPointerCapture should be true"); + }); + // hasPointerCapture will return false immediately after a call to releasePointerCapture + target0.releasePointerCapture(e.pointerId); + set_capture_to_target0 = false; + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), false, + "after target0.releasePointerCapture, target0.hasPointerCapture should be false"); + assert_equals(target1.hasPointerCapture(e.pointerId), false, + "after target0.releasePointerCapture, target1.hasPointerCapture should be false"); + }); + target0.setPointerCapture(e.pointerId); + set_capture_to_target0 = true; + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), true, + "after target0.setPointerCapture, target0.hasPointerCapture should be true"); + }); + // If the element.hasPointerCapture is false element.releasePointerCapture does nothing + target1.releasePointerCapture(e.pointerId); + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), true, + "while target1.hasPointerCapture is false, target1.releasePointerCapture should not change hasPointerCapture"); + }); + }); + + for (var i = 0; i < listening_events.length; i++) { + on_event(target0, listening_events[i], function (e) { + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), set_capture_to_target0, + "Received " + e.type + " target0.hasPointerCapture should be " + set_capture_to_target0); + }); + }); + } + + on_event(target0, "pointerup", function (e) { + // Immediately after firing the pointerup or pointercancel events, a user agent must clear + // the pending pointer capture target override for the pointerId, and then run + // "Process Pending Pointer Capture" steps to fire lostpointercapture if necessary. + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), true, + "pointerup target0.hasPointerCapture should be true"); + }); + set_capture_to_target0 = false; + }); + + on_event(target0, "lostpointercapture", function (e) { + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), false, + "pointerup target0.hasPointerCapture should be false"); + }); + }); + + on_event(target1, "pointerup", function (e) { + test_pointerEvent.step(function () { + assert_equals(target1.hasPointerCapture(e.pointerId), false, + "pointerup target1.hasPointerCapture should be false"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(0, 10, {origin: target0}) + .pointerMove(0, 20, {origin: target0}) + .pointerMove(0, -10, {origin: target1}) + .pointerMove(0, 0, {origin: target1}) + .pointerMove(0, 10, {origin: target1}) + .pointerUp() + .pointerMove(0, 0, {origin: target1}) + .pointerDown() + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Element.hasPointerCapture test</h1> + <h4> + Test Description: This test checks if Element.hasPointerCapture returns value correctly + <ol> + <li> Press black rectangle and do not release + <li> Move your pointer to purple rectangle + <li> Release the pointer + <li> Click purple rectangle + </ol> + </h4> + <p> + <div id="target0" touch-action:none></div> + <div id="target1" touch-action:none></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture_release_pending_capture.html b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture_release_pending_capture.html new file mode 100644 index 0000000000..e75dff8675 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture_release_pending_capture.html @@ -0,0 +1,88 @@ +<!doctype html> +<html> + <head> + <title>Element.hasPointerCapture test after the pending pointer capture element releases pointer capture</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> + <script> + var actions_promise; + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + var test_pointerEvent = async_test("hasPointerCapture test after the pending pointer capture element releases pointer capture"); + + function run() { + var target0 = document.getElementById("target0"); + var target1 = document.getElementById("target1"); + + on_event(target0, "pointerdown", function (e) { + detected_pointertypes[e.pointerType] = true; + target0.setPointerCapture(e.pointerId); + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), true, "After target0.setPointerCapture, target0.hasPointerCapture should return true"); + }); + }); + + on_event(target0, "gotpointercapture", function (e) { + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), true, "After target0 received gotpointercapture, target0.hasPointerCapture should return true"); + }); + target1.setPointerCapture(e.pointerId); + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), false, "After target1.setPointerCapture, target0.hasPointerCapture should return false"); + assert_equals(target1.hasPointerCapture(e.pointerId), true, "After target1.setPointerCapture, target1.hasPointerCapture should return true"); + }); + target1.releasePointerCapture(e.pointerId); + test_pointerEvent.step(function () { + assert_equals(target0.hasPointerCapture(e.pointerId), false, "After target1.releasePointerCapture, target0.hasPointerCapture should be false"); + assert_equals(target1.hasPointerCapture(e.pointerId), false, "After target1.releasePointerCapture, target1.hasPointerCapture should be false"); + }); + }); + + on_event(target1, "gotpointercapture", function (e) { + test_pointerEvent.step(function () { + assert_true(false, "target1 should never receive gotpointercapture in this test"); + }); + }); + + on_event(target0, "lostpointercapture", function (e) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(10, 10, {origin: target0}) + .pointerDown() + .pointerMove(10, 10, {origin: target1}) + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Element.hasPointerCapture test after the pending pointer capture element releases pointer capture</h1> + <h4> + Test Description: This test checks if Element.hasPointerCapture returns value correctly after the pending pointer capture element releases pointer capture + <ol> + <li> Press black rectangle and do not release + <li> Move your pointer to purple rectangle + <li> Release the pointer + </ol> + </h4> + <p> + <div id="target0" touch-action:none></div> + <div id="target1" touch-action:none></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_fractional_coordinates.html b/testing/web-platform/tests/pointerevents/pointerevent_fractional_coordinates.html new file mode 100644 index 0000000000..f794797704 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_fractional_coordinates.html @@ -0,0 +1,149 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events coordinates can have fractional value<</title> + <meta name="viewport" content="width=device-width"> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?touch"> + <meta name="variant" content="?pen"> + <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> + #innerFrame { + transform: scale(5); + width: 60px; + height: 60px; + margin-left: 120px; + margin-top: 120px; + border: 0.01px solid black; + } + </style> + <script> + var input = location.search.substring(1); + var eventList = [ + "pointerdown", + "pointerup", + "pointermove", + "pointerover", + "pointerout", + "pointerenter", + "pointerleave"]; + var eventsRecieved = {}; + var clickedTargetList = []; + + function resetTestState() { + eventsRecieved = {}; + clickedTargetList = []; + ['s1', 's2', 's3'].forEach(function(id){ + var target = document.getElementById('innerFrame').contentDocument.getElementById(id); + target.style.background = "black" + }); + } + + function checkPointerEventCoordinates(event) { + if (event.clientX != Math.floor(event.clientX) || event.clientY != Math.floor(event.clientY)) + eventsRecieved[event.type] = true; + } + + function testInputType(inputSource) { + const scale = 5; + const width = 3; + const height = 3; + var targetFrame = document.querySelector('#innerFrame'); + var frameRect = targetFrame.getBoundingClientRect(); + frameLeft = frameRect.left; + frameTop = frameRect.top; + + target = [{x: 10, y: 10}, {x: 30, y: 50}, {x: 50, y: 30}] + xPosition = [] + yPosition = [] + for (var i = 0; i < target.length; i++) { + xPosition.push((target[i].x + width / 2.0) * scale + frameLeft); + yPosition.push((target[i].y + height / 2.0) * scale + frameTop); + } + return sendInputAt(inputSource, xPosition[0], yPosition[0]).then(function() { + return sendInputAt(inputSource, xPosition[1], yPosition[1]); + }).then(function() { + return sendInputAt(inputSource, xPosition[2], yPosition[2]); + }); + + } + + function sendInputAt(inputSource, xPosition, yPosition) { + if (inputSource == "touch") { + return new test_driver.Actions() + .addPointer("touchPointer1", "touch") + .pointerMove(Math.ceil(xPosition), Math.ceil(yPosition)) + .pointerDown() + .pointerMove(Math.ceil(xPosition + 1), Math.ceil(yPosition + 1)) + .pointerUp() + .send(); + } else { + return new test_driver.Actions() + .pointerMove(Math.ceil(xPosition), Math.ceil(yPosition)) + .pointerDown() + .pointerUp() + .send(); + } + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent events in capturing", [input]); + var innerFrame = document.getElementById('innerFrame'); + var innerDocument = innerFrame.contentDocument; + ['s1', 's2', 's3'].forEach(function(id){ + var target = innerDocument.getElementById(id); + eventList.forEach(function(eventName) { + on_event(target, eventName, checkPointerEventCoordinates); + }); + + on_event(target, "click", function (event) { + if (!(event.target.id in clickedTargetList)) { + clickedTargetList.push(event.target.id); + event.target.style.background = "red" + } + if (clickedTargetList.length == 3) { + test(function () { + if (Object.keys(eventsRecieved).length != eventList.length){ + eventList.forEach(function(eventName){ + assert_true(eventName in eventsRecieved, eventName + " should have fractional coordinates"); + }); + } + }, expectedPointerType); + test_pointerEvent.done(); + } + }); + }); + + testInputType(input); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events coordinates support fractional value</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks pointer events has fractional client coordinates + <ol> + <li>Move your pointer over one black square</li> + <li>Press down the pointer (i.e. press left button with mouse or touch the screen with finger or pen).</li> + <li>Release the pointer.</li> + <li>Move to next black square and repreat 2 and 3</li> + </ol> + + Test passes if pointer events has fractional coordinates. + </h4> + <iframe id=innerFrame src="resources/pointerevent_fractional_coordinates-iframe.html"></iframe> + <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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/pointerevents/pointerevent_hit_test_scroll.html b/testing/web-platform/tests/pointerevents/pointerevent_hit_test_scroll.html new file mode 100644 index 0000000000..6465349849 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_hit_test_scroll.html @@ -0,0 +1,59 @@ +<!doctype html> +<meta charset=utf-8> +<title>pointer-events: none correctly targets scrolls</title> +<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> +<style> + body { + height: 200vh; + } + + #overlay { + overflow: auto; + height: 300px; + border: 2px solid blue; + pointer-events: none; + } + + #scrollable { + background: white; + border: 3px solid green; + height: 150px; + /* pointer-events: auto; should allow scrolling over this element. */ + pointer-events: auto; + } + + #spacer { + height: 200vh; + } + +</style> + +<body id="body"> + <div id="overlay"> + <div id="scrollable"></div> + <div id="spacer"></div> + </div> +</body> +<script> + promise_test(async (t) => { + let scrolled = new Promise((resolve) => { + let scrollers = [window, document.getElementById("overlay")]; + let onscroll = (evt) => { + for (const scroller of scrollers) { + scroller.removeEventListener("scroll", onscroll); + } + resolve(evt.target.id || "root"); + } + for (const scroller of scrollers) { + scroller.addEventListener("scroll", onscroll); + } + }); + const actions = new test_driver.Actions().scroll(50, 250, 0, 50, { duration: 50 }); + actions.send(); + assert_equals(await scrolled, "root", "Incorrect element scrolled"); + }, "Wheel-scroll over pointer-events: none scroller skips that scroller"); +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_hit_test_scroll_visible_descendant.html b/testing/web-platform/tests/pointerevents/pointerevent_hit_test_scroll_visible_descendant.html new file mode 100644 index 0000000000..0a09137e76 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_hit_test_scroll_visible_descendant.html @@ -0,0 +1,59 @@ +<!doctype html> +<meta charset=utf-8> +<title>pointer-events: auto descendant correctly targets scrolls</title> +<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> +<style> + body { + height: 200vh; + } + + #overlay { + overflow: auto; + height: 300px; + border: 2px solid blue; + pointer-events: none; + } + + #scrollable { + background: white; + border: 3px solid green; + height: 150px; + /* pointer-events: auto; should allow scrolling over this element. */ + pointer-events: auto; + } + + #spacer { + height: 200vh; + } + +</style> + +<body id="body"> + <div id="overlay"> + <div id="scrollable"></div> + <div id="spacer"></div> + </div> +</body> +<script> + promise_test(async (t) => { + let scrolled = new Promise((resolve) => { + let scrollers = [window, document.getElementById("overlay")]; + let onscroll = (evt) => { + for (const scroller of scrollers) { + scroller.removeEventListener("scroll", onscroll); + } + resolve(evt.target.id || "root"); + } + for (const scroller of scrollers) { + scroller.addEventListener("scroll", onscroll); + } + }); + const actions = new test_driver.Actions().scroll(50, 50, 0, 50, { duration: 50 }); + actions.send(); + assert_equals(await scrolled, "overlay", "Incorrect element scrolled"); + }, "Wheel-scroll over pointer-events: auto descendant scrolls pointer-events: none scroller."); +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_iframe-touch-action-none_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_iframe-touch-action-none_touch.html new file mode 100644 index 0000000000..109aec8dcd --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_iframe-touch-action-none_touch.html @@ -0,0 +1,66 @@ +<html> + <head> + <title>iframe touch-action:none attribute</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="pointerevent_support.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + </head> + <body onload="run()"> + <h1>iframe touch-action:none attribute</h1> + <h2 id="pointerTypeDescription"></h2> + <h4>Test Description: Drag your finger in the green rectangle below then tap the "Done" button.</h4> + <br> + <iframe id="target" + style="touch-action:none;" + src="resources/iframe-touch-action-none-subframe.html"> + </iframe> + <input type="button" id="btnDone" value="Done"> + </body> + <script> + var event_log = []; + + function resetTestState() { + event_log = []; + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("iframe received pointercancel", + ["touch"]); + var actions_promise; + var target = document.getElementById("target"); + + on_event(document.getElementById("btnDone"), "click", () => { + test_pointerEvent.step(() => { + assert_equals(event_log.join(", "), "pointercancel", + "exactly one pointercancel received"); + }); + actions_promise.then(() => test_pointerEvent.done()); + }); + + on_event(window, "message", function(event) { + if (event.source != target.contentWindow) { + return; + } + if (event.data && event.data.type == "subframe-event") { + event_log.push(event.data.eventType); + } + }); + + actions_promise = new test_driver.Actions() + .addPointer("pointer1", "touch") + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerMove(25, 25, {origin: target}) + .pointerUp() + .pointerMove(0, 0, {origin: btnDone}) + .pointerDown() + .pointerUp() + .send(); + } + </script> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node.html b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node.html new file mode 100644 index 0000000000..b77d9e31e2 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node.html @@ -0,0 +1,99 @@ +<!doctype html> +<html> + <head> + <title>Lostpointercapture fires on document when target is removed</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 src="pointerevent_support.js"></script> + </head> + <body> + <h1>Pointer Events - lostpointercapture when capturing element is removed</h1> + <h4> + Test Description: + This test checks if lostpointercapture is fired at the document when the capturing node is removed from the document. + Complete the following actions: + <ol> + <li>Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged inside of the black rectangle. + <li>"lostpointercapture" should be logged inside of the black rectangle after a short delay. + </ol> + </h4> + <div id="target0"></div> + <div id="target1" style="background:black; color:white"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <script type='text/javascript'> + var isDisconnected = false; + var count = 0; + var event_log = []; + + var detected_pointertypes = {}; + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var target0 = document.getElementById('target0'); + var target1 = document.getElementById('target1'); + var captureButton = document.getElementById('btnCapture'); + + var test_lostpointercapture = async_test("lostpointercapture event received"); + + window.onload = function() { + var actions_promise; + + on_event(captureButton, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + target0.setPointerCapture(event.pointerId); + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target1'); + isDisconnected = true; + target0.parentNode.removeChild(target0); + }); + + on_event(target0, 'lostpointercapture', function(e) { + event_log.push('lostpointercapture@target0'); + test(function() { + // TA: 11.3 + assert_unreached("lostpointercapture must be fired on the document, not the capturing element"); + }, "lostpointercapture must not be dispatched on the disconnected node"); + }); + + on_event(document, 'lostpointercapture', function(e) { + event_log.push('lostpointercapture@document'); + test(function() { + // TA: 11.3 + assert_true(isDisconnected, "lostpointercapture must be fired on the document"); + }, "lostpointercapture is dispatched on the document"); + + actions_promise.then( () => { + test_lostpointercapture.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: captureButton}) + .pointerDown() + .pointerMove(2, 0, {origin: captureButton}) + .pointerMove(5, 0, {origin: captureButton}) + .pointerMove(8, 0, {origin: captureButton}) + .pointerMove(10, 0, {origin: captureButton}) + .send(); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node_in_shadow_dom.html b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node_in_shadow_dom.html new file mode 100644 index 0000000000..f92daeb02e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node_in_shadow_dom.html @@ -0,0 +1,129 @@ +<!doctype html> +<html> + <head> + <title>Lostpointercapture fires on document when target in shadow dom is removed</title> + <meta name="viewport" content="width=device-width"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=810882"> + <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 onload="onLoad()"> + <template id="template"> + <style> + #content{ + height:100px; + width:100px; + background-color: lightgrey; + } + </style> + <div id="content"></div> + </template> + <h1>Pointer Events - lostpointercapture when capturing element in shadow dom is removed</h1> + <h4> + Test Description: + This test checks if lostpointercapture is fired at the document when the capturing node that is in shadow dom is removed from the shadow dom. + Complete the following actions: + <ol> + <li>Press left mouse button over "Set Capture" button. Pointer should be captured by the gray rectangle which is in shadow dom.</li> + <li>Gray rectangle will be removed from shadow dom.</li> + <li>"lostpointercapture" should be received on the document not on the gray rectangle.</li> + </ol> + </h4> + <div id="shadowhost"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <div id="log"></div> + <script> + async function onLoad(){ + var logDiv = document.getElementById("log"); + function logMessage(message){ + var log = document.createElement("div"); + var messageNode = document.createTextNode(message); + log.appendChild(messageNode); + logDiv.appendChild(log); + } + var events = []; + + var host = document.getElementById("shadowhost"); + var shadowRoot = host.attachShadow({mode: "open"}); + var template = document.getElementById("template"); + var node = template.content.cloneNode(true); + shadowRoot.appendChild(node); + + var content = host.shadowRoot.getElementById("content"); + var captureButton = document.getElementById("btnCapture"); + + captureButton.addEventListener("pointerdown", function(event){ + logMessage("Pointer will be captured by the shadow dom gray rectangle."); + content.setPointerCapture(event.pointerId); + events.push("pointerdown@captureButton"); + }); + content.addEventListener("gotpointercapture", function(event){ + logMessage("Gray rectangle received pointercapture."); + logMessage("Removing gray rectangle from shadow dom.") + content.parentNode.removeChild(content); + events.push("gotpointercapture@content"); + }); + content.addEventListener("lostpointercapture", function(event){ + logMessage("Test Failed! The element removed from shadow dom should not receive lostpointercapture.") + events.push("lostpointercapture@content"); + if(window.promise_test && shadow_dom_test){ + shadow_dom_test.step(function(){ + assert_unreached("lostpointercapture must be fired on the document, not the capturing element"); + reject_test("lostpointercapture must not be dispatched on the disconnected node"); + shadow_dom_test.done(); + }); + } + }); + document.addEventListener("lostpointercapture", function(event){ + logMessage("Test Passed! Document received lostpointercapture."); + events.push("lostpointercapture@document"); + if(window.promise_test && shadow_dom_test){ + shadow_dom_test.step(function(){ + assert_array_equals(events, ["pointerdown@captureButton", + "gotpointercapture@content", + "lostpointercapture@document"]); + resolve_test(); + }); + } + }); + + var shadow_dom_test = null; + var resolve_test = null; + var reject_test = null; + + function cleanup(){ + events = []; + shadow_dom_test = null; + resolve_test = null; + reject_test = null; + } + if(window.promise_test){ + promise_test(async function(t){ + var actions_promise; + return new Promise(async function(resolve, reject){ + shadow_dom_test = t; + resolve_test = resolve; + reject_test = reject; + t.add_cleanup(function(){ + cleanup(); + }); + var actions = new test_driver.Actions(); + actions_promise = actions + .pointerMove(0, 0, {origin:captureButton}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + }).finally(async () => { + await actions_promise; + t.done(); + }); + }, "lostpointercapture is dispatched on the document when shadow dom capturing element is removed"); + } + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_shadow_host.html b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_shadow_host.html new file mode 100644 index 0000000000..26fa992f76 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_shadow_host.html @@ -0,0 +1,138 @@ +<!doctype html> +<html> + <head> + <title>Lostpointercapture fires on document when target in shadow dom is removed</title> + <meta name="viewport" content="width=device-width"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=810882"> + <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> + <style> + #shadowhost{ + height:200px; + width:200px; + background-color:magenta; + } + </style> + </head> + <body onload="onLoad()"> + <template id="template"> + <style> + #content{ + height:100px; + width:100px; + background-color: lightgrey; + } + </style> + <div id="content"></div> + </template> + <h1>Pointer Events - lostpointercapture when capturing element in shadow dom is removed by removing the shadow host</h1> + <h4> + Test Description: + This test checks if lostpointercapture is fired at the document when the capturing node is removed from the document by removing the shadow host. + The shadow host is colored magenta and the shadow dom element is colored gray. + Complete the following actions: + <ol> + <li>Press left mouse button over "Set Capture" button. Pointer should be captured by the gray rectangle.</li> + <li>Shadow host magenta rectangle including the gray rectangle will be removed from shadow dom.</li> + <li>"lostpointercapture" should be received on the document not on the gray rectangle.</li> + </ol> + </h4> + <div id="shadowhost"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <div id="log"></div> + <script> + async function onLoad(){ + var logDiv = document.getElementById("log"); + function logMessage(message){ + var log = document.createElement("div"); + var messageNode = document.createTextNode(message); + log.appendChild(messageNode); + logDiv.appendChild(log); + } + var events = []; + + var host = document.getElementById("shadowhost"); + var shadowRoot = host.attachShadow({mode: "open"}); + var template = document.getElementById("template"); + var node = template.content.cloneNode(true); + shadowRoot.appendChild(node); + + var content = host.shadowRoot.getElementById("content"); + var captureButton = document.getElementById("btnCapture"); + + captureButton.addEventListener("pointerdown", function(event){ + logMessage("Pointer will be captured by the shadow dom gray rectangle."); + content.setPointerCapture(event.pointerId); + events.push("pointerdown@captureButton"); + }); + content.addEventListener("gotpointercapture", function(event){ + logMessage("Gray rectangle received pointercapture."); + logMessage("Removing magenta rectangle (which includes gray rectangle) from shadow dom.") + host.parentNode.removeChild(host); + events.push("gotpointercapture@content"); + }); + content.addEventListener("lostpointercapture", function(event){ + logMessage("Test Failed! The element removed from shadow dom should not receive lostpointercapture.") + events.push("lostpointercapture@content"); + if(window.promise_test && shadow_dom_test){ + shadow_dom_test.step(function(){ + assert_unreached("lostpointercapture must be fired on the document, not the capturing element"); + reject_test("lostpointercapture must not be dispatched on the disconnected node"); + shadow_dom_test.done(); + }); + } + }); + document.addEventListener("lostpointercapture", function(event){ + logMessage("Test Passed! Document received lostpointercapture."); + events.push("lostpointercapture@document"); + if(window.promise_test && shadow_dom_test){ + shadow_dom_test.step(function(){ + assert_array_equals(events, ["pointerdown@captureButton", + "gotpointercapture@content", + "lostpointercapture@document"]); + resolve_test(); + }); + } + }); + + var shadow_dom_test = null; + var resolve_test = null; + var reject_test = null; + + function cleanup(){ + events = []; + shadow_dom_test = null; + resolve_test = null; + reject_test = null; + } + if(window.promise_test){ + promise_test(async function(t){ + var actions_promise; + return new Promise(function(resolve, reject){ + shadow_dom_test = t; + resolve_test = resolve; + reject_test = reject; + t.add_cleanup(function(){ + cleanup(); + }); + var actions = new test_driver.Actions(); + actions_promise = actions + .pointerMove(0, 0, {origin:captureButton}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + }).finally(async () => { + await actions_promise; + t.done(); + }); + }, "lostpointercapture is dispatched on the document when shadow host is removed"); + } + } + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_is_first.html b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_is_first.html new file mode 100644 index 0000000000..c84961b6c5 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_is_first.html @@ -0,0 +1,151 @@ +<!doctype html> +<html> + <head> + <title>Lostpointercapture triggers first and asynchronously</title> + <meta name="assert" content="TA5.2.10: A user agent must fire a pointer event named lostpointercapture after pointer capture is released for a pointer. This event must be fired prior to any subsequent events for the pointer after capture was released. This event is fired at the element from which pointer capture was removed;"> + <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 src="pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h1>Pointer Events capture test - lostpointercapture order</h1> + <h4> + Test Description: + This test checks if lostpointercapture is handled asynchronously and prior to all subsequent events. + Complete the following actions: + <ol> + <li>Press and hold left mouse button over "Set Capture" button and move a little. "gotpointercapture" should be logged inside of the black rectangle + <li>"lostpointercapture" should be logged inside of the black rectangle after pointerup + </ol> + </h4> + Test passes if lostpointercapture is dispatched after releasing the mouse button and before any additional pointer events. + <div id="target0" style="background:black; color:white"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var detected_pointerEvents = new Array(); + var pointerdown_event = null; + var firstPointermoveReceived = false; // To handle the first pointermove right after gotpointercapture which gotpointercapture was sent right before it. + var firstPointeroverReceived = false; // To handle the first pointerover right after gotpointercapture which gotpointercapture was sent right before it. + var firstPointerenterReceived = false; // To handle the first pointeenter right after gotpointercapture which gotpointercapture was sent right before it. + + var test_pointerEvent = async_test("lostpointercapture is dispatched prior to subsequent events"); // set up test harness + + var isPointerCapture = false; + var count=0; + + var testStarted = false; + var eventRcvd = false; + var isAsync = false; + var event_log = []; + var actions_promise; + + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var target0 = document.getElementById('target0'); + var captureButton = document.getElementById('btnCapture'); + + function run() { + on_event(captureButton, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + pointerdown_event = event; + if(isPointerCapture == false) { + isPointerCapture = true; + captureButton.value = 'Release Capture'; + sPointerCapture(event); + } + }); + + // TA5.1.3.1: Process Pending Pointer Capture + // Whenever a user agent is to fire a Pointer Event that is not gotpointercapture or lostpointercapture, + // it must first run the steps of processing pending pointer capture + // + // TA5.2.12: The lostpointercapture event + // After pointer capture is released for a pointer, and prior to any subsequent events for the pointer, + // the lostpointercapture event must be dispatched to the element from which pointer capture was removed. + // listen to all events + for (var i = 0; i < All_Pointer_Events.length; i++) { + on_event(target0, All_Pointer_Events[i], function (event) { + // if the event was gotpointercapture, just log it and return + if (event.type == "gotpointercapture") { + testStarted = true; + rPointerCapture(event); + isAsync = true; + event_log.push('gotpointercapture@target0'); + return; + } + else if (event.type == "lostpointercapture") { + event_log.push('lostpointercapture@target0'); + captureButton.value = 'Set Capture'; + isPointerCapture = false; + + // TA: 11.2 + test_pointerEvent.step(function () { + assert_true(isAsync, "lostpointercapture must be fired asynchronously"); + }); + + // if any events except pointerup have been received with same pointerId before lostpointercapture, then fail + var eventsRcvd_str = ""; + if (eventRcvd) { + eventsRcvd_str = "Events received before lostpointercapture: "; + for (var i = 0; i < detected_pointerEvents.length; i++) { + eventsRcvd_str += detected_pointerEvents[i] + ", "; + } + } + test_pointerEvent.step(function () { + assert_false(eventRcvd, "no other events should be received before lostpointercapture." + eventsRcvd_str); + assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerID is same for pointerdown and lostpointercapture"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + } + else { + if (testStarted && pointerdown_event != null && pointerdown_event.pointerId === event.pointerId) { + if (event.type == "pointermove" && !firstPointermoveReceived) { + firstPointermoveReceived = true; + } + else if (event.type == "pointerenter" && !firstPointerenterReceived) { + firstPointerenterReceived = true; + } + else if (event.type == "pointerover" && !firstPointeroverReceived) { + firstPointeroverReceived = true; + } + else if (event.type != "pointerup") { + detected_pointerEvents.push(event.type); + eventRcvd = true; + } + } + } + }); + } + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: captureButton}) + .pointerDown() + .pointerMove(2, 0, {origin: captureButton}) + .pointerMove(5, 0, {origin: captureButton}) + .pointerUp() + .send(); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_mouse_capture_change_hover.html b/testing/web-platform/tests/pointerevents/pointerevent_mouse_capture_change_hover.html new file mode 100644 index 0000000000..ef824dafd9 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_mouse_capture_change_hover.html @@ -0,0 +1,170 @@ +<!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> +<style> +body { + user-select: none; +} +#green:hover { + background-color: red; +} +#blue:hover { + background-color: red; +} +#green { + background-color: green; +} +#blue { + background-color: blue; +} +div.box { + margin: 5px; + padding: 20px; + width: 50px; + height: 50px; +} +</style> +<body onload="run()"> + <div id="green" class="box"></div> + <div id="blue" class="box"></div> +</body> +<script> +var receivedEventList = []; +var setcapture = ""; + +let testEventList = ['pointerup', 'pointerdown', 'pointermove', 'gotpointercapture', 'lostpointercapture', "pointerover", "pointerout", "pointerleave", "pointerenter"]; +testEventList.forEach(function(eventName) { + green.addEventListener(eventName, logEvent); + blue.addEventListener(eventName, logEvent); +}); + +function logEvent(event) { + receivedEventList.push(event.target.id + " received " + event.type) +} + +function setCaptureGreen(event) { + green.setPointerCapture(event.pointerId); +} + +function setCaptureBlue(event) { + blue.setPointerCapture(event.pointerId); +} + +function releaseCapture(event) { + if (event.target.hasPointerCapture(event.pointerId)) { + event.target.releasePointerCapture(event.pointerId); + } +} + +function run() { + promise_test (async() => { + // Move to (0, 0) to reset hovering. + await new test_driver.Actions().pointerMove(0, 0).send(); + receivedEventList = []; + + // pointerdown at green -> set capture to green -> green receive the following moves. + document.addEventListener("pointerdown", setCaptureGreen); + + await new test_driver.Actions() + .addPointer("mouse") + .pointerMove(25, 25, {origin: green}) + .pointerDown() + .pointerMove(30, 30, {origin: green}) + .pointerMove(25, 25, {origin: blue}) + .send(); + + expectedEventList = ["green received pointerover", + "green received pointerenter", + "green received pointermove", + "green received pointerdown", + "green received gotpointercapture", + "green received pointermove", + "green received pointermove"]; + + assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); + assert_equals(getComputedStyle(green).backgroundColor, "rgb(255, 0, 0)", "green should be red (hover)."); + assert_equals(getComputedStyle(blue).backgroundColor, "rgb(0, 0, 255)", "blue should be blue."); + document.removeEventListener("pointerdown", setCaptureGreen); + // Release mouse button. + await new test_driver.Actions().addPointer("mouse").pointerUp().send(); + }, "Mouse down and capture to green."); + + promise_test (async() => { + // Move to (0, 0) to reset hovering. + await new test_driver.Actions().addPointer("mouse").pointerMove(0, 0).send(); + receivedEventList = []; + + // pointerdown at green -> set capture to blue -> blue receive the following moves. + document.addEventListener("pointerdown", setCaptureBlue); + + await new test_driver.Actions() + .addPointer("mouse") + .pointerMove(25, 25, {origin: green}) + .pointerDown() + .pointerMove(30, 30, {origin: green}) + .pointerMove(31, 31, {origin: green}) + .send(); + + expectedEventList = ["green received pointerover", + "green received pointerenter", + "green received pointermove", + "green received pointerdown", + "green received pointerout", + "green received pointerleave", + "blue received pointerover", + "blue received pointerenter", + "blue received gotpointercapture", + "blue received pointermove", + "blue received pointermove"]; + + assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); + assert_equals(getComputedStyle(green).backgroundColor, "rgb(0, 128, 0)", "green should be green."); + assert_equals(getComputedStyle(blue).backgroundColor, "rgb(255, 0, 0)", "blue should be red (hover)."); + document.removeEventListener("pointerdown", setCaptureBlue); + // Release mouse button. + await new test_driver.Actions().addPointer("mouse").pointerUp().send(); + }, "Mouse down at green and capture to blue."); + + promise_test (async() => { + // Move to (0, 0) to reset hovering. + await new test_driver.Actions().addPointer("mouse").pointerMove(0, 0).send(); + receivedEventList = []; + + // pointerdown at green -> set capture to green -> green receive first move -> release capture -> blue receive the next move + green.addEventListener("pointerdown", setCaptureGreen); + green.addEventListener("pointermove", releaseCapture); + + await new test_driver.Actions() + .addPointer("mouse") + .pointerMove(25, 25, {origin: green}) + .pointerDown() + .pointerMove(30, 30, {origin: blue}) + .pointerMove(25, 25, {origin: blue}) + .send(); + + expectedEventList = ["green received pointerover", + "green received pointerenter", + "green received pointermove", + "green received pointerdown", + "green received gotpointercapture", + "green received pointermove", + "green received lostpointercapture", + "green received pointerout", + "green received pointerleave", + "blue received pointerover", + "blue received pointerenter", + "blue received pointermove"] + + assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); + assert_equals(getComputedStyle(green).backgroundColor, "rgb(0, 128, 0)", "green should be green."); + assert_equals(getComputedStyle(blue).backgroundColor, "rgb(255, 0, 0)", "blue should be red (hover)."); + green.removeEventListener("pointerdown", setCaptureBlue); + green.removeEventListener("pointermove", releaseCapture); + // Release mouse button. + await new test_driver.Actions().addPointer("mouse").pointerUp().send(); + }, "Mouse down and capture to green, move to blue and release capture"); +} +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_mouse_pointercapture_inactivate_pointer.html b/testing/web-platform/tests/pointerevents/pointerevent_mouse_pointercapture_inactivate_pointer.html new file mode 100644 index 0000000000..24b65213ec --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_mouse_pointercapture_inactivate_pointer.html @@ -0,0 +1,82 @@ +<!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> +<style> + iframe { + width: 300px; + height: 300px; + top: 100px; + left: 100px; + border: 0; + position: absolute; + background: green; + } + #outerFrame { + width: 500px; + height: 500px; + background: blue; + } +</style> +<body onload="run()"> + <div id='outerFrame'> + <iframe id='iframe' src="resources/pointerevent_mouse_pointercapture_inactivate_pointer-iframe.html"></iframe> + </div> +</body> + +<script type="text/javascript"> + function run() { + capture_count = 0; + + document.addEventListener("gotpointercapture", function(){ + capture_count ++; + }) + + iframe.contentDocument.addEventListener("gotpointercapture", function(){ + capture_count ++; + }) + + document.addEventListener("pointerdown", function(event){ + // Outer frame got pointer down, set capture to inner frame. + iframe.contentDocument.getElementById("target").setPointerCapture(event.pointerId); + }); + + + iframe.contentDocument.addEventListener("pointerdown", function(event){ + // Inner frame got pointer down, set capture to outer frame. + outerFrame.setPointerCapture(event.pointerId); + }); + + + promise_test(async(test) => { + let eventWatcher = new EventWatcher(test, document, ["pointerup"]); + let donePromise = eventWatcher.wait_for(["pointerup"], { record: 'all' }); + await injectEvent(50, 50); + // wait for pointerUp before running the test + await donePromise; + assert_equals(capture_count, 0, "Inner frame can not capture when pointer is activate in outer frame") + }, "setPointerCapture: pointer active in outer frame, set capture to inner frame"); + + + promise_test(async(test) => { + let eventWatcher = new EventWatcher(test, iframe.contentDocument, ["pointerup"]); + let donePromise = eventWatcher.wait_for(["pointerup"], { record: 'all' }); + await injectEvent(250, 250); + // wait for pointerUp before running the test + await donePromise; + assert_equals(capture_count, 0, "Outer frame can not capture when pointer is activate in inner frame") + }, "setPointerCapture: pointer active in inner frame, set capture to outer frame"); + + function injectEvent(x, y) { + return new test_driver.Actions() + .pointerMove(x, y) + .pointerDown() + .pointerMove(x, y) + .pointerUp() + .send(); + } +} +</script> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_movementxy.html b/testing/web-platform/tests/pointerevents/pointerevent_movementxy.html new file mode 100644 index 0000000000..cb69c5c95e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_movementxy.html @@ -0,0 +1,152 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events properties tests</title> + <meta name="timeout" content="long"> + <meta name="viewport" content="width=device-width"> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?touch"> + <meta name="variant" content="?pen"> + <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> + <style> + #testContainer { + touch-action: none; + user-select: none; + position: relative; + } + #box1 { + top: 30px; + left: 50px; + background: black; + } + #box2 { + top: 70px; + left: 250px; + background: red; + } + #innerFrame { + top: 10px; + left: 100px; + } + #square2 { + visibility: block; + } + </style> + <script> + var inputSource = location.search.substring(1); + var expectedPointerId = NaN; + var lastScreenX = null; + var lastScreenY = null; + var actionsPromise; + + function resetTestState() { + lastScreenX = null; + lastScreenY = null; + } + + var nonPointermoveEventList = [ + "pointerover", + "pointerenter", + "pointerdown", + "pointerup", + "pointerout", + "pointerleave", + "gotpointercapture", + "lostpointercapture"]; + + function injectInput(pointerType) { + var pointerId = pointerType + "Pointer1"; + return new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(0, 0, {origin: box1}) + .pointerDown() + .pointerMove(20, 30, {origin: box1}) + .pointerMove(50, 40, {origin: box1}) + .pointerMove(80, 30, {origin: box1}) + .pointerMove(110, 20, {origin: box1}) + .pointerMove(0, 0, {origin: box2}) + .pointerUp() + .send(); + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", [inputSource]); + + [document, document.getElementById('innerFrame').contentDocument].forEach(function(element) { + nonPointermoveEventList.forEach(function(eventName) { + on_event(element, eventName, function (event) { + if (lastScreenX && lastScreenY) { + test_pointerEvent.step(function() { + assert_equals(event.movementX, 0, "movementX should be 0 for event other than pointermove."); + assert_equals(event.movementY, 0, "movementY should be 0 for event other than pointermove."); + }); + // Reset when entering the new frame. + if (event.type == "pointerenter") { + lastScreenX = null; + lastScreenY = null; + } + } + }); + }); + + on_event(element, 'pointermove', function (event) { + test_pointerEvent.step(function() { + if (lastScreenX && lastScreenY) { + assert_equals(event.movementX, event.screenX - lastScreenX, "movementX should be the delta between current event's and last event's screenX"); + assert_equals(event.movementY, event.screenY - lastScreenY, "movementY should be the delta between current event's and last event's screenY"); + } + }); + lastScreenX = event.screenX; + lastScreenY = event.screenY; + }); + }); + on_event(document.querySelector('#box1'), 'pointerdown', function(event) { + event.target.releasePointerCapture(event.pointerId); + test_pointerEvent.step(function() { + assert_equals(event.pointerType, expectedPointerType, "Use the instructed pointer type."); + }); + lastScreenX = event.screenX; + lastScreenY = event.screenY; + }); + on_event(document.querySelector('#box2'), 'pointerup', function(event) { + // Make sure the test finishes after all the input actions are completed. + actionsPromise.then( () => { + test_pointerEvent.done(); + }); + }); + + // Inject input + actionsPromise = injectInput(inputSource); + } + + </script> + </head> + <body onload="run()"> + <h1>Pointer Events movementX/Y attribute test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks the movementX/Y properties of pointer events. + <ol> + <li>Press down on the black square.</li> + <li>Move your pointer slowly along a straight line to the red square.</li> + <li>Release the pointer when you are over the red square.</li> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div id="box1" class="square"></div> + <div id="box2" class="square"></div> + <iframe id="innerFrame" src="resources/pointerevent_movementxy-iframe.html"></iframe> + </div> + <div class="spacer"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/pointerevents/pointerevent_multiple_primary_pointers_boundary_events-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_multiple_primary_pointers_boundary_events-manual.html new file mode 100644 index 0000000000..029aa26368 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_multiple_primary_pointers_boundary_events-manual.html @@ -0,0 +1,145 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Boundary compatibility events for multiple primary pointers</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When more than one primary pointers are active, each will have an independent sequence of pointer boundary events but the compatibilty mouse boundary events have their own sequence."/> + <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> + <script type="text/javascript"> + var test_pointerEvent = async_test("Multi-pointer boundary compat events"); + add_completion_callback(end_of_test); + + var detected_pointertypes = {}; + var event_log = []; + + // These two ids help us detect two different pointing devices. + var first_entry_pointer_id = -1; + var second_entry_pointer_id = -1; + + // Current node for each pointer id + var current_node_for_id = {}; + + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + function end_of_interaction() { + test(function () { + assert_equals(event_log.join(", "), + "mouseover@target0, mouseenter@target0, mouseout@target0, mouseleave@target0, " + + "mouseover@target1, mouseenter@target1, mouseout@target1, mouseleave@target1, " + + "mouseover@target0, mouseenter@target0, mouseout@target0, mouseleave@target0" + ); + }, "Event log"); + + test_pointerEvent.done(); // complete test + } + + function log_event(label) { + event_log.push(label); + } + + function run() { + on_event(document.getElementById("done"), "click", end_of_interaction); + + var target_list = ["target0", "target1"]; + var pointer_event_list = ["pointerenter", "pointerleave", "pointerover", "pointerout", "pointerdown"]; + var mouse_event_list = ["mouseenter", "mouseleave", "mouseover", "mouseout"]; + + target_list.forEach(function(targetId) { + var target = document.getElementById(targetId); + + pointer_event_list.forEach(function(eventName) { + on_event(target, eventName, function (event) { + var label = event.type + "@" + targetId; + + detected_pointertypes[event.pointerType] = true; + + if (!event.isPrimary) { + test(function () { + assert_unreached("Non-primary pointer " + label); + }, "Non-primary pointer " + label); + } + + if (event.type === "pointerenter") { + var pointer_id = event.pointerId; + if (current_node_for_id[pointer_id] !== undefined) { + test(function () { + assert_unreached("Double entry " + label); + }, "Double entry " + label); + } + current_node_for_id[pointer_id] = event.target; + + // Test that two different pointing devices are used + if (first_entry_pointer_id === -1) { + first_entry_pointer_id = pointer_id; + } else if (second_entry_pointer_id === -1) { + second_entry_pointer_id = pointer_id; + test(function () { + assert_not_equals(first_entry_pointer_id, second_entry_pointer_id); + }, "Different pointing devices"); + } + } else if (event.type === "pointerleave") { + var pointer_id = event.pointerId; + if (current_node_for_id[pointer_id] !== event.target) { + test(function () { + assert_unreached("Double exit " + label); + }, "Double exit " + label); + } + current_node_for_id[pointer_id] = undefined; + } + }); + }); + + mouse_event_list.forEach(function(eventName) { + on_event(target, eventName, function (event) { + log_event(event.type + "@" + targetId); + }); + }); + }); + } + </script> + <style> + #target0, #target1 { + margin: 20px; + } + + #done { + margin: 20px; + border: 2px solid black; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Boundary compatibility events for multiple primary pointers</h1> + <h4> + When more than one primary pointers are active, each will have an independent sequence of pointer boundary events but the compatibilty mouse boundary events have their own sequence. + </h4> + Instruction: + <ol> + <li>Move the mouse directly into Target0 (without going through Target1), and then leave the mouse there unmoved.</li> + <li>Tap directly on Target1 with a finger or a stylus, and then lift the finger/stylus off the screen/digitizer without crossing Target1 boundary.</li> + <li>Move the mouse into Target0 (if not there already) and move inside it.</li> + <li>Click Done (without passing over Target1).</li> + </ol> + <div id="done"> + Done + </div> + <div id="target0"> + Target0 + </div> + <div id="target1"> + Target1 + </div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_on_event_handlers.html b/testing/web-platform/tests/pointerevents/pointerevent_on_event_handlers.html new file mode 100644 index 0000000000..d8cfa7a0f4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_on_event_handlers.html @@ -0,0 +1,67 @@ +<!doctype html> +<html> + <head> + <title>PointerEvent: Constructor 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> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="pointerevent_support.js"></script> + </head> + <body> + <h1>PointerEvent: Dispatch custom event</h1> + <h4>Test Description: This test checks if on pointer event handlers through attributes works properly using synthetic pointerevents. For valid results, this test must be run without generating real (trusted) events on the black rectangle below.</h4> + <div id="target0" + onpointercancel="window.eventHappened = 'pointercancel';" + onpointerdown="window.eventHappened = 'pointerdown';" + onpointerup="window.eventHappened = 'pointerup';" + onpointermove="window.eventHappened = 'pointermove';" + onpointerout="window.eventHappened = 'pointerout';" + onpointerover="window.eventHappened = 'pointerover';" + onpointerleave="window.eventHappened = 'pointerleave';" + onpointerenter="window.eventHappened = 'pointerenter';" + ongotpointercapture="window.eventHappened = 'gotpointercapture';" + onlostpointercapture="window.eventHappened = 'lostpointercapture';" + ></div> + <script> + window.eventHappened = ''; + + All_Pointer_Events.forEach(function(event) { + var on_event = "on" + event; + + test(function() { + const htmlElement = document.createElement("span"); + const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "g"); + for (var location of [window, htmlElement, svgElement, document]) { + assert_equals(location[on_event], null, + `The default value of the property is null for a ${location.constructor.name} instance`); + } + }, "The default value of " + on_event + " is always null"); + + test(function() { + window.eventHappened = ''; + const element = document.querySelector("#target0"); + const compiledHandler = element[on_event]; + assert_equals(typeof compiledHandler, "function", "The " + on_event + " property must be a function"); + compiledHandler(); + assert_equals(window.eventHappened, event, "Calling the handler must run the code"); + }, "The " + on_event + " content attribute must be compiled into the " + on_event + " property"); + + var handlerTest = async_test("dispatching a " + event + " event must trigger element." + on_event); + const element = document.createElement("meta"); + element[on_event] = function(e) { + handlerTest.step(function() { + assert_equals(e.currentTarget, element, "The event must be fired at the <meta> element"); + }); + handlerTest.done(); + }; + element.dispatchEvent(new Event(event)); + }); + </script> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerId_scope.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerId_scope.html new file mode 100644 index 0000000000..e3651b9d34 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerId_scope.html @@ -0,0 +1,99 @@ +<!doctype html> +<html> + <!-- +Test cases for Pointer Events v1 spec +This document references Test Assertions (abbrev TA below) written by Cathy Chan +http://www.w3.org/wiki/PointerEvents/TestAssertions +--> + <head> + <title>Pointer Events pointerdown 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 detected_pointertypes = {}; + var test_pointerEvent = async_test("pointerId of an active pointer is the same across iframes"); + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + var detected_pointertypes = {}; + + async function run() { + var target0 = document.getElementById("target0"); + var innerframe = document.getElementById("innerframe"); + var target1 = innerframe.contentWindow.document.getElementsByTagName("div")[0]; + var pointerover_pointerId = null; + var pointerover_pointerType = null; + + var eventList = ['pointerenter', 'pointerover', 'pointermove', 'pointerout', 'pointerleave']; + var receivedEvents = {}; + var receivedEventsInnerFrame = {}; + + + function checkPointerId(event, inner) { + detected_pointertypes[event.pointerType] = true; + var eventName = (inner ? "inner frame " : "" ) + event.type; + test_pointerEvent.step(function() { + assert_equals(event.pointerId, pointerover_pointerId, "PointerId of " + eventName + " is not correct"); + assert_equals(event.pointerType, pointerover_pointerType, "PointerType of " + eventName + " is not correct"); + }, eventName + ".pointerId were the same as first pointerover"); + } + + on_event(window, "message", function(event) { + if (event.source != innerframe.contentWindow) { + return; + } + receivedEventsInnerFrame[event.data.type] = 1; + checkPointerId(event.data, true); + if (Object.keys(receivedEvents).length == eventList.length && Object.keys(receivedEventsInnerFrame).length == eventList.length) + test_pointerEvent.done(); + }); + + eventList.forEach(function(eventName) { + on_event(target0, eventName, function (event) { + if (pointerover_pointerId === null && event.type == 'pointerover') { + pointerover_pointerId = event.pointerId; + pointerover_pointerType = event.pointerType; + } else { + checkPointerId(event, false); + } + receivedEvents[event.type] = 1; + }); + }); + + 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}) + .pointerMove(center_x, center_y) + .pointerMove(center_y, center_y + 100) + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events pointerdown tests</h1> + Complete the following actions: + <ol> + <li>Start with your pointing device outside of black box, then move it into black box. If using touch just press in black box and don't release. + <li>Move your pointing device into purple box (without leaving the digitizer range if you are using hover supported pen or without releasing touch if using touch). Then move it out of the purple box. + </ol> + <div id="target0" class="touchActionNone"> + </div> + <iframe src="resources/pointerevent_pointerId_scope-iframe.html" id="innerframe"></iframe> + <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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointercancel_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_pointercancel_touch.html new file mode 100644 index 0000000000..9d0314655d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointercancel_touch.html @@ -0,0 +1,95 @@ +<!doctype html> +<html> + <head> + <title>PointerCancel - touch</title> + <meta name="viewport" content="width=device-width"> + <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> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="pointerevent_support.js"></script> + </head> + <body class="scrollable" onload="run()"> + <h1>pointercancel test</h1> + <h3>Warning: this test works properly only for devices that have touchscreen</h3> + <h4> + Test Description: This test checks if pointercancel event triggers. + <p>Start touch over the black rectangle and then move your finger to scroll the page.</p> + </h4> + <p> + <div id="target0" style="background: black"></div> + <script> + var detected_pointertypes = {}; + var test_pointerEvent = async_test("pointercancel event received"); + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var pointerdown_event = null; + var pointercancel_event = null; + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + on_event(target0, "pointerdown", function (event) { + pointerdown_event = event; + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, "pointercancel", function (event) { + pointercancel_event = event; + test_pointerEvent.step(function () { + assert_not_equals(pointerdown_event, null, "pointerdown was received: "); + assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerdown and pointercancel"); + assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerdown and pointercancel"); + assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerdown and pointercancel"); + }); + test_pointerEvent.step(function () { + check_PointerEvent(event); + }); + test_pointerEvent.step(function () { + assert_equals(event.x, 0, "pointercancel.x must be zero"); + assert_equals(event.y, 0, "pointercancel.x must be zero"); + assert_equals(event.clientX, 0, "pointercancel.clientX must be zero"); + assert_equals(event.clientY, 0, "pointercancel.clientY must be zero"); + }); + }); + + on_event(target0, "pointerout", function (event) { + test_pointerEvent.step(function () { + assert_not_equals(pointercancel_event, null, "pointercancel was received before pointerout: "); + assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerout and pointercancel"); + assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerout and pointercancel"); + assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerout and pointercancel"); + }); + }); + + on_event(target0, "pointerleave", function (event) { + test_pointerEvent.step(function () { + assert_not_equals(pointercancel_event, null, "pointercancel was received before pointerleave: "); + assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerleave and pointercancel"); + assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerleave and pointercancel"); + assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerleave and pointercancel"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down'); + } + </script> + <h1>Pointer Events pointercancel Tests</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-in-custom-element.html b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-in-custom-element.html new file mode 100644 index 0000000000..6f7c9058d6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-in-custom-element.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> + <head> + <title>PointerCapture for Custome Shadow DOM</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width"> + <link rel="help" href= "https://bugs.chromium.org/p/chromium/issues/detail?id=810882"> + <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> + class WC extends HTMLElement{ + constructor(){ + super(); + let template = document.getElementById('template-wc'); + let node = template.content.cloneNode(true) ; + + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.appendChild(node); + } + } + customElements.define("wc-wc", WC); + </script> + </head> + <body onload="onLoad()"> + <template id="template-wc"> + <style> + #content{ + height:50px; + width:50px; + background-color: magenta; + } + </style> + <div id="content"></div> + </template> + <h4>PointerCapture by Custom Element's Shadow DOM</h4> + The magenta box below is part of a custom element's Shadow DOM. + <ul> + <li> Click left mouse button inside the box and keep mouse button depressed</li> + <li> Move the mouse</li> + <li> There should be a message stating <em>Pointer was captured by custom element's Shadow DOM!</em></li> + <li> Release left mouse button</li> + <li> There should be a message stating <em>Pointer was released by custom element's Shadow DOM!</em></li> + </ul> + + <wc-wc id="wc-wc"></wc-wc> + <div id="log"></div> + <script> + function onLoad(){ + var logDiv = document.getElementById("log"); + function logMessage(message){ + var log = document.createElement("div"); + var messageNode = document.createTextNode(message); + log.appendChild(messageNode); + logDiv.appendChild(log); + } + var events = []; + + var content = document.getElementById("wc-wc") + .shadowRoot.getElementById("content"); + + content.addEventListener("pointerdown", function(e){ + content.setPointerCapture(e.pointerId); + events.push("pointerdown@content"); + }); + content.addEventListener("gotpointercapture", function(e){ + logMessage("Pointer was captured by custom element's Shadow DOM!"); + events.push("gotpointercapture@content"); + }); + content.addEventListener("pointerup", function(e){ + content.releasePointerCapture(e.pointerId); + events.push("pointerup@content"); + }); + content.addEventListener("lostpointercapture", function(e){ + logMessage("Pointer was released by custom element's Shadow DOM!"); + events.push("lostpointercapture@content"); + if(window.promise_test && wc_shadow_dom_test){ + wc_shadow_dom_test.step(function(){ + assert_array_equals(events, ["pointerdown@content", + "gotpointercapture@content", "pointerup@content", + "lostpointercapture@content"]); + resolve_test(); + }); + } + }); + + var wc_shadow_dom_test = null; + var resolve_test = null; + var reject_test = null; + + function cleanup(){ + events = []; + shadow_dom_test = null; + resolve_test = null; + reject_test = null; + } + if(window.promise_test){ + promise_test(async function(t){ + var actions_promise; + return new Promise(async function(resolve, reject){ + wc_shadow_dom_test = t; + resolve_test = resolve; + reject_test = reject; + t.add_cleanup(function(){ + cleanup(); + }); + var contentRect = content.getBoundingClientRect(); + var actions = new test_driver.Actions(); + actions_promise = actions + .pointerMove(Math.ceil(contentRect.x), Math.ceil(contentRect.y)) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + }).then(async()=>{ + await actions_promise; + t.done(); + }); + }, "PointerCapture works for custom element Shadow DOM."); + } + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-in-shadow-dom.html b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-in-shadow-dom.html new file mode 100644 index 0000000000..94636231a6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-in-shadow-dom.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<html> + <head> + <title>PointerCapture for Shadow DOM Elements</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width"> + <link rel="help" href= "https://bugs.chromium.org/p/chromium/issues/detail?id=810882"> + <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 onload="onLoad()"> + <template id="template"> + <style> + #content{ + height:100px; + width:100px; + background-color: lightgrey; + } + </style> + <div id="content"></div> + </template> + <h4>PointerCapture by Shadow DOM element</h4> + The light gray box below is part of Shadow DOM. + <ul> + <li> Click left mouse button inside the box and keep mouse button depressed </li> + <li> Move the mouse </li> + <li> There should be a message stating <em>Pointer was captured by Shadow DOM!</em></li> + <li> Release left mouse button + <li> There should be a message stating <em>Pointer was released by Shadow DOM!</em></li> + </ul> + <div id="shadowhost"></div> + <div id="log"></div> + <script> + function onLoad(){ + var logDiv = document.getElementById("log"); + function logMessage(message){ + var log = document.createElement("div"); + var messageNode = document.createTextNode(message); + log.appendChild(messageNode); + logDiv.appendChild(log); + } + var events = []; + + var host = document.getElementById("shadowhost"); + var shadowRoot = host.attachShadow({mode: "open"}); + var template = document.getElementById("template"); + var node = template.content.cloneNode(true); + shadowRoot.appendChild(node); + + var content = host.shadowRoot.getElementById("content"); + + content.addEventListener("pointerdown", function(e){ + content.setPointerCapture(e.pointerId); + events.push("pointerdown@content"); + }); + content.addEventListener("gotpointercapture", function(e){ + logMessage("Pointer was captured by Shadow DOM!"); + events.push("gotpointercapture@content"); + }); + content.addEventListener("pointerup", function(e){ + content.releasePointerCapture(e.pointerId); + events.push("pointerup@content"); + }); + content.addEventListener("lostpointercapture", function(e){ + logMessage("Pointer was released by Shadow DOM!"); + events.push("lostpointercapture@content"); + if(window.promise_test && shadow_dom_test){ + shadow_dom_test.step(function(){ + assert_array_equals(events, ["pointerdown@content", + "gotpointercapture@content", "pointerup@content", + "lostpointercapture@content"]); + resolve_test(); + }); + } + }); + + var shadow_dom_test = null; + var resolve_test = null; + var reject_test = null; + + function cleanup(){ + events = []; + shadow_dom_test = null; + resolve_test = null; + reject_test = null; + } + + if(window.promise_test){ + promise_test(async function(t){ + var actions_promise; + return new Promise(async function(resolve, reject){ + shadow_dom_test = t; + resolve_test = resolve; + reject_test = reject; + t.add_cleanup(function(){ + cleanup(); + }); + var contentRect = content.getBoundingClientRect(); + var actions = new test_driver.Actions(); + actions_promise = actions + .pointerMove(Math.ceil(contentRect.x), Math.ceil(contentRect.y)) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + }).then(async ()=>{ + await actions_promise; + t.done(); + }); + }, "PointerCapture works for Shadow DOM element."); + } + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-not-lost-in-chorded-buttons.html b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-not-lost-in-chorded-buttons.html new file mode 100644 index 0000000000..4f044f5533 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture-not-lost-in-chorded-buttons.html @@ -0,0 +1,225 @@ +<!doctype html> +<html> + <head> + <title>Set/Release capture when using chorded buttons</title> + <meta name="viewport" content="width=device-width"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1053385"> + <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> + + <style> + .container { + height: 500px; + width: 500px; + border: 1px solid black; + overflow: hidden; + position: relative; + } + + #box { + height: 50px; + width: 50px; + background: red; + position: absolute; + } + </style> + </head> + <body> + <h1>Pointer Events Capture Test - capture should not be lost early</h1> + <h4> + Test Description: This test checks if setCapture/pointerup functions + works properly. Complete the following actions: + <ol> + <li> Put your mouse over the red box + <li> Press and hold left mouse button. Box will call setPointerCapture + <li> Press right button and release + <li> Pointer capture should not be lost + <li> Press right button again and release + <li> Pointer capture should not be lost + <li> Release left mouse button. lostpointercapture is called + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + <div class="container"> + <div id="box"></div> + </div> + <div id="log"></div> + </body> + <script> + var PhaseEnum = { + WaitingForDown: "down", + WaitingForUp: "up", + UpDone : "up_done" + }; + + var origin = {x:0, y:0}; + var position = {x:0, y:0}; + var deltaX = 0; + var deltaY = 0; + var box = document.getElementById("box"); + var logDiv = document.getElementById("log"); + + var currentPhase = PhaseEnum.WaitingForDown; + var events = []; + + function slide(event){ + // move the target following the mouse + deltaX = event.clientX - origin.x + deltaY = event.clientY - origin.y + box.style.left = `${position.x + deltaX}px`; + box.style.top = `${position.y + deltaY}px`; + } + + function addLog(message){ + var messageDiv = document.createElement("div"); + var textContent = document.createTextNode(message); + messageDiv.appendChild(textContent); + logDiv.appendChild(messageDiv); + } + + function handle_pointerdown(e){ + box.setPointerCapture(e.pointerId); + if(window.promise_test){ + current_test.step(function(){ + // once receiving a pointer down and the pointer is captured, + // no other mousedown should send pointerdown events during the test + assert_equals(currentPhase, PhaseEnum.WaitingForDown, + "Current Phase should be " + PhaseEnum.WaitingForDown); + currentPhase = PhaseEnum.WaitingForUp; + events.push("target@pointerdown"); + }); + } + origin = { x: event.clientX, y: event.clientY }; + box.addEventListener("pointermove", slide); + } + + function handle_pointerup(e){ + box.releasePointerCapture(e.pointerId); + if(window.promise_test){ + current_test.step(function(){ + assert_equals(event.buttons, 0, + 'pointerup should happen when all buttons are released.'); + assert_equals(currentPhase, PhaseEnum.WaitingForUp, + "Current Phase should be " + PhaseEnum.WaitingForUp); + currentPhase = PhaseEnum.UpDone; + events.push("target@pointerup"); + }); + } + box.removeEventListener("pointermove", slide); + } + + function handle_contextmenu(e){ + e.preventDefault(); + } + + function handle_lostpointercapture(e){ + if(window.promise_test){ + current_test.step(function(){ + events.push("target@lostpointercapture"); + assert_equals(currentPhase, PhaseEnum.UpDone, + "Current Phase should be " + PhaseEnum.UpDone + "." + + 'lostpointercapture should happen after pointerup event.'); + assert_equals(event.buttons, 0, + 'lostpointercapture should happen when all buttons are released.'); + assert_array_equals(events, ["target@pointerdown", + "target@pointerup", "target@lostpointercapture"]); + resolve_test(); + current_test.done(); + }); + } + if(event.buttons === 0){ + addLog("Test Passed!"); + }else{ + addLog("Test Failed!"); + } + } + + function removeEventListeners(){ + box.removeEventListener('pointerdown', handle_pointerdown); + box.removeEventListener('pointerup', handle_pointerup); + box.removeEventListener('contextmenu', handle_contextmenu); + box.removeEventListener('lostpointercapture', + handle_lostpointercapture); + } + + function addEventListeners(){ + box.addEventListener('pointerdown', handle_pointerdown); + box.addEventListener('pointerup', handle_pointerup); + box.addEventListener('contextmenu', handle_contextmenu); + box.addEventListener('lostpointercapture', + handle_lostpointercapture); + } + + var current_test = null; + var resolve_test = null; + var reject_test = null; + // window.promise_test is only defined when running the + // test using testharness.js + // if window.promise_test is not defined we'll run the manual testing + // path + if(!window.promise_test){ + addEventListeners(); + } + + if(window.promise_test){ + promise_test(function(t){ + addEventListeners(); + t.add_cleanup(function(){ + removeEventListeners(); + currentPhase = PhaseEnum.WaitingForDown; + events = []; + }); + return new Promise(function(resolve, reject){ + current_test = t; + resolve_test = resolve; + reject_test = reject; + var actions = new test_driver.Actions(); + var actions_promise = actions + .pointerMove(0, 0, {origin: box}) + + .pointerDown({button: actions.ButtonType.LEFT}) + // Ensure clicking other buttons while a first button has + // captured the pointer doesn't release the capture + .pointerDown({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.RIGHT}) + .pointerDown({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + }) + }, "Pointer Events Capture Test - capture not lost due to " + + "chorded buttons interaction"); + + promise_test(function(t){ + addEventListeners(); + t.add_cleanup(function(){ + removeEventListeners(); + currentPhase = PhaseEnum.WaitingForDown; + events = []; + }); + return new Promise(function(resolve, reject){ + current_test = t; + resolve_test = resolve; + reject_test = reject; + var actions = new test_driver.Actions(); + var actions_promise = actions + .pointerMove(0, 0, {origin: box}) + + .pointerDown({button: actions.ButtonType.LEFT}) + // Ensure clicking other buttons while a first button has + // captured the pointer doesn't release the capture + .pointerDown({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerUp({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + }) + }, "Pointer Events Capture Test - capture not lost " + + "due to combination of left and right chorded buttons interaction."); + } + </script> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointercapture_in_frame.html b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture_in_frame.html new file mode 100644 index 0000000000..9edacd7d23 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointercapture_in_frame.html @@ -0,0 +1,254 @@ +<meta name="variant" content="?mouse"> +<meta name="variant" content="?touch"> +<meta name="variant" content="?pen"> +<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> +iframe { + width: 300px; + height: 300px; + top: 100px; + left: 100px; + border: 0; + position: absolute; + background: green; +} +#outerFrame { + width: 500px; + height: 500px; + background: blue; +} +body { + touch-action:none; +} +</style> +<body id="outerFrame body" onload="run()"> +<div id='outerFrame'> +<iframe id='innerFrameElement' src="resources/pointerevent_pointercapture-iframe.html"></iframe> +</div> +</body> +<script> +var receivedEventList = []; +// |start_logging| is set to true in the pointerdown event handler, and as such +// also tracks if pointerdown happened already in the test. +var start_logging = false; +var first_pointermove_happened = false; + +// Add a timeout promise when waiting for lostpointercapture and pointerup. +// We add this to make it easy to know which event wasn't fired on the right +// element. +var eventTimeout = ()=>(()=>new Promise((resolve, reject)=>{ + const msToWait = 4000; + let start; + function wait(timestamp){ + if(start === undefined) + start = timestamp; + if(timestamp - start < msToWait) + requestAnimationFrame(wait); + else + resolve(); + } + requestAnimationFrame(wait); +})); + + +function handleEvent(event) { + if (event.type == 'pointerdown') { + start_logging = true; + if (document.setPointerCaptureOnPointerDown) { + event.target.setPointerCapture(event.pointerId); + } + } + + // Only log the first pointermove event after pointerdown. We need to account + // for coalesced pointermove events and for the pointermove events that + // happen after lostpointercapture. + if (start_logging && (event.type !== "pointermove" || !first_pointermove_happened)) + receivedEventList.push(event.target.id + ' received ' + event.type); + + if (event.type == "pointermove"){ + if (document.releasePointerCaptureOnFirstMove && event.target.hasPointerCapture(event.pointerId)) + event.target.releasePointerCapture(event.pointerId); + if(start_logging) + first_pointermove_happened = true; + } +}; + +document.testEventList = ['pointerup', 'pointerdown', 'pointermove', 'gotpointercapture', 'lostpointercapture']; +document.testEventList.forEach(function(eventName) { + document.getElementById('outerFrame').addEventListener(eventName, handleEvent); +}); + +function Reset() { + document.setPointerCaptureOnPointerDown = false; + document.releasePointerCaptureOnFirstMove = false; + receivedEventList = []; + start_logging = false; + first_pointermove_happened = false; +} + +function run() { + var pointerType = location.search.substring(1); + promise_test (async(t) => { + Reset(); + document.setPointerCaptureOnPointerDown = true; + expectedEventList = ["innerFrame received pointerdown", + "innerFrame received gotpointercapture", + "innerFrame received pointermove", + "innerFrame received pointerup", + "innerFrame received lostpointercapture"]; + var pointerId = pointerType + "Pointer1"; + + var innerFrame = document.getElementById('innerFrameElement'); + var innerFrameDocument = innerFrame.contentDocument; + // We are interested in tracking events only after pointerdown + var pointerdown_happened = new Promise((resolve, reject)=>{innerFrameDocument.addEventListener("pointerdown",resolve);}); + var watcher_promise = pointerdown_happened.then(()=>{ + var watch_inner_frame = new EventWatcher(t, innerFrameDocument, ["lostpointercapture"], eventTimeout()); + return watch_inner_frame.wait_for(["lostpointercapture"]); + }); + + await new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(200, 200) + .pointerDown() + .pointerMove(150, 150) + .pointerMove(50, 50) + .pointerUp() + .pointerMove(75, 75) + .send(); + // Wait for lostpointercapture to fire. + await watcher_promise; + assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); + document.setPointerCaptureOnPointerDown = false; + }, "Test " + pointerType + "pointer capture in same-origin frame: Pointer down at inner frame and set pointer capture."); + + promise_test (async(t) => { + Reset(); + document.setPointerCaptureOnPointerDown = true; + expectedEventList = ["outerFrame received pointerdown", + "outerFrame received gotpointercapture", + "outerFrame received pointermove", + "outerFrame received pointerup", + "outerFrame received lostpointercapture"]; + var pointerId = pointerType + "Pointer1"; + + // We are interested in tracking events only after pointerdown + var pointerdown_happened = new Promise((resolve, reject)=>{document.getElementById('outerFrame').addEventListener("pointerdown",resolve);}); + var watcher_promise = pointerdown_happened.then(()=>{ + // For this test we're going to wait for both pointerup and lostpointercapture, + // as pointerup fires on innerFrame on Windows (see crbug.com/1186788) + var watch_outer_frame_for_pointerup = new EventWatcher(t, document.getElementById('outerFrame'), ["pointerup"], eventTimeout()); + return watch_outer_frame_for_pointerup.wait_for(["pointerup"]).then(()=>{ + var watch_outer_frame_for_lostpointercapture = new EventWatcher(t, document.getElementById('outerFrame'), ["lostpointercapture"], eventTimeout()); + return watch_outer_frame_for_lostpointercapture.wait_for(["lostpointercapture"]); + }); + }); + + await new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(25, 25) + .pointerDown() + .pointerMove(200, 200) + .pointerUp() + .pointerMove(25, 25) + .send(); + // Wait for lostpointercapture to fire. + await watcher_promise; + assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); + document.setPointerCaptureOnPointerDown = false; + }, "Test " + pointerType + "pointer capture in same-origin frame: Pointer down at outer frame body and set pointer capture."); + + + promise_test (async(t) => { + Reset(); + document.setPointerCaptureOnPointerDown = true; + document.releasePointerCaptureOnFirstMove = true; + // Mouse event has the frame capture, so after pointer capture released, events are + // dispatched to innerFrameDocument. + expectedEventList = ["innerFrame received pointerdown", + "innerFrame received gotpointercapture", + "innerFrame received pointermove", + "innerFrame received lostpointercapture", + (pointerType == "touch" ? "outerFrame": "innerFrameDocument") + " received pointerup",]; + var pointerId = pointerType + "Pointer1"; + + var innerFrame = document.getElementById('innerFrameElement'); + var innerFrameDocument = innerFrame.contentDocument; + // We are interested in tracking events only after pointerdown + var pointerdown_happened = new Promise((resolve, reject)=>{innerFrameDocument.addEventListener("pointerdown",resolve);}); + var watcher_promise = pointerdown_happened.then(()=>{ + if(pointerType === "touch"){ + var watch_outer_frame = new EventWatcher(t, document.getElementById('outerFrame'), ["pointerup"], eventTimeout()); + return watch_outer_frame.wait_for("pointerup"); + }else{ + var watch_inner_frame = new EventWatcher(t, innerFrameDocument, ["pointerup"], eventTimeout()); + return watch_inner_frame.wait_for("pointerup"); + } + }); + + await new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(200, 200) + .pointerDown() + .pointerMove(150, 150) + .pointerMove(50, 50) + .pointerUp() + .pointerMove(150, 150) + .send(); + // Wait for pointerup to fire. + await watcher_promise; + assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); + document.releasePointerCaptureOnFirstMove = false; + document.setPointerCaptureOnPointerDown = false; + }, "Test " + pointerType + "pointer capture in same-origin frame: Pointerdown with set capture at inner frame, then release on next pointermove."); + + + promise_test (async(t) => { + Reset(); + document.setPointerCaptureOnPointerDown = true; + document.releasePointerCaptureOnFirstMove = true; + expectedEventList = ["outerFrame received pointerdown", + "outerFrame received gotpointercapture", + "outerFrame received pointermove", + "outerFrame received lostpointercapture", + "innerFrame received pointerup"]; + var pointerId = pointerType + "Pointer1"; + + var innerFrame = document.getElementById('innerFrameElement'); + var innerFrameDocument = innerFrame.contentDocument; + // We are interested in tracking events only after pointerdown + var pointerdown_happened = new Promise((resolve, reject)=>{document.getElementById('outerFrame').addEventListener("pointerdown",resolve);}); + var watcher_promise = pointerdown_happened.then(()=>{ + var watch_inner_frame = new EventWatcher(t, innerFrameDocument, ["pointerup"], eventTimeout()); + return watch_inner_frame.wait_for(["pointerup"]); + }); + + await new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(50, 50) + .pointerDown() + .pointerMove(200, 200) + // Pause here to make sure that the previous and following pointer moves + // are not coalesced. If they are coalesced, we will not see the second + // move event which is when the pending lostpointercapture should be fired + // (Since the pointerup event is targeted at a different frame, it won't dispatch + // the pending lostpointercapture event). + .pause(300) + .pointerMove(250, 250) + .pointerUp() + .send(); + // Wait for pointerup to fire. + await watcher_promise; + assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList); + document.releasePointerCaptureOnFirstMove = false; + document.setPointerCaptureOnPointerDown = false; + }, "Test " + pointerType + "pointer capture in same-origin frame: Pointerdown with set capture at outer frame, then release on next pointermove."); +} +</script> + +</body> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerenter_does_not_bubble.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerenter_does_not_bubble.html new file mode 100644 index 0000000000..5193e7ab0b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerenter_does_not_bubble.html @@ -0,0 +1,102 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: The pointerenter event does not bubble </title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <meta name="assert" content="The pointerenter event must not bubble up to parent elements."/> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <!-- /resources/testharness.js --> + <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 type="text/javascript"> + var detected_pointertypes = {}; + var test_pointerEvent = async_test("pointerEnter event does not bubble"); // set up test harness + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var pointerenter_event = null; + + function run() { + var target0 = document.getElementById("target0"); + var parent0 = document.getElementById("parent0"); + var actions_promise; + + on_event(target0, "pointerenter", function (event) { + pointerenter_event = event; + + test_pointerEvent.step(function () { + assert_equals(event.type, "pointerenter", "pointer event received: " + event.type); + assert_false(event.bubbles, "pointerenter event.bubbles should be false: " + event.bubbles); + }); + }); + on_event(target0, "pointerout", function (event) { + test_pointerEvent.step(function () { + assert_not_equals(pointerenter_event, null, "pointerout event was never received: "); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // parent + on_event(parent0, "pointerenter", function (event) { + detected_pointertypes[event.pointerType] = true; + test_pointerEvent.step(function () { + assert_equals(event.target.id, "parent0", "Recieved " + event.type + " in parent for " + event.target.id); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerMove(-10, -10, {origin: target0}) + .pointerMove(-20, -20, {origin: target0}) + .pointerMove(0, 0) + .send(); + } + + </script> + <style> + #target0 { + background: purple; + border: 1px solid orange; + width:50px; + height:50px; + } + #parent0 { + background: black; + border: 1px solid orange; + width:100px; + height:100px; + } + </style> + </head> + <body onload="run()"> + <h1> Pointer Event: pointerenter does not bubble</h1> + <h4> + Test Description: + The pointerenter event must not bubble up to parent elements. + </h4> + <div id="instructions"> + Use the mouse or pen to hover over then out of the purple box nested in the black box. Or with touch, tap on the purple box. + </div> + <div id="parent0"> + <div id="target0"></div> + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_after_pointercancel_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_after_pointercancel_touch.html new file mode 100644 index 0000000000..8425667a10 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_after_pointercancel_touch.html @@ -0,0 +1,72 @@ +<!doctype html> +<html> + <head> + <title>pointerleave after pointercancel</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 class="scrollable" onload="run()"> + <h2>pointerleave after pointercancel</h2> + <h4>Test Description: This test checks if pointerleave event triggers after pointercancel. Start touch on the black rectangle and move your touch to scroll in any direction. </h4> + <p>Note: this test is for touch devices only</p> + <div id="target0"></div> + <script> + var test_pointerleave = async_test("pointerleave event received"); + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var pointercancel_event = null; + var detected_pointertypes = {}; + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + on_event(target0, "pointercancel", function (event) { + detected_pointertypes[event.pointerType] = true; + pointercancel_event = event; + }); + + // After firing the pointercancel event the pointerleave event must be dispatched. + // TA: 4.3.1 + on_event(target0, "pointerleave", function (event) { + if(event.pointerType == 'touch') { + if(pointercancel_event != null) { + test_pointerleave.step(function() { + assert_equals(event.pointerType, pointercancel_event.pointerType, "pointerType is same for pointercancel and pointerleave"); + assert_equals(event.isPrimary, pointercancel_event.isPrimary, "isPrimary is same for pointercancel and pointerleave"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerleave.done(); + }); + } + else { + test_pointerleave.step(function() { + assert_unreached("pointerleave received before pointercancel"); + }, "pointerleave received before pointercancel"); + } + } + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down'); + } + + </script> + <h1>Pointer Events pointerleave tests</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendant_over.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendant_over.html new file mode 100644 index 0000000000..ae348307b4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendant_over.html @@ -0,0 +1,77 @@ +<!doctype html> +<html> + <head> + <title>pointerleave + descendant</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 src="pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h1>pointerleave</h1> + <h4> + Test Description: This test checks if pointerleave event works properly. + <ol> + <li>Put your mouse over the black rectangle + <li>Then move it into the purple rectangle + <li>Click on the purple rectangle to complete the test + </ol> + Note: when you entered the black rectangle once don't leave it before the end of the test to get proper results. + </h4> + <p> + <div id="target0" style="background:black"> + <div id="target1" style="background:purple"></div> + </div> + <script> + var eventTested = false; + var pointerleaveReceived = false; + var detected_pointertypes = {}; + var test_pointerleave = async_test("pointerleave shouldn't be received on descendant's pointerover"); + var actions_promise; + + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + // The pointerleave event must not be dispatched when the pointer enters a child element without leaving the hit test boundaries of the parent. (as distinct from pointerout) + // TA: 9.2 + on_event(target1, "pointerdown", function(event) { + detected_pointertypes[event.pointerType] = true; + + test_pointerleave.step(function() { + assert_true(!pointerleaveReceived, "pointerleave shouldn't be received on descendant's pointerover"); + }, "pointerleave shouldn't be received on descendant's pointerover"); + actions_promise.then( () => { + test_pointerleave.done(); + }); + }); + + on_event(target0, "pointerleave", function (event) { + if (eventTested == false) { + pointerleaveReceived = true; + eventTested = true; + } + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerMove(0, 0, {origin: target1}) + .pointerDown() + .pointerUp() + .send(); + } + </script> + <h1>Pointer Events pointerleave 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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendants.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendants.html new file mode 100644 index 0000000000..6133b05c64 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendants.html @@ -0,0 +1,63 @@ +<!doctype html> +<html> + <head> + <title>Pointerleave + descendant</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 src="pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h1>pointerleave</h1> + <h4> + Test Description: This test checks if pointerleave event works properly. + <p>Put your mouse over the black rectangle and then move it out through purple rectangle boundaries.</p> + </h4> + <p> + <div id="target0" style="background:black; height: 47px;"> + <div style="background:purple; height: 35px; width: 90%; position: absolute"></div> + </div> + <script> + var detected_pointertypes = {}; + + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var target1 = document.querySelector("#target0 > div"); + var test_pointerleave = async_test("pointerleave event received"); + var actions_promise; + + on_event(target0, "pointerover", function(event) { + detected_pointertypes[ event.pointerType ] = true; + }); + + // When a pointing device is moved off of the hit test boundaries of an element and all of its descendants, the pointerleave event must be dispatched. + // TA: 9.1 + on_event(target0, "pointerleave", function (event) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerleave.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerMove(0, 0, {origin: target1}) + .pointerMove(0, 0) + .send(); + } + </script> + <h1>Pointer Events pointerleave 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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_does_not_bubble.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_does_not_bubble.html new file mode 100644 index 0000000000..50af44cfba --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_does_not_bubble.html @@ -0,0 +1,90 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: The pointerleave event does not bubble </title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <meta name="assert" content="The pointerleave event must not bubble up to parent elements."/> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <!-- /resources/testharness.js --> + <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 type="text/javascript"> + var detected_pointertypes = {}; + var test_pointerEvent = async_test("pointerLeave event does not bubble"); // set up test harness + var actions_promise; + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var parent0 = document.getElementById("parent0"); + + on_event(target0, "pointerleave", function (event) { + detected_pointertypes[event.pointerType] = true; + + test_pointerEvent.step(function () { + assert_equals(event.type, "pointerleave", "pointer event received: " + event.type); + assert_false(event.bubbles, "pointerleave event.bubbles should be false: " + event.bubbles); + }); + }); + + on_event(parent0, "pointerleave", function (event) { + test_pointerEvent.step(function () { + assert_equals(event.target.id, "parent0", "Recieved " + event.type + " in parent for " + event.target.id); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerMove(0, 0) + .send(); + } + </script> + <style> + #target0 { + background: purple; + border: 1px solid orange; + width:50px; + height:50px; + } + #parent0 { + background: black; + border: 1px solid orange; + width:100px; + height:100px; + } + </style> + </head> + <body onload="run()"> + <h1> Pointer Event: pointerleave does not bubble</h1> + <h4> + Test Description: + The pointerleave event must not bubble up to parent elements. + </h4> + <div id="instructions"> + Use the mouse or pen to hover over then out of the purple box nested in the black box. Or with touch, tap on the purple box. + </div> + <div id="parent0"> + <div id="target0"></div> + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_pen-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_pen-manual.html new file mode 100644 index 0000000000..d0d8dd3682 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_pen-manual.html @@ -0,0 +1,72 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Dispatch pointerleave (pen). </title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <meta name="assert" content="When a pointing device that supports hover (pen stylus) leaves the range of the digitizer while over an element, the pointerleave event must be dispatched."/> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <!-- /resources/testharness.js --> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="pointerevent_support.js"></script> + <script type="text/javascript"> + var detected_pointertypes = {}; + var test_pointerEvent = async_test("pointerleave event"); // set up test harness + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var count = 0; + + on_event(target0, "pointerenter", function (event) { + test_pointerEvent.step(function () { + assert_equals(event.pointerType, "pen", "Test should be run using a pen as input"); + assert_equals(event.type, "pointerenter", "The " + event.type + " event was received"); + assert_equals(event.isPrimary, true, "The " + event.type + ".isPrimary is true"); + }); + }); + + on_event(target0, "pointerleave", function (event) { + count++; + detected_pointertypes[event.pointerType] = true; + if (count == 1) + check_PointerEvent(event); + + test_pointerEvent.step(function () { + assert_equals(event.pointerType, "pen", "Test should be run using a pen as input"); + assert_equals(event.type, "pointerleave", "The " + event.type + " event was received"); + assert_equals(event.isPrimary, true, "The " + event.type + ".isPrimary is true"); + assert_true((event.clientX > target0.getBoundingClientRect().left)&& + (event.clientX < target0.getBoundingClientRect().right)&& + (event.clientY > target0.getBoundingClientRect().top)&& + (event.clientY < target0.getBoundingClientRect().bottom), + "pointerleave should be received inside of target bounds"); + }); + if (count >= 2) + test_pointerEvent.done(); // complete test + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: Dispatch pointerleave (pen)</h1> + <h4> + Test Description: + When a pointing device that supports hover (pen stylus) leaves the range of the digitizer while over an element, the pointerleave event must be dispatched. In addition, all the pointer events' isPrimary should always be true when the pointing device leaves and enters the range of the digitizer again. + </h4> + <br /> + <div id="target0"> + Use a pen to hover over then lift up away from this element, and repeat it again. + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointermove.html b/testing/web-platform/tests/pointerevents/pointerevent_pointermove.html new file mode 100644 index 0000000000..c7e798b087 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointermove.html @@ -0,0 +1,50 @@ +<!doctype html> +<html> + <head> + <title>Pointermove</title> + <meta name="viewport" content="width=device-width"> + <meta name="assert" content="When a pointer changes coordinates, 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 triggers. Move your mouse over the black rectangle or slide it if you are using touchscreen.</h4> + <div id="target0" style="background:black"></div> + <script> + var detected_pointertypes = {}; + var test_pointermove = async_test("pointermove event received"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + // When a pointer changes coordinates, the pointermove event must be dispatched. + // TA: 5.3 + on_event(target0, "pointermove", function (event) { + detected_pointertypes[event.pointerType] = true; + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointermove.done(); + }); + }); + + // Inject the inputs to run this test. + actions_promise = new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send(); + } + </script> + <h1>Pointer Events pointermove 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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointermove_isprimary_same_as_pointerdown.html b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_isprimary_same_as_pointerdown.html new file mode 100644 index 0000000000..3073076a49 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_isprimary_same_as_pointerdown.html @@ -0,0 +1,85 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: pointermove has same isPrimary as last pointerdown with the same pointerId</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <meta name="assert" content="The isPrimary attribute of a pointermove event must have the same value as the isPrimary attribute of the last pointerdown event with the same pointerId attribute."/> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <!-- /resources/testharness.js --> + <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 type="text/javascript"> + var detected_pointertypes = {}; + var test_pointerEvent = async_test("pointermove has same isPrimary as last pointerdown"); // set up test harness + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var pointermove_event = null; + var pointerdown_event = null; + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + on_event(target0, "pointermove", function (event) { + if (pointerdown_event != null) { + test_pointerEvent.step(function () { + assert_equals(event.pointerId, pointerdown_event.pointerId, "pointermove.pointerId should be the same as pointerdown.pointerId."); + assert_equals(event.isPrimary, pointerdown_event.isPrimary, "pointermove.isPrimary should be the same as pointerdown.isPrimary."); + }); + pointermove_event = event; + } + }); + + on_event(target0, "pointerdown", function (event) { + pointerdown_event = event; + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, "pointerup", function (event) { + test_pointerEvent.step(function () { + assert_not_equals(pointermove_event, null, "pointermove event was never received: "); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // Dispatch a mouse drag in target0. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(3, 3, {origin: target0}) + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: pointermove has the same isPrimary as last pointerdown with the same pointerId</h1> + <h4>Test Description: + The isPrimary attribute of a pointermove event must have the same value as the isPrimary attribute of the last pointerdown event with the same pointerId attribute. + </h4> + <div id="instructions"> + Press and hold a mouse button, touch contact or pen contact on this element. Move around inside the element while maintaining contact/button down. Only use one device per test run. + <p>Lift off of the element to complete the test.</p> + </div> + <div id="target0" style="touch-action: none;"> + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointermove_on_chorded_mouse_button.html b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_on_chorded_mouse_button.html new file mode 100644 index 0000000000..b5c1803f3d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_on_chorded_mouse_button.html @@ -0,0 +1,90 @@ +<!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>Put your mouse over the black rectangle</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("pointermove events received for button state changes"); + add_completion_callback(showPointerTypes); + + var step = 0; + var firstButton = 0; + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + // 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) { + 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) { + 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) { + 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.");}); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointermove.done(); + }); + }); + + // Click on both left and middle buttons. + var actions = new test_driver.Actions(); + actions_promise = actions.pointerMove(0, 0, {origin: target0, button: actions.ButtonType.LEFT}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerDown({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + } + </script> + <h1>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/pointerevent_pointerout_after_pointercancel_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_after_pointercancel_touch.html new file mode 100644 index 0000000000..782289384a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_after_pointercancel_touch.html @@ -0,0 +1,73 @@ +<!doctype html> +<html> + <head> + <title>pointerout</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 class="scrollable" onload="run()"> + <h2>pointerout</h2> + <h4>Test Description: This test checks if pointerout event triggers after pointercancel. Start touch on the black rectangle and move your touch to scroll in any direction. </h4> + <p>Note: this test is for touch devices only</p> + <div id="target0"></div> + <script> + var test_pointerout = async_test("pointerout event received"); + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var pointercancel_event = null; + var detected_pointertypes = {}; + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + on_event(target0, "pointercancel", function (event) { + detected_pointertypes[event.pointerType] = true; + pointercancel_event = event; + }); + + // After firing the pointercancel event the pointerout event must be dispatched. + // TA: 4.3 + on_event(target0, "pointerout", function (event) { + if(event.pointerType == 'touch') { + if(pointercancel_event != null) { + test_pointerout.step(function() { + assert_equals(event.pointerType, pointercancel_event.pointerType, "pointerType is same for pointercancel and pointerout"); + assert_equals(event.isPrimary, pointercancel_event.isPrimary, "isPrimary is same for pointercancel and pointerout"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerout.done(); + }); + } + else { + test_pointerout.step(function() { + assert_true(false, + "pointercancel received before pointerout"); + }, "pointercancel received before pointerout"); + } + } + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down'); + } + + </script> + <h1>Pointer Events pointerout tests</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerout_no_pointer_movement.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_no_pointer_movement.html new file mode 100644 index 0000000000..856f2ce37c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_no_pointer_movement.html @@ -0,0 +1,85 @@ +<!doctype html> +<html> +<head> +<title>The pointerout event should not be fired if the pointer doesn't move</title> +<meta name="viewport" content="width=device-width"> +<link rel="help" href="https://github.com/w3c/pointerevents/issues/457"> +<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> +<style> +#target{ + width:100px; + height:100px; + background-color:red; +} + +#overlay{ + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0,0,0,0.2); + z-index: 1000; + text-align: center; + display:none; +} +</style> +</head> +<body> +<h1>The pointerout event should not be fired if the pointer doesn't move</h1> +<h4> + Test Description: This test checks if the pointerout event dispatched unexpectedly. + <ol> + <li>Click on the black rectangle. + <li>Don't move mouse after clicking. + </ol> +</h4> +<p> +<div id="target"></div> +<div id="overlay"></div> +<div id="log"></div> +<script> +function waitForAnimationFrame() { + return new Promise(resolve => { + requestAnimationFrame(() => { + requestAnimationFrame(resolve); + }); + }); +} + +promise_test(async () => { + const target = document.getElementById("target"); + + let out_event_count = 0; + target.addEventListener("pointerout", function() { + out_event_count++; + }); + + // Wait for the click event on target element and update display style on + // overlay element. + const promise = new Promise(resolve => { + target.addEventListener("click", async function() { + const overlay = document.getElementById("overlay"); + overlay.style.display= 'block'; + await waitForAnimationFrame(); + + overlay.style.display= 'none' + await waitForAnimationFrame(); + + resolve(); + }, { once: true }); + }); + + // Click target. + test_driver.click(target); + await promise; + + assert_equals(out_event_count, 0, "The pointerout event should not be fired"); +}, "The pointerout event should not be fired if the pointer doesn't move"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerout_pen.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_pen.html new file mode 100644 index 0000000000..210055e653 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_pen.html @@ -0,0 +1,67 @@ +<!doctype html> +<html> + <head> + <title>pointerout</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>pointerout</h2> + <h4>Test Description: This test checks if pointerout event triggers for pen. Place your pen over the black rectangle and then pull the pen out of the digitizer's detectable range. </h4> + <p>Note: this test is for devices that support hover - for pen only</p> + <div id="target0"></div> + <script> + var test_pointerout = async_test("pointerout event received"); + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var isPointerupReceived = false; + var detected_pointertypes = {}; + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + // When a pen stylus leaves the hover range detectable by the digitizer the pointerout event must be dispatched. + // TA: 7.2 + on_event(target0, "pointerout", function (event) { + detected_pointertypes[event.pointerType] = true; + if(event.pointerType == 'pen') { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerout.done(); + }); + } + else { + test_pointerout.step(function() { + assert_true(false, + "you have to use pen for this test"); + }, "you have to use pen for this test"); + } + }); + + // Inject pen inputs. + actions_promise = new test_driver.Actions() + .addPointer("PenPointer1", "pen") + .pointerMove(0, 0, {origin: target0}) + .pointerMove(0, 0) + .send(); + } + + </script> + <h1>Pointer Events pointerout tests</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerout_received_once.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_received_once.html new file mode 100644 index 0000000000..ebc2e545ce --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_received_once.html @@ -0,0 +1,71 @@ +<!doctype html> +<html> + <head> + <title>pointerout received just once</title> + <meta name="timeout" content="long"> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <meta name="viewport" content="width=device-width"> + <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 src="pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h1>pointerout received just once</h1> + <h4> + Test Description: This test checks if pointerout event dispatched properly. + <ol> + <li>Put your mouse over the black rectangle. + <li>Move your mouse out of the black rectangle + </ol> + </h4> + <p> + <div id="target0" style="background:black"></div> + <script> + var pointeroutCounter = 0; + var detected_pointertypes = {}; + var actions_promise; + + setup({ explicit_done: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + // When a mouse passes through dispatches one event + // TA: 7.4 + on_event(target0, "pointerover", function (event) { + pointeroutCounter = 0; + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, "pointerout", function (event) { + pointeroutCounter++; + + step_timeout(function() { + test(function() { + assert_equals(pointeroutCounter, 1, "pointerout received just once") + }, "pointerout received just once"); + actions_promise.then( () => { + done(); + }); + }, 5000); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerMove(0, 0) + .send(); + } + </script> + <h1>Pointer Events pointerout received once test</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 with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerrawupdate.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerrawupdate.html new file mode 100644 index 0000000000..74c14d932f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerrawupdate.html @@ -0,0 +1,69 @@ +<!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. </h4> + <p>Move your mouse within the black box.</p> + <p>Press left button down and then press middle button while holding down left button. Then release the buttons</p> + <div id="target0"></div> + <script> + var test_pointerrawupdate = async_test("pointerrawupdate event received"); + var actions_promise; + + var pointerrawupdateReceived = false; + var pointerdownReceived = false; + var pointerrawupdateFromButtonChangeReceived = false; + + function run() { + var target0 = document.getElementById("target0"); + + on_event(target0, "pointerrawupdate", function (event) { + pointerrawupdateReceived = true; + if (pointerdownReceived && event.button != -1) + pointerrawupdateFromButtonChangeReceived = true; + }); + on_event(target0, "pointermove", function (event) { + test_pointerrawupdate.step(function() { + assert_true(pointerrawupdateReceived, + "Pointerrawupdate event should have been received before pointermove."); + }, "Pointerrawupdate event should have been received before pointermove."); + }); + on_event(target0, "pointerdown", function (event) { + pointerdownReceived = true; + }); + on_event(target0, "pointerup", function (event) { + test_pointerrawupdate.step(function() { + assert_true(pointerrawupdateFromButtonChangeReceived, + "Pointerrawupdate event should have been received from chorded button changes."); + }, "Pointerrawupdate event should have been received from chorded button changes."); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerrawupdate.done(); + }); + }); + var actions = new test_driver.Actions(); + actions_promise = actions.pointerMove(0, 0, {origin: target0, button: actions.ButtonType.LEFT}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerDown({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.LEFT}) + .send(); + } + + </script> + <div id="complete-notice"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_predicted_events_attributes-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_predicted_events_attributes-manual.html new file mode 100644 index 0000000000..1276d3657f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_predicted_events_attributes-manual.html @@ -0,0 +1,149 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events predicted events count and properties<</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> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="pointerevent_support.js"></script> + <script> + var eventList = All_Pointer_Events; + PhaseEnum = { + WaitingForCancel: 0, + WaitingForOver: 1, + WaitingForEnter: 2, + WaitingForDown: 3, + WaitingForMove: 4, + WaitingForUp: 5, + WaitingForOut: 6, + WaitingForLeave: 7, + Done: 8, + }; + var phase = PhaseEnum.WaitingForCancel; + var move_event_count = 0; + + function resetTestState() { + phase = PhaseEnum.WaitingForCancel; + } + function expect_no_predicted_events(event, eventName) { + test(function () { + assert_equals(event.getPredictedEvents().length, 0, eventName + ' should not have any predicted events'); + }, expectedPointerType + ' ' + eventName + ' should not have any predicted events'); + } + function run() { + var test_pointerEvent = setup_pointerevent_test("predicted events attributes in pointerevents", ['touch']); + var target0 = document.getElementById("target0"); + var target1 = document.getElementById("target1"); + + on_event(target0, 'pointercancel', function (event) { + if (phase == PhaseEnum.WaitingForCancel) { + expect_no_predicted_events(event, 'pointercancel'); + phase++; + } + }); + eventList.forEach(function(eventName) { + on_event(target1, eventName, function (event) { + switch (phase) { + case PhaseEnum.WaitingForOver: + if (eventName == 'pointerover') { + expect_no_predicted_events(event, eventName); + phase++; + } + break; + case PhaseEnum.WaitingForEnter: + if (eventName == 'pointerenter') { + expect_no_predicted_events(event, eventName); + phase++; + } + break; + case PhaseEnum.WaitingForDown: + if (eventName == 'pointerdown') { + expect_no_predicted_events(event, eventName); + phase++; + setTimeout(function(){ + // This is just a way to block the main thread. + var current = new Date().getTime(); + for (; new Date().getTime() - current < 500;); + }, 0); + } + break; + case PhaseEnum.WaitingForMove: + if (eventName == 'pointermove') { + if (event.getPredictedEvents().length > 0) { + var predictedEvents = event.getPredictedEvents(); + test (function() { + for (var i=0; i<predictedEvents.length; i++) { + assert_equals(predictedEvents[i].isTrusted, true, 'isTrusted flag should be true for predicted events.'); + if (i > 0) + assert_greater_than_equal(predictedEvents[i].timeStamp, predictedEvents[i-1].timeStamp, 'Time stamps of predicted events must be ascending.'); + } + }, expectedPointerType + ' pointermove predicted events should all be marked as trusted.'); + test (function() { + for (var i=1; i<predictedEvents.length; i++) + assert_greater_than_equal(predictedEvents[i].timeStamp, predictedEvents[i-1].timeStamp, 'Time stamps of predicted events must be ascending.'); + }, expectedPointerType + ' time stamps of predicted events must be ascending.'); + test (function() { + for (var i=0; i<predictedEvents.length; i++) { + assert_equals(predictedEvents[i].bubbles, false, 'Bubbles attribute should be false for predicted events.'); + assert_equals(predictedEvents[i].cancelable, false, 'Cancelable attribute should be false for predicted events.'); + } + }, expectedPointerType + ' pointermove predicted events should all bubbles and cancelable as false.'); + phase++; + } else { + assert_less_than(move_event_count++, 20, "pointermove have no predicted event in 20 moves") + } + } + break; + case PhaseEnum.WaitingForUp: + if (eventName == 'pointerup') { + expect_no_predicted_events(event, eventName); + phase++; + } + break; + case PhaseEnum.WaitingForOut: + if (eventName == 'pointerout') { + expect_no_predicted_events(event, eventName); + phase++; + } + break; + case PhaseEnum.WaitingForLeave: + if (eventName == 'pointerleave') { + expect_no_predicted_events(event, eventName); + phase++; + test (function() { + assert_true(false); + }) + test_pointerEvent.done(); + } + break; + } + }); + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events predicted events count and properties</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks the predicted events of all types of pointer events. + <ol> + <li>Pointer down in the black square and drag inside the black square immediately</li> + <li>Release the pointer.</li> + <li>Pointer down in the purple square and drag inside the purple square immediately</li> + <li>Release the pointer and move out of the purple square</li> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="target0"></div> + <div id="target1" class="touchActionNone"></div> + <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 with a different pointer type.</p> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_events_to_original_target.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_events_to_original_target.html new file mode 100644 index 0000000000..325b58c85c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_events_to_original_target.html @@ -0,0 +1,151 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: releasePointerCapture() - subsequent events follow normal hitting testing mechanisms</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?touch"> + <meta name="variant" content="?pen"> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <meta name="assert" content="After invoking the releasePointerCapture method on an element, subsequent events for the specified pointer must follow normal hit testing mechanisms for determining the event target"/> + <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 type="text/javascript"> + var inputSource = location.search.substring(1); + var test_pointerEvent; + var detected_pointertypes = {}; + var captured_event = null; + var test_done = false; + var overEnterEventsFail = false; + var outLeaveEventsFail = false; + var f_gotPointerCapture = false; + var f_lostPointerCapture = false; + var actions_promise; + + function resetTestState() { + captured_event = null; + test_done = false; + overEnterEventsFail = false; + outLeaveEventsFail = false; + f_gotPointerCapture = false; + f_lostPointerCapture = false; + } + + function listenerEventHandler(event) { + if (test_done) + return; + detected_pointertypes[event.pointerType] = true; + if (event.type == "gotpointercapture") { + f_gotPointerCapture = true; + check_PointerEvent(event); + } + else if (event.type == "lostpointercapture") { + f_lostPointerCapture = true; + f_gotPointerCapture = false; + check_PointerEvent(event); + } + else if(event.type == "pointerover" || event.type == "pointerenter") { + if(captured_event && !overEnterEventsFail) { + test(function() { + assert_false(f_gotPointerCapture, "pointerover/enter should be received before the target receives gotpointercapture even when the pointer is not over it."); + }, expectedPointerType + " pointerover/enter should be received before the target receives gotpointercapture even when the pointer is not over it."); + overEnterEventsFail = true; + } + } + else if(event.type == "pointerout" || event.type == "pointerleave") { + if(!outLeaveEventsFail) { + test(function() { + assert_true(f_lostPointerCapture, "pointerout/leave should not be received unless the target just lost the capture."); + }, expectedPointerType + " pointerout/leave should not be received unless the target just lost the capture."); + outLeaveEventsFail = true; + } + } + else if (event.pointerId == captured_event.pointerId) { + if (f_gotPointerCapture && event.type == "pointermove") { + // on first event received for capture, release capture + listener.releasePointerCapture(event.pointerId); + } + else { + // if any other events are received after releaseCapture, then the test fails + test(function () { + assert_unreached(event.target.id + "-" + event.type + " should be handled by target element handler"); + }, expectedPointerType + " No other events should be recieved by capturing node after release"); + } + } + } + + function targetEventHandler(event) { + if (test_done) + return; + if (f_gotPointerCapture) { + if(event.type != "pointerout" && event.type != "pointerleave") { + test(function () { + assert_unreached("The Target element should not have received any events while capture is active. Event recieved:" + event.type + ". "); + }, expectedPointerType + " The target element should not receive any events while capture is active"); + } + } + + if (event.type == "pointerdown") { + // pointerdown event received will be used to capture events. + listener.setPointerCapture(event.pointerId); + captured_event = event; + } + + if (f_lostPointerCapture) { + test_pointerEvent.step(function () { + assert_equals(event.pointerId, captured_event.pointerId, "pointerID is same for event captured and after release"); + }); + if (event.type == "pointerup") { + test_done = true; + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + } + } + } + + function run() { + test_pointerEvent = setup_pointerevent_test("got/lost pointercapture: subsequent events to target", [inputSource]); // set up test harness + var listener = document.getElementById("listener"); + var target0 = document.getElementById("target0"); + target0.style["touchAction"] = "none"; + + // target0 and listener - handle all events + for (var i = 0; i < All_Pointer_Events.length; i++) { + on_event(target0, All_Pointer_Events[i], targetEventHandler); + on_event(listener, All_Pointer_Events[i], listenerEventHandler); + } + + // Inject pointer inputs. + actions_promise = pointerDragInTarget(inputSource, target0, 'right'); + } + </script> + </head> + <body onload="run()"> + <h2 id="pointerTypeDescription"></h2> + <div id="listener"></div> + <h1>Pointer Event: releasePointerCapture() - subsequent events follow normal hitting testing mechanisms</h1> + <h4> + Test Description: + Use your pointer and press down in the black box. Then move around in the box and release your pointer. + After invoking the releasePointerCapture method on an element, subsequent events for the specified + pointer must follow normal hit testing mechanisms for determining the event target. + </h4> + <br /> + <div id="target0"> + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_invalid_pointerid.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_invalid_pointerid.html new file mode 100644 index 0000000000..71de198089 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_invalid_pointerid.html @@ -0,0 +1,86 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: releasePointerCapture DOMException - NotFoundError</title> + <meta name="timeout" content="long"> + <meta name="assert" content="releasePointerCapture DOMException - NotFoundError"/> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> + <link rel="help" href="http://www.w3.org/wiki/PointerEvents/TestAssertions"> + <meta name="assert" content="When the releasePointerCapture method is invoked, if the provided pointerId value does not match any of the active pointers, a DOMException with the name NotFoundError must be thrown."/> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <!-- /resources/testharness.js --> + <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 type="text/javascript"> + var detected_pointertypes = {}; + var test_pointerEvent = async_test("releasePointerCapture: DOMException NotFoundError"); // set up test harness + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var INVALID_POINTERID = 314159265358973923; + var actions_promise; + + function run() { + var target0 = document.getElementById("target0"); + target0.style["touchAction"] = "none"; + var listener = document.getElementById("listener"); + + // try to release pointer capture with an invalid id + on_event(listener, "pointermove", function (event) { + detected_pointertypes[event.pointerType] = true; + + test_pointerEvent.step(function() { + assert_throws_dom("NotFoundError", function(){ listener.releasePointerCapture(INVALID_POINTERID); }, + "It should not be possible to release capture an invalid pointer id"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // set pointer capture + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[event.pointerType] = true; + listener.setPointerCapture(event.pointerId); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(10, 0, {origin: target0}) + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <div id="listener"></div> + <h1> Pointer Event: releasePointerCapture() DOMException - NotFoundError</h1> + <h4> + Test Description: + Upon invocation of the releasePointerCapture method, if the provided pointerId value does not match any of the + active pointers, a DOMException with the name NotFoundError must be thrown. + </h4> + <br /> + <div id="target0"> + Use the mouse, touch or pen to move over or contact this box. + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch.html new file mode 100644 index 0000000000..c54ee2a9d4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch.html @@ -0,0 +1,87 @@ +<!doctype html> +<html> + <head> + <title>Release capture on pointercancel</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 src="pointerevent_support.js"></script> + </head> + <body class="scrollable"> + <h1>Pointer Events Capture Test - release capture on pointercancel</h1> + <h4> + Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions: + <ol> + <li> Touch black rectangle and do not release your touch + <li> Move your touch to scroll the page. "lostpointercapture" should be logged inside of the black rectangle immediately after "pointercancel" + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + <div id="target0" style="background:black; color:white"></div> + + <script type='text/javascript'> + var pointercancelGot = false; + var count=0; + var event_log = []; + var detected_pointertypes = {}; + var test_pointerEvent = async_test("pointer capture is released on pointercancel"); + + var target0 = document.getElementById('target0'); + var actions_promise; + + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + window.onload = function() { + on_event(target0, 'pointerdown', function(e) { + detected_pointertypes[e.pointerType] = true; + test_pointerEvent.step(function () { + assert_equals(e.pointerType, "touch", "Test should be run using a touch as input"); + }); + isPointerCapture = true; + sPointerCapture(e); + pointercancelGot = false; + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target0'); + }); + + // If the setPointerCapture method has been invoked on the pointer specified by pointerId, and the releasePointerCapture method has not been invoked, a lostpointercapture event must be dispatched to the element on which the setPointerCapture method was invoked. Furthermore, subsequent events for the specified pointer must follow normal hit testing mechanisms for determining the event target. + // TA: 4.4 + on_event(target0, 'lostpointercapture', function(e) { + event_log.push('lostpointercapture@target0'); + test_pointerEvent.step(function () { + assert_true(pointercancelGot, "pointercancel was received before lostpointercapture"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + on_event(target0, 'pointercancel', function(e) { + event_log.push('pointercancel@target0'); + pointercancelGot = true; + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down'); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse.html new file mode 100644 index 0000000000..e86e5ab7ca --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse.html @@ -0,0 +1,100 @@ +<!doctype html> +<html> + <head> + <title>Release capture on pointerup</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 src="pointerevent_support.js"></script> + </head> + <body> + <h1>Pointer Events Capture Test - release capture on pointerup</h1> + <h4> + Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions: + <ol> + <li> Press and hold left mouse button over "Set Capture" button + <li> Release left mouse button anywhere over the document. "lostpointercapture" should be logged inside of the black rectangle immediately after "pointerup" + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + <div id="target0" style="background:black; color:white"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <script type='text/javascript'> + var isPointerCapture = false; + var pointerupGot = false; + var count=0; + var event_log = []; + var actions_promise; + + var detected_pointertypes = {}; + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var target0 = document.getElementById('target0'); + var captureButton = document.getElementById('btnCapture'); + + setup({ explicit_done: true }); + + window.onload = function() { + on_event(captureButton, 'pointerdown', function(e) { + detected_pointertypes[e.pointerType] = true; + if(isPointerCapture == false) { + isPointerCapture = true; + sPointerCapture(e); + pointerupGot = false; + } + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target0'); + }); + + // If the setPointerCapture method has been invoked on the pointer specified by pointerId, + // and the releasePointerCapture method has not been invoked,a lostpointercapture event must be + // dispatched to the element on which the setPointerCapture method was invoked. Furthermore, + // subsequent events for the specified pointer must follow normal hit testing mechanisms for + // determining the event target. + // TA: 3.7 + on_event(target0, 'lostpointercapture', function(e) { + test(function() { + assert_true(pointerupGot, "pointerup was received before lostpointercapture") + }, "pointerup was received before lostpointercapture"); + event_log.push('lostpointercapture@target0'); + isPointerCapture = false; + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + done(); + }); + }); + + on_event(target0, 'pointerup', function(e) { + event_log.push('pointerup@target0'); + pointerupGot = true; + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: captureButton}) + .pointerDown() + .pointerMove(10, 0, {origin: target0}) + .pointerUp() + .send(); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_pointerup_mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_pointerup_mouse.html new file mode 100644 index 0000000000..bdb64e502f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_pointerup_mouse.html @@ -0,0 +1,103 @@ +<!doctype html> +<html> + <head> + <title>releasePointerCapture on pointerup</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 src="pointerevent_support.js"></script> + </head> + <body> + <h1>Pointer Events Capture Test - releasePointerCapture on pointerup</h1> + <h4> + Test Description: This test checks if releasePointerCapture works properly. Complete the following actions: + <ol> + <li> Press and hold left mouse button over "Set Capture" button + <li> Release left mouse button anywhere over the document + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + <div id="target0" style="background:black; color:white"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <script type='text/javascript'> + var isPointerCapture = false; + var pointerupGot = false; + var count=0; + var event_log = []; + var actions_promise; + + var detected_pointertypes = {}; + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var target0 = document.getElementById('target0'); + var captureButton = document.getElementById('btnCapture'); + + setup({ explicit_done: true }); + + window.onload = function() { + on_event(captureButton, 'pointerdown', function(e) { + detected_pointertypes[e.pointerType] = true; + if(isPointerCapture == false) { + isPointerCapture = true; + sPointerCapture(e); + pointerupGot = false; + } + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target0'); + }); + + on_event(target0, 'lostpointercapture', function(e) { + test(function() { + assert_true(pointerupGot, "pointerup was received before lostpointercapture") + }, "pointerup was received before lostpointercapture"); + event_log.push('lostpointercapture@target0'); + isPointerCapture = false; + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + done(); + }); + }); + + on_event(target0, 'pointerup', function(e) { + event_log.push('pointerup@target0'); + var thrown = false; + try { + target0.releasePointerCapture(e.pointerId); + } catch(e) { + thrown = true; + } + test(function() { + assert_false(thrown, "target0.releasePointerCapture should not throw"); + }, "target0.releasePointerCapture should not throw"); + pointerupGot = true; + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: captureButton}) + .pointerDown() + .pointerMove(10, 0, {origin: target0}) + .pointerUp() + .send(); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_pointerup_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_pointerup_touch.html new file mode 100644 index 0000000000..ce730492b4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_pointerup_touch.html @@ -0,0 +1,102 @@ +<!doctype html> +<html> + <head> + <title>releasePointerCapture on pointerup</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 src="pointerevent_support.js"></script> + </head> + <body class="scrollable"> + <h1>Pointer Events Capture Test - releasePointerCapture on pointerup</h1> + <h4> + Test Description: This test checks if releaseCapture works properly on pointer up. Complete the following actions: + <ol> + <li> Touch black rectangle and do not release your touch + <li> Move and release your touch anywhere over the document + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + <div id="target0" style="background:black; color:white"></div> + + <script type='text/javascript'> + var pointerupGot = false; + var count=0; + var event_log = []; + var detected_pointertypes = {}; + var test_pointerEvent = async_test("releasePointerCapture on pointerup"); + + var target0 = document.getElementById('target0'); + var actions_promise; + + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + window.onload = function() { + on_event(target0, 'pointerdown', function(e) { + detected_pointertypes[e.pointerType] = true; + test_pointerEvent.step(function () { + assert_equals(e.pointerType, "touch", "Test should be run using a touch as input"); + }); + sPointerCapture(e); + pointerupGot = false; + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target0'); + }); + + on_event(target0, 'lostpointercapture', function(e) { + event_log.push('lostpointercapture@target0'); + test_pointerEvent.step(function () { + assert_true(pointerupGot, "pointerup was received before lostpointercapture"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + on_event(target0, 'pointerup', function(e) { + event_log.push('pointerup@target0'); + try { + target0.releasePointerCapture(e.pointerId); + } catch(error) { + test_pointerEvent.step(function () { + assert_unreached("target0.releasePointerCapture should not throw"); + }); + } + pointerupGot = true; + }); + + on_event(target0, 'touchmove', function(e) { + // To prevent pointercancel firing. + e.preventDefault(); + }); + + on_event(target0, 'pointercancel', function(e) { + test_pointerEvent.step(function () { + assert_unreached("target0 shouldn't receive pointercancel"); + }); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down'); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_release_right_after_capture.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_release_right_after_capture.html new file mode 100644 index 0000000000..409951b918 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_release_right_after_capture.html @@ -0,0 +1,76 @@ +<!doctype html> +<html> + <head> + <title>Release pointer capture right after setpointercapture</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 src="pointerevent_support.js"></script> + <script type="text/javascript"> + var actions_promise; + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + var test_setPointerCapture = async_test("Release pointer capture right after setpointercapture"); + + function run() { + var target0 = document.getElementById("target0"); + var target1 = document.getElementById("target1"); + + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[event.pointerType] = true; + target0.setPointerCapture(event.pointerId); + target0.releasePointerCapture(event.pointerId); + assert_equals(target0.hasPointerCapture(event.pointerId), false, "After target0.releasePointerCapture, target0.hasPointerCapture should be false"); + }); + + on_event(target0, "gotpointercapture", function (event) { + test_setPointerCapture.step(function () { + assert_true(false, "target0 shouldn't receive gotpointercapture"); + }); + }); + + on_event(target0, "lostpointercapture", function (event) { + test_setPointerCapture.step(function () { + assert_true(false, "target0 shouldn't receive lostpointercapture"); + }); + }); + + on_event(target0, "pointerup", function (event) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_setPointerCapture.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(10, 10, {origin: target0}) + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Release pointer capture right after setpointercapture</h1> + <h4>Test Description: + When calling releasePointer right after setPointerCapture method is invoked, the pending pointer capture should be cleared and no element should receive gotpointercapture and lostpointercapture events + <ol> + <li>Press and hold left mouse button over black box + <li>Move mouse and release mouse button + </ol> + </h4> + <br> + <div id="target0" touch-action:none></div> + <div id="target1" touch-action:none></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_root_computed_style.html b/testing/web-platform/tests/pointerevents/pointerevent_root_computed_style.html new file mode 100644 index 0000000000..c3034d475e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_root_computed_style.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset=utf-8> +<title></title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style type="text/css"> + :root { + pointer-events: none; + } +</style> +<html> + <body> + </body> +</html> +<script> + test(() => { + let cs = window.getComputedStyle(document.documentElement).getPropertyValue("pointer-events"); + assert_equals(cs, 'none'); + }); +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_root_hit_test.html b/testing/web-platform/tests/pointerevents/pointerevent_root_hit_test.html new file mode 100644 index 0000000000..b09dfafe69 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_root_hit_test.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset=utf-8> +<title></title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style type="text/css"> + :root { + pointer-events: none; + } +</style> +<html> + <body> + </body> +</html> +<script> + test(() => { + let element = document.elementFromPoint(50, 50); + assert_equals(element, document.documentElement); + }); +</script> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_sequence_at_implicit_release_on_click.html b/testing/web-platform/tests/pointerevents/pointerevent_sequence_at_implicit_release_on_click.html new file mode 100644 index 0000000000..bfcc8ad54a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_sequence_at_implicit_release_on_click.html @@ -0,0 +1,100 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Event sequence at implicit release on click</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <meta name="variant" content="?mouse"> + <meta name="variant" content="?touch"> + <meta name="variant" content="?pen"> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When a captured pointer is implicitly released after a click, the boundary events should follow the lostpointercapture event."/> + <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 inputSource = location.search.substring(1); + var detected_pointertypes = {}; + var event_log = []; + var start_logging = false; + var actions_promise; + + function resetTestState() { + detected_eventTypes = {}; + event_log = []; + start_logging = false; + } + + function run() { + var test_pointer_event = setup_pointerevent_test("Event sequence at implicit release on click", [inputSource]); + + on_event(document.getElementById("done"), "click", function() { + test_pointer_event.step(function () { + var expected_events = "pointerup, lostpointercapture, pointerout, pointerleave"; + assert_equals(event_log.join(", "), expected_events); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointer_event.done(); + }); + }); + + var target = document.getElementById("target"); + var button = document.getElementById("done"); + + All_Pointer_Events.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + + if (event.type == "pointerdown") { + event.target.setPointerCapture(event.pointerId); + + } else if (event.type == "gotpointercapture") { + start_logging = true; + + } else if (event.type != "pointermove" && start_logging) { + event_log.push(event.type); + } + }); + }); + + // Inject pointer inputs. + actions_promise = clickInTarget(inputSource, target).then(function() { + return clickInTarget(inputSource, button); + }); + } + </script> + <style> + #target { + margin: 20px; + background-color: black; + } + + #done { + margin: 20px; + background-color: green; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Event sequence at implicit release on click</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + When a captured pointer is implicitly released after a click, the boundary events should follow the lostpointercapture event. + </h4> + <ol> + <li>Click or tap on Black.</li> + <li>Click or tap on Green.</li> + </ol> + <div id="target"></div> + <div id="done"></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_sequence_at_implicit_release_on_drag.html b/testing/web-platform/tests/pointerevents/pointerevent_sequence_at_implicit_release_on_drag.html new file mode 100644 index 0000000000..52f9e439a4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_sequence_at_implicit_release_on_drag.html @@ -0,0 +1,97 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Event sequence at implicit release on drag</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When a captured pointer is implicitly released after a drag, the boundary events should follow the lostpointercapture event."/> + <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 detected_pointertypes = {}; + var event_log = []; + var start_logging = false; + + function resetTestState() { + detected_eventTypes = {}; + event_log = []; + start_logging = false; + } + + function run() { + var test_pointer_event = setup_pointerevent_test("Event sequence at implicit release on drag", ["touch"]); + + var button = document.getElementById("done"); + var actions_promise; + on_event(document.getElementById("done"), "click", function() { + test_pointer_event.step(function () { + var expected_events = "pointercancel, lostpointercapture, pointerout, pointerleave"; + assert_equals(event_log.join(", "), expected_events); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointer_event.done(); + }); + }); + + var target = document.getElementById("target"); + + All_Pointer_Events.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + + if (event.type == "pointerdown") { + event.target.setPointerCapture(event.pointerId); + + } else if (event.type == "gotpointercapture") { + start_logging = true; + + } else if (event.type != "pointermove" && start_logging) { + event_log.push(event.type); + } + }); + }); + + // Inject touch inputs. + actions_promise = pointerDragInTarget("touch", target, 'right').then(function() { + return clickInTarget("touch", button); + }); + } + </script> + <style> + #target { + margin: 20px; + background-color: black; + touch-action: auto; + } + + #done { + margin: 20px; + background-color: green; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Event sequence at implicit release on drag</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + When a captured pointer is implicitly released after a drag, the boundary events should follow the lostpointercapture event. + </h4> + <ol> + <li>Drag quickly down starting on Black.</li> + <li>Click or tap on Green.</li> + </ol> + <div id="target"></div> + <div id="done"></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_disconnected.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_disconnected.html new file mode 100644 index 0000000000..386de407e9 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_disconnected.html @@ -0,0 +1,69 @@ +<!doctype html> +<html> + <head> + <title>setPointerCapture() throws on disconnected node</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 src="pointerevent_support.js"></script> + <script type="text/javascript"> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + var test_setPointerCapture = async_test("setPointerCapture: DOMException InvalidStateError"); + var actions_promise; + + function run() { + var target0 = document.getElementById("target0"); + var target1 = document.getElementById("target1"); + + target1.parentNode.removeChild(target1); + + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[ event.pointerType ] = true; + try { + target1.setPointerCapture(event.pointerId); + + test_setPointerCapture.step(function() { + assert_unreached("DOMException: InvalidStateError should have been thrown."); + }); + } catch (e) { + // TA: 13.4 + test_setPointerCapture.step(function() { + assert_equals(e.name, "InvalidStateError", "DOMException should be InvalidStateError"); + }); + } + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_setPointerCapture.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: DOMException InvalidStateError</h1> + <h4>Test Description: + When the setPointerCapture method is invoked, if the target node does not participate in its ownerDocument's tree, a DOMException with the name InvalidStateError must be thrown. + </h4> + <br> + <div id="target0"> + Use the mouse, touch or pen to contact this box. + </div> + <div id="target1"></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_inactive_button_mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_inactive_button_mouse.html new file mode 100644 index 0000000000..f24661aadb --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_inactive_button_mouse.html @@ -0,0 +1,71 @@ +<!doctype html> +<html> + <head> + <title>setPointerCapture + inactive button state</title> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <meta name="viewport" content="width=device-width"> + <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 src="pointerevent_support.js"></script> + </head> + <body onload="run()"> + <h1>setPointerCapture</h1> + <h4> + Test Description: This test checks if setPointerCapture works properly. + <ol> + <li>Put your mouse over the black rectangle + <li>Move you mouse out to complete the test + </ol> + </h4> + <p> + <div id="target0" style="background:black; color:white;"></div> + <script> + var detected_pointertypes = {}; + + var captureGot = false; + + setup({ single_test: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var actions_promise; + + on_event(target0, "pointerover", function (event) { + detected_pointertypes[event.pointerType] = true; + target0.setPointerCapture(event.pointerId); + // After we receive a pointerover event, dispatch a pointer move to move out of target0. + // https://github.com/w3c/webdriver/issues/1545 + actions_promise.then(function() { + return new test_driver.Actions().pointerMove(1, 1).send(); + }); + }); + + // First dispatch a pointer move to target0. + actions_promise = new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send(); + + // When the setPointerCapture method is invoked, if the specified pointer is not in active button state, then the method must have no effect on subsequent pointer events. + // TA: 13.2 + on_event(target0, "pointerout", function (event) { + assert_false(captureGot, "pointer capture is not set while button state is inactive") + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + done(); + }); + }); + + on_event(target0, 'gotpointercapture', function(e) { + captureGot = true; + }); + } + </script> + <h1>Pointer Events setPointerCapture Tests</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_invalid_pointerid.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_invalid_pointerid.html new file mode 100644 index 0000000000..70b4f41b34 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_invalid_pointerid.html @@ -0,0 +1,71 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: gotPointercapture is fired first.</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/wiki/PointerEvents/TestAssertions"> + <meta name="assert" content="When the setPointerCapture method is invoked, if the provided pointerId value does not match any of the active pointers, a DOMException with the name NotFountError must be thrown." /> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <!-- /resources/testharness.js --> + <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 type="text/javascript"> + var detected_pointertypes = {}; + var test_pointerEvent = async_test("setPointerCapture: DOMException NotFoundError"); // set up test harness + var actions_promise; + // showPointerTypes is defined in pointerevent_support.js + // Requirements: the callback function will reference the test_pointerEvent object and + // will fail unless the async_test is created with the var name "test_pointerEvent". + add_completion_callback(showPointerTypes); + + var INVALID_POINTERID = -39548; + + function run() { + var target0 = document.getElementById("target0"); + target0.style["touchAction"] = "none"; + var listener = document.getElementById("complete-notice"); + + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[event.pointerType] = true; + test_pointerEvent.step(function() { + assert_throws_dom("NotFoundError", function(){ listener.setPointerCapture(INVALID_POINTERID); }, + "It should not be possible to capture an invalid pointer id"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: DOMException NotFoundError</h1> + <h4>Test Description: + When the setPointerCapture method is invoked, if the provided pointerId value does not match any of the active pointers, a DOMException with the name NotFoundError must be thrown. + </h4> + <br /> + <div id="target0"> + Use the mouse, touch or pen to contact this box. + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_override_pending_capture_element.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_override_pending_capture_element.html new file mode 100644 index 0000000000..f7c1d42991 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_override_pending_capture_element.html @@ -0,0 +1,78 @@ +<!doctype html> +<html> + <head> + <title>Test overriding the pending pointer capture element</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 src="pointerevent_support.js"></script> + <script type="text/javascript"> + var actions_promise; + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + var test_setPointerCapture = async_test("setPointerCapture: override the pending pointer capture element"); + + function run() { + var target0 = document.getElementById("target0"); + var target1 = document.getElementById("target1"); + + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[event.pointerType] = true; + target0.setPointerCapture(event.pointerId); + test_setPointerCapture.step(function () { + assert_equals(target0.hasPointerCapture(event.pointerId), true, "Set capture to target0, target0.hasPointerCapture should be true"); + }); + target1.setPointerCapture(event.pointerId); + test_setPointerCapture.step(function () { + assert_equals(target0.hasPointerCapture(event.pointerId), false, "Set capture to target1, target0.hasPointerCapture should be false"); + assert_equals(target1.hasPointerCapture(event.pointerId), true, "Set capture to target1, target1.hasPointerCapture should be true"); + }); + }); + + on_event(target0, "gotpointercapture", function (event) { + assert_true(false, "target0 shouldn't receive gotpointercapture"); + }); + + on_event(target1, "gotpointercapture", function (event) { + assert_true(true, "target1 should receive gotpointercapture"); + }); + + on_event(target1, "pointerup", function (event) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_setPointerCapture.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(10, 10, {origin: target0}) + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: Test overriding the pending pointer capture element</h1> + <h4>Test Description: + After an element setPointerCapture, if another element also setPointerCapture and override it, the old pending pointer capture element shouldn't receive any gotpointercapture or lostpointercapture event + <ol> + <li>Press and hold left mouse button over black box + <li>Move mouse and release mouse button + </ol> + </h4> + <br> + <div id="target0" touch-action:none></div> + <div id="target1" touch-action:none></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_pointerup_mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_pointerup_mouse.html new file mode 100644 index 0000000000..31079d56ce --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_pointerup_mouse.html @@ -0,0 +1,99 @@ +<!doctype html> +<html> + <head> + <title>setPointerCapture on pointerup</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 src="pointerevent_support.js"></script> + </head> + <body> + <h1>Pointer Events Capture Test - setPointerCapture on pointerup</h1> + <h4> + Test Description: This test checks if setPointerCapture works properly. Complete the following actions: + <ol> + <li> Press and hold left mouse button over black rectangle + <li> Release left mouse button + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + <div id="target0" style="background:black; color:white"></div> + <br> + <script type='text/javascript'> + var count=0; + var event_log = []; + var actions_promise; + + var detected_pointertypes = {}; + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var target0 = document.getElementById('target0'); + + setup({ explicit_done: true }); + + window.onload = function() { + on_event(target0, 'pointerdown', function(e) { + event_log.push('pointerdown@target0'); + detected_pointertypes[e.pointerType] = true; + test(function () { + assert_equals(event.pointerType, "mouse", "Test should be run using a mouse as input"); + }, "Test should be run using a mouse as input"); + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target0'); + test(function () { + assert_true(false, "target0 shouldn't receive gotpointercapture"); + }, "target0 shouldn't receive gotpointercapture"); + }); + + on_event(target0, 'lostpointercapture', function(e) { + event_log.push('lostpointercapture@target0'); + test(function () { + assert_true(false, "target0 shouldn't receive lostpointercapture"); + }, "target0 shouldn't receive lostpointercapture"); + }); + + on_event(target0, 'pointerup', function(e) { + event_log.push('pointerup@target0'); + var thrown = false; + try { + target0.setPointerCapture(e.pointerId); + } catch(e) { + thrown = true; + } + test(function() { + assert_false(thrown, "target0.setPointerCapture should not throw"); + }, "target0.setPointerCapture should not throw"); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(10, 0, {origin: target0}) + .pointerUp() + .send(); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_pointerup_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_pointerup_touch.html new file mode 100644 index 0000000000..8122251a71 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_pointerup_touch.html @@ -0,0 +1,102 @@ +<!doctype html> +<html> + <head> + <title>setPointerCapture on pointerup</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 src="pointerevent_support.js"></script> + </head> + <body class="scrollable"> + <h1>Pointer Events Capture Test - setPointerCapture on pointerup</h1> + <h4> + Test Description: This test checks if releaseCapture works properly on pointer up. Complete the following actions: + <ol> + <li> Touch black rectangle + <li> Release your touch + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + <div id="target0" style="background:black; color:white"></div> + + <script type='text/javascript'> + var count=0; + var event_log = []; + var detected_pointertypes = {}; + var test_pointerEvent = async_test("setPointerCapture on pointerup"); + + var target0 = document.getElementById('target0'); + var actions_promise; + + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + window.onload = function() { + on_event(target0, 'pointerdown', function(e) { + detected_pointertypes[e.pointerType] = true; + event_log.push('pointerdown@target0'); + test_pointerEvent.step(function () { + assert_equals(e.pointerType, "touch", "Test should be run using a touch as input"); + }); + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target0'); + }); + + on_event(target0, 'lostpointercapture', function(e) { + event_log.push('lostpointercapture@target0'); + }); + + on_event(target0, 'pointerup', function(e) { + event_log.push('pointerup@target0'); + try { + target0.setPointerCapture(e.pointerId); + } catch(error) { + test_pointerEvent.step(function () { + assert_unreached("target0.setPointerCapture should not throw"); + }); + } + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + }); + + on_event(target0, 'touchmove', function(e) { + // To prevent pointercancel firing. + e.preventDefault(); + }); + + on_event(target0, 'pointercancel', function(e) { + test_pointerEvent.step(function () { + assert_unreached("target0 shouldn't receive pointercancel"); + }); + }); + + // Inject touch inputs. + actions_promise = new test_driver.Actions() + .addPointer("touchPointer1", "touch") + .pointerMove(10, 10, {origin: target0}) + .pointerDown() + .pause(100) + .pointerUp() + .send(); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_relatedtarget.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_relatedtarget.html new file mode 100644 index 0000000000..37de34d5a6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_relatedtarget.html @@ -0,0 +1,124 @@ +<!doctype html> +<html> + <head> + <title>Set/Release capture + relatedTarget</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 src="pointerevent_support.js"></script> + </head> + <body> + <h1>Pointer Events Capture Test - capture and relatedTarget</h1> + <h4> + Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions: + <ol> + <li> Put your mouse over the purple rectangle. pointerover should be received for the purple rectangle + <li> Press and hold left mouse button over "Set Capture" button + <li> Move your mouse. pointerover should be received for the black rectangle + <li> Release left mouse button to complete the test. + </ol> + </h4> + Test passes if the proper behavior of the events is observed. + + <div id="target0" style="background:black; color:white"></div> + <br> + <div id="target1" style="background:purple; color:white"></div> + <br> + <input type="button" id="btnCapture" value="Set Capture"> + <script type='text/javascript'> + var isPointerCapture = false; + var isPointeroverGot = false; + var count=0; + var event_log = []; + + var detected_pointertypes = {}; + add_completion_callback(end_of_test); + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var target0 = document.getElementById('target0'); + var target1 = document.getElementById('target1'); + var captureButton = document.getElementById('btnCapture'); + + setup({ explicit_done: true }); + + window.onload = function() { + on_event(captureButton, 'pointerdown', function(e) { + if(isPointerCapture == false) { + isPointerCapture = true; + sPointerCapture(e); + } + else { + isPointerCapture = false; + rPointerCapture(e); + } + }); + + on_event(target0, 'gotpointercapture', function(e) { + event_log.push('gotpointercapture@target0'); + }); + + on_event(target0, 'lostpointercapture', function(e) { + event_log.push('lostpointercapture@target0'); + isPointerCapture = false; + }); + + run(); + } + + function run() { + var actions_promise; + + // After invoking the setPointerCapture method on an element, subsequent pointer events for the specified pointer must be targeted at that element + // and boundary events should be sent accordingly and relatedTarget should behave normally. + on_event(target0, "pointerover", function (event) { + event_log.push('pointerover@target0'); + if(isPointerCapture && isPointeroverGot) { + test(function() { + assert_not_equals(event.relatedTarget, null, "relatedTarget should not be null even when the capture is set") + }, "relatedTarget should not be null even when the capture is set."); + + actions_promise.then( () => { + done(); + }); + } + }); + + on_event(target1, "pointerover", function (event) { + detected_pointertypes[ event.pointerType ] = true; + if(!isPointeroverGot) { + test(function() { + assert_equals(isPointerCapture, false, "pointerover shouldn't trigger for this target when capture is enabled"); + }, "pointerover shouldn't trigger for the purple rectangle while the black rectangle has capture"); + isPointeroverGot = true; + event_log.push('pointerover@target1'); + } + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target1}) + .pointerMove(0, 0, {origin: captureButton}) + .pointerDown() + .pointerMove(0, 0, {origin: target1}) + .pointerMove(0, 0, {origin: target0}) + .pointerUp() + .send(); + } + </script> + <h1>Pointer Events Capture Test</h1> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_to_same_element_twice.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_to_same_element_twice.html new file mode 100644 index 0000000000..5225ac508d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_to_same_element_twice.html @@ -0,0 +1,77 @@ +<!doctype html> +<html> + <head> + <title>setPointerCapture() to the element which already captured the pointer</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 src="pointerevent_support.js"></script> + <script type="text/javascript"> + var actions_promise; + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + var test_setPointerCapture = async_test("setPointerCapture: set to the element which already captured the pointer"); + var got_pointer_capture = false; + + function run() { + var target0 = document.getElementById("target0"); + var target1 = document.getElementById("target1"); + + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[event.pointerType] = true; + target0.setPointerCapture(event.pointerId); + }); + + on_event(target0, "gotpointercapture", function (event) { + test_setPointerCapture.step(function () { + assert_equals(got_pointer_capture, false, "Target0 should receive gotpointercapture at the first time it captured the pointer"); + assert_equals(target0.hasPointerCapture(event.pointerId), true, "Target 0 received gotpointercapture, target0.hasPointerCapture should be true"); + }); + got_pointer_capture = true; + + target0.setPointerCapture(event.pointerId); + test_setPointerCapture.step(function () { + assert_equals(target0.hasPointerCapture(event.pointerId), true, "Set capture to target0, target0.hasPointerCapture should be true"); + assert_equals(target1.hasPointerCapture(event.pointerId), false, "Set capture to target0, target1.hasPointerCapture should be false"); + }); + }); + + on_event(target0, "pointerup", function (event) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_setPointerCapture.done(); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(10, 10, {origin: target0}) + .pointerUp() + .send(); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: setPointerCapture to the element which already captured the pointer</h1> + <h4>Test Description: + When the setPointerCapture method is invoked, if the target element had already captured the pointer, it should not trigger any gotpointercapture or lostpointercapture event + <ol> + <li>Press and hold left mouse button over black box + <li>Move mouse and release mouse button + </ol> + </h4> + <br> + <div id="target0" touch-action:none></div> + <div id="target1" touch-action:none></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_styles.css b/testing/web-platform/tests/pointerevents/pointerevent_styles.css new file mode 100644 index 0000000000..1ee3b0b396 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_styles.css @@ -0,0 +1,112 @@ +#innerFrame { +position: absolute; +top: 300px; +left: 200px; +height: 100px; +width: 100px; +} + +.spacer { +height: 100px; +} + +#square1 { +top: 330px; +left: 150px; +background: black; +} + +#square2 { +top: 50px; +left: 30px; +visibility: hidden; +background: red; +} + +.square { +height: 20px; +width: 20px; +position: absolute; +padding: 0px; +} + +#target0 { +background: black; +color: white; +white-space: nowrap; +overflow-y: auto; +overflow-x: auto; +} + +#target1 { +background: purple; +color: white; +white-space: nowrap; +overflow-y: auto; +overflow-x: auto; +} + +#scrollTarget { + background: darkblue; +} + +.touchActionNone { +touch-action: none; +} + +#innerframe { +width: 90%; +margin: 10px; +margin-left: 10%; +height: 200px; +} + +.scroller { +width: 700px; +height: 430px; +margin: 20px; +overflow: auto; +background: black; +} + +.scroller > div { +height: 1000px; +width: 1000px; +color: white; +} + +.scroller > div div { +height: 100%; +width: 100%; +color: white; +} + +div { +margin: 0em; +padding: 2em; +} + +#complete-notice { +background: #afa; +border: 1px solid #0a0; +display: none; +} + +#pointertype-log { +font-weight: bold; +} + +#event-log { +font-weight: bold; +} + +#listener { +background: orange; +border: 1px solid orange; +position: absolute; +top: -100px; +} + +body.scrollable { +min-height: 5000px; +} diff --git a/testing/web-platform/tests/pointerevents/pointerevent_support.js b/testing/web-platform/tests/pointerevents/pointerevent_support.js new file mode 100644 index 0000000000..d65194db56 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_support.js @@ -0,0 +1,507 @@ +const All_Pointer_Events = [ + "pointerdown", + "pointerup", + "pointercancel", + "pointermove", + "pointerover", + "pointerout", + "pointerenter", + "pointerleave", + "gotpointercapture", + "lostpointercapture" +]; + +// https://w3c.github.io/pointerevents/#the-button-property +// Values for the button property, which indicates the device button whose state +// change fired the event. +const ButtonChange = { + NONE: -1, + PEN_CONTACT: 0, + TOUCH_CONTACT: 0, + LEFT_MOUSE: 0, + MIDDLE_MOUSE: 1, + RIGHT_MOUSE: 2, + X1_MOUSE: 3, + X2_MOUSE: 4, + PEN_ERASER_BUTTON: 5 +}; + +// https://w3c.github.io/pointerevents/#the-buttons-property +// The buttons property gives the current state of the device buttons as a +// bitmask. +const ButtonsBitfield = { + NONE: 0, + PEN_CONTACT: 1, + TOUCH_CONTACT: 1, + LEFT_MOUSE: 1, + RIGHT_MOUSE: 2, + PEN_BARREL_BUTTON: 2, + MIDDLE_MOUSE: 4, + X1_MOUSE: 8, + X2_MOUSE: 16, + PEN_ERASER_BUTTON: 32 +}; + +// Check for conformance to PointerEvent interface +// https://w3c.github.io/pointerevents/#pointerevent-interface +function check_PointerEvent(event, testNamePrefix) { + if (testNamePrefix === undefined) + testNamePrefix = ""; + + // Use expectedPointerType if set otherwise just use the incoming event pointerType in the test name. + var pointerTestName = (testNamePrefix ? testNamePrefix + ' ' : '') + + (expectedPointerType == null ? event.pointerType : expectedPointerType) + ' ' + event.type; + + if (expectedPointerType != null) { + test(function () { + assert_equals(event.pointerType, expectedPointerType); + }, pointerTestName + ".pointerType is correct."); + } + + test(function () { + assert_true(event instanceof event.target.ownerDocument.defaultView.PointerEvent); + }, pointerTestName + " event is a PointerEvent event"); + + + // Check attributes for conformance to WebIDL (existence, type, being readable). + var idl_type_check = { + "long": function (v) { return typeof v === "number" && Math.round(v) === v; }, + "float": function (v) { return typeof v === "number"; }, + "string": function (v) { return typeof v === "string"; }, + "boolean": function (v) { return typeof v === "boolean" }, + "object": function (v) { return typeof v === "object" } + }; + + // Check values for inherited attributes. + // https://w3c.github.io/pointerevents/#attributes-and-default-actions + test(function () { + assert_implements_optional("fromElement" in event); + assert_equals(event.fromElement, null); + }, pointerTestName + ".fromElement value is null"); + test(function () { + assert_implements_optional("toElement" in event); + assert_equals(event.toElement, null); + }, pointerTestName + ".toElement value is null"); + test(function () { + assert_equals(event.isTrusted, true); + }, pointerTestName + ".isTrusted value is true"); + test(function () { + let expected = (event.type != 'pointerenter' && event.type != 'pointerleave'); + assert_equals(event.composed, expected); + }, pointerTestName + ".composed value is valid"); + test(function () { + let expected = (event.type != 'pointerenter' && event.type != 'pointerleave'); + assert_equals(event.bubbles, expected); + }, pointerTestName + ".bubbles value is valid"); + + // Check the pressure value. + // https://w3c.github.io/pointerevents/#dom-pointerevent-pressure + test(function () { + assert_greater_than_equal(event.pressure, 0, "pressure is greater than or equal to 0"); + assert_less_than_equal(event.pressure, 1, "pressure is less than or equal to 1"); + + if (event.buttons === 0) { + assert_equals(event.pressure, 0, "pressure is 0 with no buttons pressed"); + } else { + assert_greater_than(event.pressure, 0, "pressure is greater than 0 with a button pressed"); + if (event.pointerType === "mouse") { + assert_equals(event.pressure, 0.5, "pressure is 0.5 for mouse with a button pressed"); + } + } + }, pointerTestName + ".pressure value is valid"); + + // Check mouse-specific properties. + if (event.pointerType === "mouse") { + test(function () { + assert_equals(event.width, 1, "width of mouse should be 1"); + assert_equals(event.height, 1, "height of mouse should be 1"); + assert_equals(event.tiltX, 0, event.type + ".tiltX is 0 for mouse"); + assert_equals(event.tiltY, 0, event.type + ".tiltY is 0 for mouse"); + assert_true(event.isPrimary, event.type + ".isPrimary is true for mouse"); + }, pointerTestName + " properties for pointerType = mouse"); + } + + // Check "pointerup" specific properties. + if (event.type == "pointerup") { + test(function () { + assert_equals(event.width, 1, "width of pointerup should be 1"); + assert_equals(event.height, 1, "height of pointerup should be 1"); + }, pointerTestName + " properties for pointerup"); + } +} + +function showPointerTypes() { + var complete_notice = document.getElementById("complete-notice"); + var pointertype_log = document.getElementById("pointertype-log"); + var pointertypes = Object.keys(detected_pointertypes); + pointertype_log.innerHTML = pointertypes.length ? + pointertypes.join(",") : "(none)"; + complete_notice.style.display = "block"; +} + +function showLoggedEvents() { + var event_log_elem = document.getElementById("event-log"); + event_log_elem.innerHTML = event_log.length ? event_log.join(", ") : "(none)"; + + var complete_notice = document.getElementById("complete-notice"); + complete_notice.style.display = "block"; +} + +function failOnScroll() { + assert_true(false, + "scroll received while shouldn't"); +} + +function updateDescriptionNextStep() { + document.getElementById('desc').innerHTML = "Test Description: Try to scroll text RIGHT."; +} + +function updateDescriptionComplete() { + document.getElementById('desc').innerHTML = "Test Description: Test complete"; +} + +function updateDescriptionSecondStepTouchActionElement(target, scrollReturnInterval) { + window.step_timeout(function() { + objectScroller(target, 'up', 0);} + , scrollReturnInterval); + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT moving your outside of the red border"; +} + +function updateDescriptionThirdStepTouchActionElement(target, scrollReturnInterval, callback = null) { + window.step_timeout(function() { + objectScroller(target, 'left', 0); + if (callback) { + callback(); + } + }, scrollReturnInterval); + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the element. Then tap complete button"; +} + +function updateDescriptionFourthStepTouchActionElement(target, scrollReturnInterval) { + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT starting your touch inside of the element"; +} + +function objectScroller(target, direction, value) { + if (direction == 'up') { + target.scrollTop = 0; + } else if (direction == 'left') { + target.scrollLeft = 0; + } +} + +function sPointerCapture(e) { + try { + target0.setPointerCapture(e.pointerId); + } + catch(e) { + } +} + +function rPointerCapture(e) { + try { + captureButton.value = 'Set Capture'; + target0.releasePointerCapture(e.pointerId); + } + catch(e) { + } +} + +var globalPointerEventTest = null; +var expectedPointerType = null; +const ALL_POINTERS = ['mouse', 'touch', 'pen']; + +function MultiPointerTypeTest(testName, types) { + this.testName = testName; + this.types = types; + this.currentTypeIndex = 0; + this.currentTest = null; + this.createNextTest(); +} + +MultiPointerTypeTest.prototype.step = function(op) { + this.currentTest.step(op); +} + +MultiPointerTypeTest.prototype.skip = function() { + var prevTest = this.currentTest; + this.createNextTest(); + prevTest.timeout(); +} + +MultiPointerTypeTest.prototype.done = function() { + if (this.currentTest.status != 1) { + var prevTest = this.currentTest; + this.createNextTest(); + if (prevTest != null) + prevTest.done(); + } +} + +MultiPointerTypeTest.prototype.step = function(stepFunction) { + this.currentTest.step(stepFunction); +} + +MultiPointerTypeTest.prototype.createNextTest = function() { + if (this.currentTypeIndex < this.types.length) { + var pointerTypeDescription = document.getElementById('pointerTypeDescription'); + document.getElementById('pointerTypeDescription').innerHTML = "Follow the test instructions with <span style='color: red'>" + this.types[this.currentTypeIndex] + "</span>. If you don't have the device <a href='javascript:;' onclick='globalPointerEventTest.skip()'>skip it</a>."; + this.currentTest = async_test(this.types[this.currentTypeIndex] + ' ' + this.testName); + expectedPointerType = this.types[this.currentTypeIndex]; + this.currentTypeIndex++; + } else { + document.getElementById('pointerTypeDescription').innerHTML = ""; + } + resetTestState(); +} + +function setup_pointerevent_test(testName, supportedPointerTypes) { + return globalPointerEventTest = new MultiPointerTypeTest(testName, supportedPointerTypes); +} + +function checkPointerEventType(event) { + assert_equals(event.pointerType, expectedPointerType, "pointerType should be the same as the requested device."); +} + +function touchScrollInTarget(target, direction) { + var x_delta = 0; + var y_delta = 0; + if (direction == "down") { + x_delta = 0; + y_delta = -10; + } else if (direction == "up") { + x_delta = 0; + y_delta = 10; + } else if (direction == "right") { + x_delta = -10; + y_delta = 0; + } else if (direction == "left") { + x_delta = 10; + y_delta = 0; + } else { + throw("scroll direction '" + direction + "' is not expected, direction should be 'down', 'up', 'left' or 'right'"); + } + return new test_driver.Actions() + .addPointer("touchPointer1", "touch") + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerMove(x_delta, y_delta, {origin: target}) + .pointerMove(2 * x_delta, 2 * y_delta, {origin: target}) + .pointerMove(3 * x_delta, 3 * y_delta, {origin: target}) + .pointerMove(4 * x_delta, 4 * y_delta, {origin: target}) + .pointerMove(5 * x_delta, 5 * y_delta, {origin: target}) + .pointerMove(6 * x_delta, 6 * y_delta, {origin: target}) + .pause(100) + .pointerUp() + .send(); +} + +function clickInTarget(pointerType, target) { + var pointerId = pointerType + "Pointer1"; + return new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerUp() + .send(); +} + +function rightClickInTarget(pointerType, target) { + let pointerId = pointerType + "Pointer1"; + let actions = new test_driver.Actions(); + return actions.addPointer(pointerId, pointerType) + .pointerMove(0, 0, {origin: target}) + .pointerDown({button:actions.ButtonType.RIGHT}) + .pointerUp({button:actions.ButtonType.RIGHT}) + .send(); +} + +function twoFingerDrag(target) { + return new test_driver.Actions() + .addPointer("touchPointer1", "touch") + .addPointer("touchPointer2", "touch") + .pointerMove(0, 0, { origin: target, sourceName: "touchPointer1" }) + .pointerMove(10, 0, { origin: target, sourceName: "touchPointer2" }) + .pointerDown({ sourceName: "touchPointer1" }) + .pointerDown({ sourceName: "touchPointer2" }) + .pointerMove(0, 10, { origin: target, sourceName: "touchPointer1" }) + .pointerMove(10, 10, { origin: target, sourceName: "touchPointer2" }) + .pointerMove(0, 20, { origin: target, sourceName: "touchPointer1" }) + .pointerMove(10, 20, { origin: target, sourceName: "touchPointer2" }) + .pause(100) + .pointerUp({ sourceName: "touchPointer1" }) + .pointerUp({ sourceName: "touchPointer2" }) + .send(); +} + +function pointerDragInTarget(pointerType, target, direction) { + var x_delta = 0; + var y_delta = 0; + if (direction == "down") { + x_delta = 0; + y_delta = 10; + } else if (direction == "up") { + x_delta = 0; + y_delta = -10; + } else if (direction == "right") { + x_delta = 10; + y_delta = 0; + } else if (direction == "left") { + x_delta = -10; + y_delta = 0; + } else { + throw("drag direction '" + direction + "' is not expected, direction should be 'down', 'up', 'left' or 'right'"); + } + var pointerId = pointerType + "Pointer1"; + return new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerMove(x_delta, y_delta, {origin: target}) + .pointerMove(2 * x_delta, 2 * y_delta, {origin: target}) + .pointerMove(3 * x_delta, 3 * y_delta, {origin: target}) + .pointerUp() + .send(); +} + +function pointerHoverInTarget(pointerType, target, direction) { + var x_delta = 0; + var y_delta = 0; + if (direction == "down") { + x_delta = 0; + y_delta = 10; + } else if (direction == "up") { + x_delta = 0; + y_delta = -10; + } else if (direction == "right") { + x_delta = 10; + y_delta = 0; + } else if (direction == "left") { + x_delta = -10; + y_delta = 0; + } else { + throw("drag direction '" + direction + "' is not expected, direction should be 'down', 'up', 'left' or 'right'"); + } + var pointerId = pointerType + "Pointer1"; + return new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(0, 0, {origin: target}) + .pointerMove(x_delta, y_delta, {origin: target}) + .pointerMove(2 * x_delta, 2 * y_delta, {origin: target}) + .pointerMove(3 * x_delta, 3 * y_delta, {origin: target}) + .send(); +} + +function moveToDocument(pointerType) { + var pointerId = pointerType + "Pointer1"; + return new test_driver.Actions() + .addPointer(pointerId, pointerType) + .pointerMove(0, 0) + .send(); +} + +// Returns a promise that only gets resolved when the condition is met. +function resolveWhen(condition) { + return new Promise((resolve, reject) => { + function tick() { + if (condition()) + resolve(); + else + requestAnimationFrame(tick.bind(this)); + } + tick(); + }); +} + +// Returns a promise that only gets resolved after n animation frames +function waitForAnimationFrames(n) { + let p = 0; + function next() { + p++; + return p === n; + } + return resolveWhen(next); +} + +function isPointerEvent(eventName) { + return All_Pointer_Events.includes(eventName); +} + +function isMouseEvent(eventName) { + return ["mousedown", "mouseup", "mousemove", "mouseover", + "mouseenter", "mouseout", "mouseleave", + "click", "contextmenu", "dblclick" + ].includes(eventName); +} + +// Events is a list of events fired at a target. +// +// Checks to see if each pointer event has a corresponding mouse event in the +// event array and the two events are in the proper order (pointer event is +// first). +// +// See https://w3c.github.io/pointerevents/#mapping-for-devices-that-support-hover +function arePointerEventsBeforeCompatMouseEvents(events) { + function arePointerAndMouseEventCompatible(pointerEventName, mouseEventName) { + return pointerEventName.startsWith("pointer") + && mouseEventName.startsWith("mouse") + && pointerEventName.substring(7) === mouseEventName.substring(5); + } + + function arePointerAndMouseEventInProperOrder(pointerEventIndex, mouseEventIndex, events) { + return (pointerEventIndex < mouseEventIndex && isPointerEvent(events[pointerEventIndex]) && isMouseEvent(events[mouseEventIndex]) + && arePointerAndMouseEventCompatible(events[pointerEventIndex], events[mouseEventIndex])); + } + + let currentPointerEventIndex = events.findIndex((event) => isPointerEvent(event)); + let currentMouseEventIndex = events.findIndex((event) => isMouseEvent(event)); + + while (1) { + if (currentMouseEventIndex < 0 && currentPointerEventIndex < 0) + return true; + if (currentMouseEventIndex < 0 || currentPointerEventIndex < 0) + return false; + if (!arePointerAndMouseEventInProperOrder(currentPointerEventIndex, currentMouseEventIndex, events)) + return false; + + let pointerIdx = events.slice(currentPointerEventIndex + 1).findIndex(isPointerEvent); + let mouseIdx = events.slice(currentMouseEventIndex + 1).findIndex(isMouseEvent); + + currentPointerEventIndex = (pointerIdx < 0) ? pointerIdx : (currentPointerEventIndex + 1 + pointerIdx); + currentMouseEventIndex = (mouseIdx < 0) ? mouseIdx : (currentMouseEventIndex + 1 + mouseIdx); + } + + return true; +} + +// Returns a |Promise| that gets resolved with the event object when |target| +// receives an event of type |event_type|. +function getEvent(event_type, target) { + return new Promise(resolve => { + target.addEventListener(event_type, e => resolve(e), { once: true }); + }); +} + +// Returns a |Promise| that gets resolved with |event.data| when |window| +// receives from |source| a "message" event whose |event.data.type| matches the string +// |message_data_type|. +function getMessageData(message_data_type, source) { + return new Promise(resolve => { + function waitAndRemove(e) { + if (e.source != source || !e.data || e.data.type != message_data_type) + return; + window.removeEventListener("message", waitAndRemove); + resolve(e.data); + } + window.addEventListener("message", waitAndRemove); + }); +} + +function preventDefaultPointerdownOnce(target) { + return new Promise( + (resolve) => { + target.addEventListener("pointerdown", (event) => { + event.preventDefault(); + resolve(); + }, { once: true }); + }); +} diff --git a/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_click.html b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_click.html new file mode 100644 index 0000000000..2f99e7a976 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_click.html @@ -0,0 +1,122 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Suppress compatibility mouse events on click</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When a pointerdown is canceled, a click/tap shouldn't fire any compatibility mouse events."/> + <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 test_pointerEvent = async_test("Suppress compat mouse events on click"); + add_completion_callback(end_of_test); + var actions_promise; + + var detected_pointertypes = {}; + var event_log = []; + + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + function end_of_interaction() { + test(function () { + assert_equals(event_log.join(", "), + "click@target0, mousedown@target1, mouseup@target1, click@target1"); + }, "Event log"); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + } + + function run() { + var targetDone = document.getElementById('done'); + on_event(targetDone, "click", end_of_interaction); + + var target_list = ["target0", "target1"]; + var pointer_event_list = ["pointerdown"]; + var mouse_event_list = ["mousedown", "mouseup", "click"]; + + target_list.forEach(function(targetId) { + var target = document.getElementById(targetId); + + pointer_event_list.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + var label = event.type + "@" + targetId; + + test(function () { + assert_true(event.isPrimary); + }, "primary pointer " + label); + + if (label === "pointerdown@target0") + event.preventDefault(); + }); + }); + + mouse_event_list.forEach(function(eventName) { + on_event(target, eventName, function (event) { + event_log.push(event.type + "@" + targetId); + }); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: target1}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: targetDone}) + .pointerDown() + .pointerUp() + .send(); + } + </script> + <style> + #target0, #target1 { + margin: 20px; + } + + #done { + margin: 20px; + border: 2px solid black; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Suppress compatibility mouse events on click</h1> + <h4> + When a pointerdown is canceled, a click/tap shouldn't fire any compatibility mouse events except click event. + </h4> + <ol> + <li> Click or tap on Target0.</li> + <li> Click or tap on Target1.</li> + <li> Click Done.</li> + </ol> + <div id="target0"> + Target0 + </div> + <div id="target1"> + Target1 + </div> + <div id="done"> + Done + </div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_drag_mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_drag_mouse.html new file mode 100644 index 0000000000..6ed19c2467 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_drag_mouse.html @@ -0,0 +1,139 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Suppress compatibility mouse events on drag</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When a pointerdown is canceled, a mouse drag shouldn't fire any compatibility mouse events."/> + <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 test_pointerEvent = async_test("Suppress compat mouse events on drag"); + add_completion_callback(end_of_test); + var actions_promise; + + var detected_pointertypes = {}; + var event_log = []; + + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + var include_next_mousemove = false; + + // Limits logging/testing of mousemove. + function drop_event(event_type) { + return (event_type == "mousemove" && !include_next_mousemove); + } + + function end_of_interaction() { + test(function () { + assert_equals(event_log.join(", "), + "mousedown@target1, mousemove@target1, mouseup@target1"); + }, "Event log"); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + } + + function run() { + var targetDone = document.getElementById('done'); + on_event(targetDone, "click", end_of_interaction); + + var target_list = ["target0", "target1"]; + var pointer_event_list = ["pointerdown" , "pointermove", "pointerup"]; + var mouse_event_list = ["mousedown", "mouseup", "mousemove"]; + + target_list.forEach(function(targetId) { + var target = document.getElementById(targetId); + + pointer_event_list.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + var label = event.type + "@" + targetId; + + if (event.type == "pointerdown") { + test(function () { + assert_true(event.isPrimary); + }, "primary pointer " + label); + } + + if (label === "pointerdown@target0") + event.preventDefault(); + }); + }); + + mouse_event_list.forEach(function(eventName) { + on_event(target, eventName, function (event) { + if (drop_event(event.type)) + return; + + event_log.push(event.type + "@" + targetId); + + include_next_mousemove = (event.type == "mousedown"); + }); + }); + }); + + // Inject mouse inputs. + actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerMove(10, 0, {origin: target0}) + .pointerUp() + .pointerMove(0, 0, {origin: target1}) + .pointerDown() + .pointerMove(10, 0, {origin: target1}) + .pointerUp() + .pointerMove(0, 0, {origin: targetDone}) + .pointerDown() + .pointerUp() + .send(); + } + </script> + <style> + #target0, #target1 { + margin: 20px; + touch-action: none; + } + + #done { + margin: 20px; + border: 2px solid black; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Suppress compatibility mouse events on drag</h1> + <h4> + When a pointerdown is canceled, a mouse drag shouldn't fire any compatibility mouse events. + </h4> + <ol> + <li> Drag mouse within Target0 & release.</li> + <li> Drag mouse within Target1 & release.</li> + <li> Click Done.</li> + </ol> + <div id="target0"> + Target0 + </div> + <div id="target1"> + Target1 + </div> + <div id="done"> + Done + </div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_tiltX_tiltY_to_azimuth_altitude.html b/testing/web-platform/tests/pointerevents/pointerevent_tiltX_tiltY_to_azimuth_altitude.html new file mode 100644 index 0000000000..4521c247d1 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_tiltX_tiltY_to_azimuth_altitude.html @@ -0,0 +1,109 @@ +<!doctype html> +<html> + <head> + <title>TiltX/TiltY to Azimuth/Altitude</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <script> + if(window.test){ + [{tiltX:0,tiltY:0, azimuth:0, altitude:Math.PI/2}, + {tiltX:0, tiltY:90, azimuth:Math.PI/2, altitude:0}, + {tiltX:0, tiltY:-90, azimuth:3*Math.PI/2, altitude:0}, + {tiltX:90,tiltY:0, azimuth:0, altitude:0}, + {tiltX:90, tiltY:90, azimuth:0, altitude:0}, + {tiltX:90, tiltY:-90, azimuth:0, altitude:0}, + {tiltX:-90,tiltY:0, azimuth:Math.PI, altitude:0}, + {tiltX:-90, tiltY:90, azimuth:0, altitude:0}, + {tiltX:-90, tiltY:-90, azimuth:0, altitude:0}, + {tiltX:0, tiltY:45, azimuth:Math.PI/2, altitude:Math.PI/4}, + {tiltX:0, tiltY:-45, azimuth:3*Math.PI/2, altitude:Math.PI/4}, + {tiltX:45, tiltY:0, azimuth:0, altitude:Math.PI/4}, + {tiltX:-45, tiltY:0, azimuth:Math.PI, altitude:Math.PI/4},].forEach( + (el)=>{ + test(function(){ + var event = new PointerEvent("pointerdown",{pointerId:"pointer1", tiltX:el.tiltX, tiltY:el.tiltY}); + assert_equals(event.azimuthAngle, el.azimuth, "azimuth angle should be " + el.azimuth); + assert_equals(event.altitudeAngle, el.altitude, "altitude angle should be " + el.altitude); + }, `tiltX,tiltY to azimuth/altitude when tiltX=${el.tiltX} and tiltY=${el.tiltY}`); + }); + + test(function(){ + var event = new PointerEvent("pointerdown",{}); + assert_equals(event.azimuthAngle, 0, "azimuth angle should be 0"); + assert_equals(event.altitudeAngle, Math.PI/2, "altitude angle should be " + Math.PI/2); + }, "tiltX/tiltY to azimuth/altitude when tiltX/tiltY are not populated"); + + [{azimuth:0, altitude:0, tiltX:90,tiltY:0}, + {azimuth:0, altitude:Math.PI/4, tiltX:45, tiltY:0}, + {azimuth:0, altitude:Math.PI/2, tiltX:0,tiltY:0}, + {azimuth:Math.PI/2, altitude:0, tiltX:0, tiltY:90}, + {azimuth:Math.PI/2, altitude:Math.PI/4, tiltX:0, tiltY:45}, + {azimuth:Math.PI, altitude:0, tiltX:-90,tiltY:0}, + {azimuth:Math.PI, altitude:Math.PI/4, tiltX:-45, tiltY:0}, + {azimuth:3*Math.PI/2, altitude:0, tiltX:0, tiltY:-90}, + {azimuth:3*Math.PI/2, altitude:Math.PI/4, tiltX:0, tiltY:-45},].forEach( + (el)=>{ + test(function(){ + var event = new PointerEvent("pointerdown",{pointerId:"pointer1", azimuthAngle:el.azimuth, altitudeAngle:el.altitude}); + assert_equals(event.tiltX, el.tiltX, "tiltX angle should be " + el.tiltX); + assert_equals(event.tiltY, el.tiltY, "tiltY angle should be " + el.tiltY); + }, `azimuth/altitude to tiltX/tiltY when azimuth=${el.azimuth} and altitude=${el.altitude}`); + }); + + test(function(){ + var event = new PointerEvent("pointerdown", {pointerId:"pointer1", tiltX:45}); + assert_equals(event.tiltX, 45, "tiltX value should stay as initialized"); + assert_equals(event.tiltY, 0, "tiltY value should be initialized with default value 0"); + assert_equals(event.azimuthAngle, 0, `for (tiltX, tiltY) = (${event.tiltX}, ${event.tiltY}) azimuthAngle should be 0`); + assert_equals(event.altitudeAngle, Math.PI/4, `for (tiltX, tiltY) = (${event.tiltX}, ${event.tiltY}) altitudeAngle should be PI/4`); + + event = new PointerEvent("pointerdown", {pointerId:"pointer1", tiltY:45}); + assert_equals(event.tiltX, 0, "tiltX value should be initialized with default value 0"); + assert_equals(event.tiltY, 45, "tiltY value should stay as initialized"); + assert_equals(event.azimuthAngle, Math.PI/2, `for (tiltX, tiltY) = (${event.tiltX}, ${event.tiltY}) azimuthAngle should be PI/2`); + assert_equals(event.altitudeAngle, Math.PI/4, `for (tiltX, tiltY) = (${event.tiltX}, ${event.tiltY}) altitudeAngle should be PI/4`); + + event = new PointerEvent("pointerdown", {pointerId:"pointer1", azimuthAngle:Math.PI/4}); + assert_equals(event.azimuthAngle, Math.PI/4, "azimuthAngle value should stay as initialized"); + assert_equals(event.altitudeAngle, Math.PI/2, "altitudeAngle should be initialized with default value of PI/2"); + assert_equals(event.tiltX, 0, `for (azimuthAngle, altitudeAngle)=(${event.azimuthAngle},${event.altitudeAngle}) tiltX angle should be 0`); + assert_equals(event.tiltY, 0, `for (azimuthAngle, altitudeAngle)=(${event.azimuthAngle},${event.altitudeAngle}) tiltY angle should be 0`); + + event = new PointerEvent("pointerdown", {pointerId:"pointer1", altitudeAngle:Math.PI/4}); + assert_equals(event.azimuthAngle, 0, "azimuthAngle value should be initialized with default value of 0"); + assert_equals(event.altitudeAngle, Math.PI/4, "altitudeAngle should stay as initialized"); + assert_equals(event.tiltX, 45, `for (azimuthAngle, altitudeAngle)=(${event.azimuthAngle},${event.altitudeAngle}) tiltX angle should be 45 degrees`); + assert_equals(event.tiltY, 0, `for (azimuthAngle, altitudeAngle)=(${event.azimuthAngle},${event.altitudeAngle}) tiltY angle should be 0`); + }, "If only one of the values (tiltX, tiltY) or (azimuthAngle, altitudeAngle) is available the other one is set to the default value"); + + test(function(){ + var event = new PointerEvent("pointerdown", {pointerId:"pointer1", tiltX:45, azimuthAngle:Math.PI/4}); + assert_equals(event.tiltX, 45, "tiltX value should stay as initialized"); + assert_equals(event.tiltY, 0, "tiltY value should be initialized with default value 0"); + assert_equals(event.azimuthAngle, Math.PI/4, "azimuthAngle should stay as initialized"); + assert_equals(event.altitudeAngle, Math.PI/2, `altitudeAngle value should be initialized with default value ${Math.PI/2}`); + + event = new PointerEvent("pointerdown", {pointerId:"pointer1", tiltY:45, azimuthAngle:Math.PI/4}); + assert_equals(event.tiltX, 0, "tiltX value should be initialized with default value 0"); + assert_equals(event.tiltY, 45, "tiltY value should stay as initialized"); + assert_equals(event.azimuthAngle, Math.PI/4, "azimuthAngle value should stay as initialized"); + assert_equals(event.altitudeAngle, Math.PI/2, `altitudeAngle value should be initialized with default value ${Math.PI/2}`); + + event = new PointerEvent("pointerdown", {pointerId:"pointer1", tiltX:45, altitudeAngle:Math.PI/4}); + assert_equals(event.tiltX, 45, "tiltX value should stay as initialized"); + assert_equals(event.tiltY, 0, "tiltY value should be initialized with default value 0"); + assert_equals(event.azimuthAngle, 0, "azimuthAngle value should be initialized with default value of 0"); + assert_equals(event.altitudeAngle, Math.PI/4, "altitudeAngle should stay as initialized"); + + event = new PointerEvent("pointerdown", {pointerId:"pointer1", tiltY:45, altitudeAngle:Math.PI/4}); + assert_equals(event.tiltX, 0, "tiltX value should be initialized with default value 0"); + assert_equals(event.tiltY, 45, "tiltY value should stay as initialized"); + assert_equals(event.azimuthAngle, 0, "azimuthAngle value should be initialized with default value of 0"); + assert_equals(event.altitudeAngle, Math.PI/4, "altitudeAngle should stay as initialized"); + }, "If one of the values in both sets is provided, the other value in the set is initialized with the default value") + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-auto-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-auto-css_touch.html new file mode 100644 index 0000000000..c486d77c11 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-auto-css_touch.html @@ -0,0 +1,141 @@ +<!doctype html> +<html> + <head> + <title>touch-action: auto</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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: auto; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll text DOWN. Wait for description update. Expected: pan enabled</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <script type='text/javascript'> + var detected_pointertypes = {}; + + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + var test_touchaction = async_test("touch-action attribute test"); + var actions_promise; + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(target0, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_equals(event.pointerType, "touch", "wrong pointer type was detected: "); + }); + }); + + on_event(target0, 'scroll', function(event) { + xScr1 = target0.scrollLeft; + yScr1 = target0.scrollTop; + + if(xScr1 != xScr0) { + xScrollIsReceived = true; + } + + if(yScr1 != yScr0) { + test_touchaction.step(function () { + yScrollIsReceived = true; + assert_true(true, "y-scroll received."); + }); + updateDescriptionNextStep(); + } + + if(xScrollIsReceived && yScrollIsReceived) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + } + }); + + // Inject touch inputs and wait for all the actions finish to end the test. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }); + } + </script> + <h1>touch-action: auto</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-button-none-test_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-button-none-test_touch.html new file mode 100644 index 0000000000..42bcb7b843 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-button-none-test_touch.html @@ -0,0 +1,88 @@ +<!doctype html> +<html> + <head> + <title>Button touch-action test</title> + <meta name="assert" content="TA15.11 -The touch-action CSS property applies to button elements."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + height: 100px; + width: 200px; + overflow-y: auto; + background: black; + padding: 100px; + position: relative; + } + button { + touch-action: none; + width: 350px; + height: 350px; + border: 2px solid red; + } + </style> + </head> + <body onload="run()"> + <h2>Pointer Events touch-action attribute support</h2> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT inside of the "Test Button" element. Tap Complete button under the rectangle when done.</h4> + <p>Note: this test is for touch only</p> + <div id="target0"> + <button id="testButton">Test Button</button> + </div> + <br> + <input type="button" id="btnComplete" value="Complete test"> + + <script type='text/javascript'> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + //TA 15.11 + var test_touchaction = async_test("touch-action attribute test in element"); + + on_event(btnComplete, 'click', function(event) { + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "button scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "button scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + on_event(btnComplete, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(testButton, 'down').then(function() { + return touchScrollInTarget(testButton, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-illegal.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-illegal.html new file mode 100644 index 0000000000..5fe6179840 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-illegal.html @@ -0,0 +1,67 @@ +<!doctype html> +<html> + <head> + <title>touch-action: illegal</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="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 50px; + touch-action: pan-x none; + } + #target1 { + width: 700px; + height: 50px; + background: black; + margin-top: 5px; + touch-action: pan-y none; + } + #target2 { + width: 700px; + height: 50px; + background: black; + margin-top: 5px; + touch-action: auto none; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Test will automatically check behaviour of following combinations: 'pan-x none', 'pan-y none', 'auto none'</h4> + <div id="target0"></div> + <div id="target1"></div> + <div id="target2"></div> + <script type='text/javascript'> + var detected_pointertypes = {}; + + setup({ explicit_done: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById('target0'); + var target1 = document.getElementById('target1'); + var target2 = document.getElementById('target2'); + + test(function() { + assert_true(getComputedStyle(target0).touchAction == 'auto', "'pan-x none' is corrected properly"); + }, "'pan-x none' is corrected properly"); + test(function() { + assert_true(getComputedStyle(target1).touchAction == 'auto', "'pan-y none' is corrected properly"); + }, "'pan-y none' is corrected properly"); + test(function() { + assert_true(getComputedStyle(target2).touchAction == 'auto', "'auto none' is corrected properly"); + }, "'auto none' is corrected properly"); + done(); + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-auto-child-none_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-auto-child-none_touch.html new file mode 100644 index 0000000000..53eafbb2f2 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-auto-child-none_touch.html @@ -0,0 +1,133 @@ +<!doctype html> +<html> + <head> + <title>touch-action: parent > child: auto > child: none</title> + <meta name="assert" content="TA15.5 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent, Child: `auto`, Grand-Child: `none`"> + <meta name="viewport" content="width=device-width"> + <meta name="timeout" content="long"> + <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 src="pointerevent_support.js"></script> + <style> + .scroller > div { + touch-action: auto; + } + .scroller > div div { + touch-action: none; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT inside blue rectangle. Tap Complete button under the rectangle when done. Expected: no panning.</h4> + <p>Note: this test is for touch-devices only</p> + <div class="scroller" id="target0"> + <div> + <div id="scrollTarget"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + </div> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + var test_touchaction = async_test("touch-action attribute test"); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if touch-action attribute works properly for embedded divs + // Scrollable-Parent, Child: `auto`, Grand-Child: `none` + // TA: 15.5 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(scrollTarget, 'down').then(function() { + return touchScrollInTarget(scrollTarget, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>behaviour: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-none_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-none_touch.html new file mode 100644 index 0000000000..dc234cbef3 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-none_touch.html @@ -0,0 +1,127 @@ +<!doctype html> +<html> + <head> + <title>touch-action: child: none</title> + <meta name="assert" content="TA15.9 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent, Child: `none`"> + <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 src="pointerevent_support.js"></script> + <style> + .scroller > div { + touch-action: none; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT inside blue rectangle. Tap Complete button under the rectangle when done. Expected: no panning</h4> + <p>Note: this test is for touch-devices only</p> + <div class="scroller" id="target0"> + <div id="scrollTarget"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + var test_touchaction = async_test("touch-action attribute test"); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if touch-action attribute works properly for embedded divs + // + // TA: 15.9 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(scrollTarget, 'down').then(function() { + return touchScrollInTarget(scrollTarget, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>behaviour: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch.html new file mode 100644 index 0000000000..a820b4f3cf --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch.html @@ -0,0 +1,128 @@ +<!doctype html> +<html> + <head> + <title>touch-action: parent > child: pan-x > child: pan-x</title> + <meta name="timeout" content="long"> + <meta name="assert" content="TA15.6 - when a user touches an element, the effect of that touch is determined by the value of the touch-action property and the default touch behaviors on the element and its ancestors. Scrollable-Parent, Child: `pan-x`, Grand-Child: `pan-x`"> + <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 src="pointerevent_support.js"></script> + <style> + .scroller > div { + touch-action: pan-x; + } + .scroller > div div { + touch-action: pan-x; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT inside blue rectangle. Tap Complete button under the rectangle when done. Expected: only pans in x direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div class="scroller" id="target0"> + <div> + <div id="scrollTarget"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + </div> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if touch-action attribute works properly for embedded divs + // + // TA: 15.6 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_not_equals(target0.scrollLeft, 0, "scroll x offset should not be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(scrollTarget, 'down').then(function() { + return touchScrollInTarget(scrollTarget, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>behaviour: pan-x</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch.html new file mode 100644 index 0000000000..99677313de --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch.html @@ -0,0 +1,131 @@ +<!doctype html> +<html> + <head> + <title>touch-action: parent > child: pan-x > child: pan-y</title> + <meta name="assert" content="TA15.13 - Touch action inherits child 'pan-x' -> child 'pan-y' test"> + <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 src="pointerevent_support.js"></script> + <style> + .scroller > div { + touch-action: pan-x; + } + .scroller > div div { + touch-action: pan-y; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT inside blue rectangle. Tap Complete button under the rectangle when done. Expected: no panning/zooming/etc.</h4> + <p>Note: this test is for touch-devices only</p> + <div class="scroller" id="target0"> + <div> + <div id="scrollTarget"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + </div> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + var test_touchaction = async_test("touch-action attribute test"); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if touch-action attribute works properly for embedded divs + // Scrollable-Parent, Child: `pan-x`, Grand-Child: `pan-y` + // TA: 15.13 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(scrollTarget, 'down').then(function() { + return touchScrollInTarget(scrollTarget, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>behaviour: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_highest-parent-none_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_highest-parent-none_touch.html new file mode 100644 index 0000000000..3ec5998b54 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_highest-parent-none_touch.html @@ -0,0 +1,145 @@ +<!doctype html> +<html> + <head> + <title>touch-action: parent: none + two embedded children</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 src="pointerevent_support.js"></script> + <style> + #divParent { + touch-action: none; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll text DOWN inside blue rectangle. Wait for description update. Expected: pan enabled</h4> + <p>Note: this test is for touch-devices only</p> + <div id="divParent"> + <div class="scroller" id="target0"> + <div id="scrollTarget"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + </div> + </div> + <script type='text/javascript'> + var detected_pointertypes = {}; + + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + + add_completion_callback(showPointerTypes); + add_completion_callback(enableScrolling); + + function run() { + var target0 = document.getElementById("target0"); + + var test_touchaction = async_test("touch-action attribute test"); + var actions_promise; + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(target0, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + }); + + // Check if touch-action attribute works properly for embedded divs + // + // TA: 15. + on_event(target0, 'scroll', function(event) { + xScr1 = target0.scrollLeft; + yScr1 = target0.scrollTop; + + if(xScr1 != xScr0) { + xScrollIsReceived = true; + } + + if(yScr1 != yScr0) { + yScrollIsReceived = true; + updateDescriptionNextStep(); + } + + if(xScrollIsReceived && yScrollIsReceived) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + } + }); + + // Inject touch inputs and wait for all the actions finish to end the test. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }); + } + + function enableScrolling() { + document.getElementById('divParent').setAttribute('style', 'touch-action: auto'); + } + </script> + <h1>behaviour: auto</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_parent-none_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_parent-none_touch.html new file mode 100644 index 0000000000..d927ed94b3 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_parent-none_touch.html @@ -0,0 +1,97 @@ +<!doctype html> +<html> + <head> + <title>touch-action: inherit from parent: none</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 src="pointerevent_support.js"></script> + <style> + .scroller { + touch-action: none; + } + #scrollTarget { + margin: 10px; + width: 125vh; + height: 125vh; + } + </style> + </head> + <body> + <h1>Pointer Events: effective touch-action is "none" when parent has "none" + and target has "auto"</h1> + <h4 id="desc"> + Try to scroll DOWN then RIGHT from inside blue rectangle. + Tap Complete button under the rectangle when done. + Expectation: no panning + </h4> + <p>Note: this test is for touch-devices only</p> + <div class="scroller" id="target0"> + <div id="scrollTarget"> + Try to scroll DOWN then RIGHT from here. + </div> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <h1>behavior: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: + <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> + <script type='text/javascript'> + window.onload = async () => { + const target0 = document.getElementById("target0"); + const btnComplete = document.getElementById("btnComplete"); + + assert_equals(getComputedStyle(target0).touchAction,'none', + 'Expect touch-action:none'); + + let pointerup_received = false; + let pointercancel_received = false; + let scroll_received = false; + + target0.addEventListener("pointerup", + () => pointerup_received = true); + target0.addEventListener("pointercancel", + () => pointercancel_received = true); + target0.addEventListener("scroll", + () => scroll_received = true); + + let detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + promise_test(async () => { + const button_complete_click = getEvent("click", btnComplete); + + await touchScrollInTarget(scrollTarget, 'down'); + await touchScrollInTarget(scrollTarget, 'right'); + await clickInTarget("touch", btnComplete); + await button_complete_click; + + assert_true( + pointerup_received, + "expected pointerup event with scroll gestures on " + + "touch-action:none"); + assert_false( + pointercancel_received, + "unexpected pointercancel event with scroll gestures on " + + "touch-action:none"); + assert_false( + scroll_received, + "unexpected scroll event with scroll gestures on " + + "touch-action:none"); + assert_equals(target0.scrollLeft, 0, + "expected scrollLeft 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, + "expected scrollTop 0 in the end of the test"); + + updateDescriptionComplete(); + }, "touch-action attribute test"); + }; + </script> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-keyboard.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-keyboard.html new file mode 100644 index 0000000000..ba087ab641 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-keyboard.html @@ -0,0 +1,149 @@ +<!doctype html> +<html> + <head> + <title>touch-action: keyboard</title> + <meta name="timeout" content="long"> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: none; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Press DOWN ARROW key. Wait for description update. Expected: pan enabled</h4> + <p>Note: this test is for keyboard only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <script type='text/javascript'> + + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + + function run() { + var target0 = document.getElementById("target0"); + + var test_touchaction = async_test("touch-action attribute test"); + var actions_promise; + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + target0.focus(); + + on_event(target0, 'scroll', function(event) { + xScr1 = target0.scrollLeft; + yScr1 = target0.scrollTop; + + if(xScr1 != xScr0) { + xScrollIsReceived = true; + } + + if(yScr1 != yScr0) { + test_touchaction.step(function () { + yScrollIsReceived = true; + assert_true(true, "y-scroll received."); + }); + updateDescriptionNextStepKeyboard(); + } + + if(xScrollIsReceived && yScrollIsReceived) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + } + }); + + // Inject keyboard scroll inputs. + const arrow_down = "\uE015"; + const arrow_right = "\uE014"; + + actions_promise = new test_driver.Actions() + .addPointer("mousePointer1", "mouse") + .pointerMove(0, 0, {origin: target0}) + .pointerDown() + .pointerUp() + .addTick() + .send(); + actions_promise = actions_promise + .then(()=>test_driver.send_keys(target0, arrow_down)) + .then(()=>test_driver.send_keys(target0, arrow_down)) + .then(()=>test_driver.send_keys(target0, arrow_right)) + .then(()=>test_driver.send_keys(target0, arrow_right)); + } + + function updateDescriptionNextStepKeyboard() { + document.getElementById('desc').innerHTML = "Test Description: press RIGHT ARROW key."; + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-modified_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-modified_touch.html new file mode 100644 index 0000000000..a91022504a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-modified_touch.html @@ -0,0 +1,60 @@ +<!doctype html> +<html> + <head> + <title>Deleting touch-action elem after pointerdown has no effect</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 src="pointerevent_support.js"></script> + <style> + div.box { + margin: 10px; + height: 25vh; + border: 1px solid black; + } + #target { + background-color: lightgreen; + touch-action:none; + } + </style> + </head> + <body> + <h1>Deleting touch-action elem after pointerdown has no effect</h1> + <h4 id="desc"> + Try to scroll up/down starting at the green element. Expectation: the + green element would vanish immediately and the content won't scroll. + </h4> + <p>Note: this test is for touch-devices only</p> + <div class="box"></div> + <div class="box"></div> + <div class="box" id="target">Drag up or down from here</div> + <div class="box"></div> + <div class="box"></div> + </body> + <script> + let target = document.getElementById("target"); + let pointercancel_received = false; + + document.body.addEventListener("pointerdown", () => target.parentElement.removeChild(target)); + document.body.addEventListener("pointercancel", () => pointercancel_received = true); + + let detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + promise_test(async () => { + let pointerup_event = getEvent("pointerup", document.body); + + await touchScrollInTarget(target, "down"); + await pointerup_event; + + assert_false(pointercancel_received, + "a pointercancel event is unexpected because there should be no scrolling"); + + updateDescriptionComplete(); + }, "Deleting touch-action elem after pointerdown"); + </script> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-mouse.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-mouse.html new file mode 100644 index 0000000000..9eb3839ec0 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-mouse.html @@ -0,0 +1,146 @@ +<!doctype html> +<html> + <head> + <title>touch-action: mouse</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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: none; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll text down using mouse (use mouse wheel or click on the scrollbar). Wait for description update.</h4> + <p>Note: this test is for mouse only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <script type='text/javascript'> + var detected_pointertypes = {}; + + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + var test_touchaction = async_test("touch-action attribute test"); + var actions_promise; + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(target0, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, 'scroll', function(event) { + xScr1 = target0.scrollLeft; + yScr1 = target0.scrollTop; + + if(xScr1 != xScr0) { + xScrollIsReceived = true; + } + + if(yScr1 != yScr0) { + test_touchaction.step(function () { + yScrollIsReceived = true; + assert_true(true, "y-scroll received."); + }); + updateDescriptionNextStepMouse(); + } + + if(xScrollIsReceived && yScrollIsReceived) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + } + }); + + const posOffsetX = 0; + const posOffsetY = 0; + const scrollDeltaX = 200; + const scrollDeltaY = 200; + actions_promise = new test_driver.Actions() + .scroll(posOffsetX, posOffsetY, scrollDeltaX, scrollDeltaY, + {origin: target0}) + .send(); + } + + function updateDescriptionNextStepMouse() { + document.getElementById('desc').innerHTML = "Test Description: Try to scroll text right using mouse (use mouse wheel or click on the scrollbar)."; + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-css_touch.html new file mode 100644 index 0000000000..2ff161a915 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-css_touch.html @@ -0,0 +1,126 @@ +<!doctype html> +<html> + <head> + <title>touch-action: none</title> + <meta name="assert" content="TA15.2 - With `touch-action: none` on a swiped or click/dragged element, `pointerdown+(optional pointermove)+pointerup` must be dispatched."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: none; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: no panning/zooming/etc.</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if "touch-action: none" attribute works properly + //TA: 15.2 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-on-body-when-style-propagates-to-viewport_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-on-body-when-style-propagates-to-viewport_touch.html new file mode 100644 index 0000000000..b2a3a9326e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-on-body-when-style-propagates-to-viewport_touch.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html> +<title>Touch Action None on body when style propagates from body to viewport</title> +<head> + <style> + html { + touch-action: none; + } + body { + overflow: auto; + } + </style> + <link rel="help" href="crbug.com/1031745"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-propagation"> + <link rel="help" href="https://w3c.github.io/pointerevents/#determining-supported-touch-behavior"> + <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 src="pointerevent_support.js"></script> +</head> +<body onload="onLoad()"> + <h2>Pointer Events touch-action none on body when style propagates from body to viewport</h2> + <h4>Test Description: Try to touch scroll. You shouldn't be able to.</h4> + <p>Note: this test is for touch only</p> + Body with touch-action=none. + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <p>Paragraph with touch-action=none</p> + <script> + function onLoad(){ + var body = document.body; + + if(!window.promise_test) + return; + + promise_test(function(t){ + return new Promise(async function(resolve,reject){ + await touchScrollInTarget(body, 'down'); + await touchScrollInTarget(body, 'right'); + t.step(function(){ + assert_equals(document.scrollingElement.scrollLeft, 0, "scrollingElement scroll x offset should be 0 in the end of the test"); + assert_equals(document.scrollingElement.scrollTop, 0, "scrollingElement scroll y offset should be 0 in the end of the test"); + }); + resolve(); + }).then( + ()=>{t.done();}, + ()=>{t.done();} + );}, "touch-action none on body when style propagates to viewport"); + } + </script> +</body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-down-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-down-css_touch.html new file mode 100644 index 0000000000..804a5144f1 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-down-css_touch.html @@ -0,0 +1,131 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-down</title> + <meta name="assert" content="TA15.4 - With `touch-action: pan-down` on a swiped or click/dragged element, only panning in the y-axis down direction should be possible."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: pan-down; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element UP (drag down), then RIGHT (drag left), then DOWN (drag up). Tap Complete button under the rectangle when done. Expected: only pans in down direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + target0.scrollTop = 200; + + var scrollListenerExecuted = false; + target0.addEventListener("scroll", function(event) { + scrollListenerExecuted = true; + assert_greater_than_equal(target0.scrollTop, 200); + }); + + // Check if "touch-action: pan-down" attribute works properly + //TA: 15.4 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test"); + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_greater_than(target0.scrollTop, 200, "scroll y offset should be greater than 200 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'up').then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return touchScrollInTarget(target0, 'down'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: pan-down</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-left-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-left-css_touch.html new file mode 100644 index 0000000000..99c7ad8132 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-left-css_touch.html @@ -0,0 +1,131 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-left</title> + <meta name="assert" content="TA15.3 - With `touch-action: pan-left` on a swiped or click/dragged element, only panning on the x-axis left direction should be possible."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: pan-left; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN (drag up), then RIGHT (drag left), then LEFT (drag right). Tap Complete button under the rectangle when done. Expected: only pans in left direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + target0.scrollLeft = 200; + + var scrollListenerExecuted = false; + target0.addEventListener("scroll", function(event) { + scrollListenerExecuted = true; + assert_less_than_equal(target0.scrollLeft, 200); + }); + + // Check if "touch-action: pan-left" attribute works properly + //TA: 15.3 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test"); + assert_less_than(target0.scrollLeft, 200, "scroll x offset should be less than 200 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return touchScrollInTarget(target0, 'left'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: pan-left</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-right-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-right-css_touch.html new file mode 100644 index 0000000000..99882a079c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-right-css_touch.html @@ -0,0 +1,132 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-right</title> + <meta name="assert" content="TA15.3 - With `touch-action: pan-right` on a swiped or click/dragged element, only panning on the x-axis right direction should be possible."> + <meta name="viewport" content="width=device-width"> + <meta name="timeout" content="long"> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: pan-right; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN (drag up), then LEFT (drag right), then RIGHT (drag left). Tap Complete button under the rectangle when done. Expected: only pans in right direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + target0.scrollLeft = 200; + + var scrollListenerExecuted = false; + target0.addEventListener("scroll", function(event) { + scrollListenerExecuted = true; + assert_greater_than_equal(target0.scrollLeft, 200); + }); + + // Check if "touch-action: pan-right" attribute works properly + //TA: 15.3 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test"); + assert_greater_than(target0.scrollLeft, 200, "scroll x offset should be greater than 200 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'left'); + }).then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: pan-right</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-up-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-up-css_touch.html new file mode 100644 index 0000000000..565d0d1d3e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-up-css_touch.html @@ -0,0 +1,131 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-up</title> + <meta name="assert" content="TA15.4 - With `touch-action: pan-up` on a swiped or click/dragged element, only panning in the y-axis up direction should be possible."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: pan-up; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN (drag up), then RIGHT (drag left), then UP (drag down). Tap Complete button under the rectangle when done. Expected: only pans in up direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + target0.scrollTop = 200; + + var scrollListenerExecuted = false; + target0.addEventListener("scroll", function(event) { + scrollListenerExecuted = true; + assert_less_than_equal(target0.scrollTop, 200); + }); + + // Check if "touch-action: pan-up" attribute works properly + //TA: 15.4 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_true(scrollListenerExecuted, "scroll listener should have been executed by the end of the test"); + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_less_than(target0.scrollTop, 200, "scroll y offset should be less than 200 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return touchScrollInTarget(target0, 'up'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: pan-up</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-css_touch.html new file mode 100644 index 0000000000..d2b147da0a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-css_touch.html @@ -0,0 +1,121 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-x</title> + <meta name="assert" content="TA15.3 - With `touch-action: pan-x` on a swiped or click/dragged element, only panning on the x-axis should be possible."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: pan-x; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: only pans in x direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if "touch-action: pan-x" attribute works properly + //TA: 15.3 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_not_equals(target0.scrollLeft, 0, "scroll x offset should not be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: pan-x</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y-pan-y_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y-pan-y_touch.html new file mode 100644 index 0000000000..e081cacbe4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y-pan-y_touch.html @@ -0,0 +1,126 @@ +<!doctype html> +<html> + <head> + <title>touch-action: parent > child: pan-x pan-y > child: pan-y</title> + <meta name="assert" content="TA15.17 - Touch action 'pan-x pan-y' 'pan-y' test"> + <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 src="pointerevent_support.js"></script> + <style> + .scroller > div { + touch-action: pan-x pan-y; + } + .scroller > div div { + touch-action: pan-y; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT inside blue rectangle. Tap Complete button under the rectangle when done. Expected: only pans in y direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div class="scroller" id="target0"> + <div> + <div id="scrollTarget"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + </div> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + var test_touchaction = async_test("touch-action attribute test"); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if touch-action attribute works properly for embedded divs + // + // TA: 15.17 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_not_equals(target0.scrollTop, 0, "scroll y offset should not be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>behaviour: pan-y</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y_touch.html new file mode 100644 index 0000000000..b80035c98d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y_touch.html @@ -0,0 +1,138 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-x pan-y</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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: pan-x pan-y; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll text DOWN. Wait for description update. Expected: pan enabled</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <script type='text/javascript'> + var detected_pointertypes = {}; + + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + var test_touchaction = async_test("touch-action attribute test"); + var actions_promise; + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(target0, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, 'scroll', function(event) { + xScr1 = target0.scrollLeft; + yScr1 = target0.scrollTop; + + if(xScr1 != xScr0) { + xScrollIsReceived = true; + } + + if(yScr1 != yScr0) { + test_touchaction.step(function () { + yScrollIsReceived = true; + assert_true(true, "y-scroll received."); + }); + updateDescriptionNextStep(); + } + + if(xScrollIsReceived && yScrollIsReceived) { + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + } + }); + + // Inject touch inputs and wait for all the actions finish to end the test. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }); + } + </script> + <h1>touch-action: pan-x pan-y</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-y-css_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-y-css_touch.html new file mode 100644 index 0000000000..adf502f1d8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-y-css_touch.html @@ -0,0 +1,122 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-y</title> + <meta name="timeout" content="long"> + <meta name="assert" content="TA15.4 - With `touch-action: pan-y` on a swiped or click/dragged element, only panning in the y-axis should be possible."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + width: 700px; + height: 430px; + touch-action: pan-y; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Events touch-action attribute support</h1> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT. Tap Complete button under the rectangle when done. Expected: only pans in y direction.</h4> + <p>Note: this test is for touch-devices only</p> + <div id="target0"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem + nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. + Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit + lobortis nisl ut aliquip ex ea commodo consequat. + </p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + <p>Lorem ipsum dolor sit amet...</p> + </div> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + var test_touchaction = async_test("touch-action attribute test"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + // Check if "touch-action: pan-y" attribute works properly + //TA: 15.4 + on_event(btnComplete, 'click', function(event) { + detected_pointertypes[event.pointerType] = true; + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "scroll x offset should be 0 in the end of the test"); + assert_not_equals(target0.scrollTop, 0, "scroll y offset should not be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(target0, 'down').then(function() { + return touchScrollInTarget(target0, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: pan-y</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-rotated-divs_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-rotated-divs_touch-manual.html new file mode 100644 index 0000000000..1c09b15f1f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-rotated-divs_touch-manual.html @@ -0,0 +1,92 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: touch-action in rotated divs</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://w3c.github.io/pointerevents/#declaring-candidate-regions-for-default-touch-behaviors" /> + <meta name="assert" content="Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space"/> + <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> + <script type="text/javascript"> + var event_log = []; + + function resetTestState() { + event_log = []; + } + + function run() { + var current_test = 0; + var test_params = [ + { + test_obj: setup_pointerevent_test("'touch-action: pan-x' in a rotated div", ["touch"]), + touch_action: "pan-x", + expected_events: "pointercancel, pointercancel, pointerup, pointerup" + }, + { + test_obj: setup_pointerevent_test("'touch-action: pan-y' in a rotated div", ["touch"]), + touch_action: "pan-y", + expected_events: "pointerup, pointerup, pointercancel, pointercancel" + }, + ]; + + function setCurrentTouchAction() { + document.getElementById("target").style.touchAction = test_params[current_test].touch_action; + } + + setCurrentTouchAction(); + + on_event(document.getElementById("btnDone"), "click", function() { + test_params[current_test].test_obj.step(function () { + assert_equals(event_log.join(", "), test_params[current_test].expected_events); + }); + + event_log = []; + + test_params[current_test++].test_obj.done(); + if (current_test < 2) + setCurrentTouchAction(); + }); + + ["pointerup", "pointercancel"].forEach(function(eventName) { + on_event(document.getElementById("target"), eventName, function (event) { + event_log.push(event.type); + }); + }); + } + </script> + <style> + #target { + width: 200px; + height: 200px; + margin: 10px; + float: left; + touch-action: none; + background-color: green; + transform: rotate(-90deg); + } + + #btnDone { + padding: 20px; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: touch-action in rotated divs</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space + </h4> + <ol> + <li>Make 4 separate touch drags on Green, in this order: drag UP, then drag DOWN, then drag LEFT, then drag RIGHT.</li> + <li>Tap on Done.</li> + <li>Repeat the touch drags once again, in the same order.</li> + <li>Tap on Done.</li> + </ol> + <div id="target"></div> + <input type="button" id="btnDone" value="Done" /> + <div id="log" /> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-span-none-test_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-span-none-test_touch.html new file mode 100644 index 0000000000..845da068e6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-span-none-test_touch.html @@ -0,0 +1,86 @@ +<!doctype html> +<html> + <head> + <title>Span touch-action test</title> + <meta name="timeout" content="long"> + <meta name="assert" content="TA15.18 - The touch-action CSS property applies to all elements except non-replaced inline elements."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + height: 150px; + width: 200px; + overflow-y: auto; + background: black; + padding: 100px; + position: relative; + } + #testspan { + touch-action: none; + font-size: 72pt; + padding: 0px 0px 180px 0px; + border: 2px solid red; + } + </style> + </head> + <body onload="run()"> + <h2>Pointer Events touch-action attribute support</h2> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the span element. Tap Complete button under the rectangle when done.</h4> + <p>Note: this test is for touch only</p> + <div id="target0"> + <span id="testspan"> + Test span + </span> + </div> + <input type="button" id="btnComplete" value="Complete test"> + + <script type='text/javascript'> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + //TA 15.18 + var test_touchaction = async_test("touch-action attribute test in element"); + + on_event(btnComplete, 'click', function(event) { + test_touchaction.step(function() { + assert_not_equals(target0.scrollLeft, 0, "span scroll x offset should not be 0 in the end of the test"); + assert_not_equals(target0.scrollTop, 0, "span scroll y offset should not be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + on_event(btnComplete, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(testspan, 'down').then(function() { + return touchScrollInTarget(testspan, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-svg-none-test_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-svg-none-test_touch.html new file mode 100644 index 0000000000..252ed2fed0 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-svg-none-test_touch.html @@ -0,0 +1,83 @@ +<!doctype html> +<html> + <head> + <title>SVG test</title> + <meta name="timeout" content="long"> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + height: 350px; + width: 300px; + overflow-y: auto; + background: black; + padding: 100px; + position: relative; + } + </style> + </head> + <body onload="run()"> + <h2>Pointer Events touch-action attribute support</h2> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the circle. Tap Complete button under the rectangle when done.</h4> + <p>Note: this test is for touch only</p> + <div id="target0"> + <svg id="testSvg" width="555" height="555" style="touch-action: none; border: 4px double red;"> + <circle cx="305" cy="305" r="250" stroke="green" stroke-width="4" fill="yellow" /> + Sorry, your browser does not support inline SVG. + </svg> + </div> + <br> + <input type="button" id="btnComplete" value="Complete test"> + <script type='text/javascript'> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + var test_touchaction = async_test("touch-action attribute test in SVG"); + + on_event(btnComplete, 'click', function(event) { + test_touchaction.step(function() { + assert_equals(target0.scrollLeft, 0, "SVG scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "SVG scroll y offset should be 0 in the end of the test"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction.done(); + }); + updateDescriptionComplete(); + }); + + on_event(btnComplete, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(testSvg, 'down').then(function() { + return touchScrollInTarget(testSvg, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-table-none-test_touch.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-table-none-test_touch.html new file mode 100644 index 0000000000..6f5e16a8c5 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-table-none-test_touch.html @@ -0,0 +1,139 @@ +<!doctype html> +<html> + <head> + <title>Table touch-action test</title> + <meta name="timeout" content="long"> + <meta name="assert" content="TA15.19 The touch-action CSS property applies to all elements except table rows, row groups, table columns, and column groups."> + <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 src="pointerevent_support.js"></script> + <style> + #target0 { + height: 150px; + width: 200px; + overflow-y: auto; + background: black; + padding: 100px; + position: relative; + } + #testtable{ + color: white; + width: 350px; + padding: 0px 0px 200px 0px; + border: 2px solid green; + } + .testtd, .testth { + border: 2px solid green; + height: 80px; + } + #row1 { + touch-action: none; + } + #cell3 { + touch-action: none; + } + </style> + </head> + <body onload="run()"> + <h2>Pointer Events touch-action attribute support</h2> + <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT starting your touch over the 1st Row. <br> + And try to scroll element DOWN then RIGHT starting your touch inside of the Cell 3, then tap complete button.</h4> + <p>Note: this test is for touch only</p> + <div id="target0"> + <table id="testtable"> + <caption>The caption, first row element, and cell 3 have touch-action: none.</caption> + <tr id="row1"><th class="testth">Header 1 <td class="testtd">Cell 1 <td class="testtd">Cell 2</tr> + <tr id="row2"><th class="testth">Header 2 <td id="cell3" class="testtd">Cell 3 <td class="testtd">Cell 4</tr> + <tr id="row3"> <th class="testth">Header 3 <td class="testtd">Cell 5 <td class="testtd"> Cell 6</tr> + </table> + </div> + <br> + <input type="button" id="btnComplete" value="Complete test"> + + <script type='text/javascript'> + var detected_pointertypes = {}; + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + var isFirstPart = true; + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + var actions_promise; + + //TA 15.19 + var test_touchaction_cell = async_test("touch-action attribute test on the cell"); + var test_touchaction_row = async_test("touch-action attribute test on the row"); + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(btnComplete, 'click', function(event) { + test_touchaction_cell.step(function() { + assert_equals(target0.scrollLeft, xScr1, "table scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, yScr1, "table scroll y offset should be 0 in the end of the test"); + assert_true(xScrollIsReceived && yScrollIsReceived, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively"); + }); + + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_touchaction_cell.done(); + }); + updateDescriptionComplete(); + }); + + on_event(btnComplete, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + }); + + on_event(target0, 'scroll', function(event) { + if(isFirstPart) { + xScr1 = target0.scrollLeft; + yScr1 = target0.scrollTop; + + if(xScr1 != xScr0) { + xScrollIsReceived = true; + } + + if(yScr1 != yScr0) { + test_touchaction_row.step(function () { + yScrollIsReceived = true; + }); + } + + if(xScrollIsReceived && yScrollIsReceived) { + test_touchaction_row.done(); + } + } + else { + test_touchaction_cell.step(failOnScroll, "scroll received while shouldn't"); + } + }); + + // Inject touch inputs. + actions_promise = touchScrollInTarget(row1, 'down').then(function() { + return touchScrollInTarget(row1, 'right'); + }).then(function() { + isFirstPart = false; + return touchScrollInTarget(cell3, 'down'); + }).then(function() { + return touchScrollInTarget(cell3, 'right'); + }).then(function() { + return clickInTarget("touch", btnComplete); + }); + } + </script> + <h1>touch-action: none</h1> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-verification.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-verification.html new file mode 100644 index 0000000000..6a47eaee27 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-verification.html @@ -0,0 +1,90 @@ +<!doctype html> +<html> + <head> + <title>touch-action: basic verification</title> + <meta name="assert" content="TA15.20 - The touch-action CSS property determines whether touch input MAY trigger default behavior supplied by the user agent. + auto: The user agent MAY determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element. + none: Touches that begin on the element MUST NOT trigger default touch behaviors. + pan-x: The user agent MAY consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content. + pan-y: The user agent MAY consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content. + manipulation: The user agent MAY consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification."> + <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> + <style> + /* + Give some rules below something to override in order to test + that they really are being parsed + */ + .defnone { + touch-action: none; + } + </style> + </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="default" expected="auto"></div> + <div class="test defnone" id="stylesheet-none" expected="none"></div> + <div class="test defnone" id="explicit-auto" style="touch-action: auto;" expected="auto"></div> + <div class="test" id="explicit-pan-x" style="touch-action: pan-x;" expected="pan-x"></div> + <div class="test" id="explicit-pan-left" style="touch-action: pan-left;" expected="pan-left"></div> + <div class="test" id="explicit-pan-right" style="touch-action: pan-right;" expected="pan-right"></div> + <div class="test" id="explicit-pan-y" style="touch-action: pan-y;" expected="pan-y"></div> + <div class="test" id="explicit-pan-up" style="touch-action: pan-up;" expected="pan-up"></div> + <div class="test" id="explicit-pan-down" style="touch-action: pan-down;" expected="pan-down"></div> + <div class="test" id="explicit-pan-x-pan-y" style="touch-action: pan-x pan-y;" expected="pan-x pan-y"></div> + <div class="test" id="explicit-pan-y-pan-x" style="touch-action: pan-y pan-x;" expected="pan-x pan-y"></div> + <div class="test" id="explicit-pan-left-pan-up" style="touch-action: pan-left pan-up;" expected="pan-left pan-up"></div> + <div class="test" id="explicit-pan-left-pan-down" style="touch-action: pan-left pan-down;" expected="pan-left pan-down"></div> + <div class="test" id="explicit-pan-right-pan-up" style="touch-action: pan-right pan-up;" expected="pan-right pan-up"></div> + <div class="test" id="explicit-pan-right-pan-down" style="touch-action: pan-right pan-down;" expected="pan-right pan-down"></div> + <div class="test" id="explicit-pan-up-pan-left" style="touch-action: pan-up pan-left;" expected="pan-left pan-up"></div> + <div class="test" id="explicit-pan-up-pan-right" style="touch-action: pan-up pan-right;" expected="pan-right pan-up"></div> + <div class="test" id="explicit-pan-down-pan-left" style="touch-action: pan-down pan-left;" expected="pan-left pan-down"></div> + <div class="test" id="explicit-pan-down-pan-right" style="touch-action: pan-down pan-right;" expected="pan-right pan-down"></div> + <div class="test" id="explicit-manipulation" style="touch-action: manipulation;" expected="manipulation"></div> + <div class="test" id="explicit-none" style="touch-action: none;" expected="none"></div> + <div class="test" id="explicit-invalid-1" style="touch-action: bogus;" expected="auto"></div> + <div class="test defnone" id="explicit-invalid-2" style="touch-action: auto pan-x;" expected="none"></div> + <div class="test" id="explicit-invalid-3" style="touch-action: pan-y none;" expected="auto"></div> + <div class="test" id="explicit-invalid-4" style="touch-action: pan-x pan-x;" expected="auto"></div> + <div class="test" id="explicit-invalid-5" style="touch-action: manipulation pan-x;" expected="auto"></div> + <div class="test" id="explicit-invalid-6" style="touch-action: pan-x pan-left;" expected="auto"></div> + <div class="test" id="explicit-invalid-7" style="touch-action: auto pan-left;" expected="auto"></div> + <div class="test" id="explicit-invalid-8" style="touch-action: none pan-left;" expected="auto"></div> + <div class="test" id="explicit-invalid-9" style="touch-action: pan-x pan-right;" expected="auto"></div> + <div class="test" id="explicit-invalid-10" style="touch-action: pan-y pan-up;" expected="auto"></div> + <div class="test" id="explicit-invalid-11" style="touch-action: pan-y pan-down;" expected="auto"></div> + <div class="test" id="explicit-invalid-12" style="touch-action: pan-left pan-right;" expected="auto"></div> + <div class="test" id="explicit-invalid-13" style="touch-action: pan-up pan-down;" expected="auto"></div> + <div style="touch-action: none;"> + <div class="test" id="not-inherited" expected="auto"></div> + <div class="test" id="inherit" style="touch-action: inherit;" expected="none"></div> + </div> + <div class="test defnone" id="initial" style="touch-action: initial;" expected="auto"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-adjustment_click_target.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-adjustment_click_target.html new file mode 100644 index 0000000000..46d5ac1793 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-adjustment_click_target.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Touch-generated events should have the same target</title> +<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> +<p>Touch letter 'O' below to run the test. If a "PASS" result appears the test passes, otherwise it fails</p> +<p><a href="#" id="link">Link</a> <span id="target">O</span></p> +<div id="log"></div> +<script> +let input_gesture; +const target = document.getElementById('target'); +const xPosition = Math.ceil(target.offsetLeft + 2); +const yPosition = Math.ceil(target.offsetTop + 2); + +function inject_input() { + let actions = new test_driver.Actions(); + return actions + .addPointer("touchPointer", "touch") + .setPointer("touchPointer") + .pointerMove(xPosition, yPosition) + .pointerDown() + .pointerUp() + .send(); +} + + +addEventListener('load', () => { + input_gesture = inject_input(); +}); + +async_test(t => { + const link = document.getElementById('link'); + const expectedEventLog = ['pointerdown-link', 'touchstart-link', 'pointerup-link', 'touchend-link', 'click-link']; + const eventLogRecorder = []; + + const eventNames = ['touchstart', 'touchmove', 'touchend', 'pointerdown', 'pointermove', 'pointerup', 'click']; + for (eventName of eventNames) { + document.addEventListener(eventName, t.step_func(event => { + // TouchEvent and PointerEvent should have the same un-adjusted coordinates. + // click event should have coordinates adjusted to link element. + const eventClientX = event.clientX || (event.touches.length > 0 ? event.touches[0].clientX : 0); + const eventClientY = event.clientY || (event.touches.length > 0 ? event.touches[0].clientY : 0); + + if (event.type === 'click') { + assert_equals(document.elementFromPoint(eventClientX, eventClientY), link, + 'click should have clientX/Y adjusted to link.'); + } else if (event.type != 'touchend') { + assert_equals(eventClientX, xPosition, + `${event.type} should have un-adjusted x coordinates.`); + assert_equals(eventClientY, yPosition, + `${event.type} should have un-adjusted y coordinates.`); + } + + // All events should have target adjusted to link. + const targetName = event.target.id || event.target.nodeName || '[null]'; + eventLogRecorder.push(`${event.type}-${targetName}`); + if (event.type === 'click') { + assert_array_equals(eventLogRecorder, expectedEventLog); + input_gesture.then(() => { t.done(); }); + } + })); + } +}); +</script> 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> diff --git a/testing/web-platform/tests/pointerevents/pointerup_after_pointerdown_target_removed.html b/testing/web-platform/tests/pointerevents/pointerup_after_pointerdown_target_removed.html new file mode 100644 index 0000000000..65c6ea314c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerup_after_pointerdown_target_removed.html @@ -0,0 +1,61 @@ +<!DOCTYPE HTML> +<title>pointerup event fired after pointerdown target is removed</title> +<meta name="variant" content="?mouse"> +<meta name="variant" content="?touch"> +<meta name="variant" content="?pen"> +<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 src="pointerevent_support.js"></script> + +<style> + div.target { + width: 100px; + height: 50px; + } +</style> +<div class="target" id="parent"> + <div class="target" id="child">child</div> +</div> +<div id="done">done</div> + +<script> + 'use strict'; + const pointer_type = location.search.substring(1); + + const parent = document.getElementById("parent"); + const child = document.getElementById("child"); + const done = document.getElementById("done"); + + let event_log = []; + + function logEvent(e) { + event_log.push(`${e.type}(${e.eventPhase})`); + } + + parent.addEventListener("pointerup", logEvent); + parent.addEventListener("mouseup", logEvent); + child.addEventListener("pointerdown", e => e.target.remove(), {once:true}); + + promise_test(async () => { + let done_click_promise = getEvent("click", done); + + let actions = new test_driver.Actions() + .addPointer("TestPointer", pointer_type) + .pointerMove(0, 0, {origin: parent}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: done}) + .pointerDown() + .pointerUp(); + + await actions.send(); + await done_click_promise; + + assert_equals(event_log.toString(), + "pointerup(2),mouseup(2)", + "received events"); + }, `pointerup event from ${pointer_type} fired after pointerdown target is removed`); +</script> diff --git a/testing/web-platform/tests/pointerevents/resources/iframe-touch-action-none-subframe.html b/testing/web-platform/tests/pointerevents/resources/iframe-touch-action-none-subframe.html new file mode 100644 index 0000000000..0a894d4401 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/iframe-touch-action-none-subframe.html @@ -0,0 +1,26 @@ +<html> + <style> + body { + width: 200px; + height: 150px; + padding: 0px; + margin: 0px; + background-color: lightgreen + } + </style> + <body></body> + <script> + function handler(e) { + window.top.postMessage({ + "type": "subframe-event", + "eventType": e.type + }, "*"); + } + + ["pointerup", "pointercancel"].forEach(eventType => { + document.body.addEventListener( + eventType, + handler); + }); + </script> +</html> diff --git a/testing/web-platform/tests/pointerevents/resources/minimal.html b/testing/web-platform/tests/pointerevents/resources/minimal.html new file mode 100644 index 0000000000..9402b95cb1 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/minimal.html @@ -0,0 +1,4 @@ +<body>Minimal HTML</body> +<script> + parent.postMessage({"type": "subframe-loaded"}, "*"); +</script> diff --git a/testing/web-platform/tests/pointerevents/resources/pointerevent_attributes_hoverable_pointers-iframe.html b/testing/web-platform/tests/pointerevents/resources/pointerevent_attributes_hoverable_pointers-iframe.html new file mode 100644 index 0000000000..5e55868282 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/pointerevent_attributes_hoverable_pointers-iframe.html @@ -0,0 +1,10 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + </head> + <body> + <div id="square2" class="square"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/resources/pointerevent_fractional_coordinates-iframe.html b/testing/web-platform/tests/pointerevents/resources/pointerevent_fractional_coordinates-iframe.html new file mode 100644 index 0000000000..5245a3f2e1 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/pointerevent_fractional_coordinates-iframe.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + </head> + <style> + .square { + width: 3px; + height:3px; + background: black; + cursor: pointer; + } + #s1 { + top: 10px; + left: 10px; + } + #s2 { + top: 30px; + left: 50px; + } + #s3 { + top: 50px; + left: 30px; + } + </style> + <body> + <div id="s1" class="square"></div> + <div id="s2" class="square"></div> + <div id="s3" class="square"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/resources/pointerevent_mouse_pointercapture_inactivate_pointer-iframe.html b/testing/web-platform/tests/pointerevents/resources/pointerevent_mouse_pointercapture_inactivate_pointer-iframe.html new file mode 100644 index 0000000000..3c88328b00 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/pointerevent_mouse_pointercapture_inactivate_pointer-iframe.html @@ -0,0 +1,3 @@ +<body id='innerFrame' style='height:500px; width: 500px; padding: 0; margin: 0;'> + <div id = 'target'></div> +</body> diff --git a/testing/web-platform/tests/pointerevents/resources/pointerevent_pointerId_scope-iframe.html b/testing/web-platform/tests/pointerevents/resources/pointerevent_pointerId_scope-iframe.html new file mode 100644 index 0000000000..c1fa22aa4c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/pointerevent_pointerId_scope-iframe.html @@ -0,0 +1,35 @@ +<!doctype html> +<html> + <!-- +Test cases for Pointer Events v1 spec +This document references Test Assertions (abbrev TA below) written by Cathy Chan +http://www.w3.org/wiki/PointerEvents/TestAssertions +--> + <head> + <title>Pointer Events pointerdown tests</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <script> + function run() { + var target1 = document.getElementById("target1"); + + var eventList = ['pointerenter', 'pointerover', 'pointermove', 'pointerout', 'pointerleave']; + + eventList.forEach(function(eventName) { + target1.addEventListener(eventName, function (event) { + var pass_data = { + 'pointerId' : event.pointerId, + 'type' : event.type, + 'pointerType' : event.pointerType + }; + top.postMessage(pass_data, "*"); + }); + }); + } + </script> + </head> + <body onload="run()"> + <div id="target1" class="touchActionNone"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/resources/pointerevent_pointercapture-iframe.html b/testing/web-platform/tests/pointerevents/resources/pointerevent_pointercapture-iframe.html new file mode 100644 index 0000000000..1007566269 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/pointerevent_pointercapture-iframe.html @@ -0,0 +1,14 @@ +<html id='innerFrameDocument'> +<style> +body { + touch-action:none; +} +</style> + <body id='innerFrame' style='height:500px; width: 500px; padding: 0; margin: 0;'> + <script> + top.document.testEventList.forEach(function(eventName) { + document.addEventListener(eventName, top.handleEvent); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/resources/pointerevent_pointerrawupdate_in_pointerlock-iframe.html b/testing/web-platform/tests/pointerevents/resources/pointerevent_pointerrawupdate_in_pointerlock-iframe.html new file mode 100644 index 0000000000..505fc2cae4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/resources/pointerevent_pointerrawupdate_in_pointerlock-iframe.html @@ -0,0 +1,10 @@ +<!doctype html> +<html> + <head> + <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> |