diff options
Diffstat (limited to 'testing/web-platform/tests/pointerevents')
69 files changed, 6619 insertions, 0 deletions
diff --git a/testing/web-platform/tests/pointerevents/OWNERS b/testing/web-platform/tests/pointerevents/OWNERS new file mode 100644 index 000000000..48ad3aa0b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/OWNERS @@ -0,0 +1,8 @@ +@bethge +@Steditor +@EvgenyAgafonchikov +@jacobrossi +@plehegar +@scottgonzalez +@staktrace +@RByers diff --git a/testing/web-platform/tests/pointerevents/README.md b/testing/web-platform/tests/pointerevents/README.md new file mode 100644 index 000000000..0cc019097 --- /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/pointerevent_attributes_hoverable_pointers-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_pointers-manual.html new file mode 100644 index 000000000..0922ae744 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_attributes_hoverable_pointers-manual.html @@ -0,0 +1,143 @@ +<!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> + <!-- 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', '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 + ' ' + expectedPointerType + ' ' + expectedEventType; + + detected_pointertypes[event.pointerType] = true; + + test(function() { + assert_equals(event.type, expectedEventType, "Event.type should be " + expectedEventType) + }, pointerTestName + "'s type should be " + expectedEventType); + + // Test button and buttons + if (event.type == 'pointerdown') { + test(function() { + assert_true(event.button == 0, "Button attribute is 0") + }, pointerTestName + "'s button attribute is 0 when left mouse button is pressed."); + test(function() { + assert_true(event.buttons == 1, "Buttons attribute is 1") + }, pointerTestName + "'s buttons attribute is 1 when left mouse button is pressed."); + } else if (event.type == 'pointerup') { + test(function() { + assert_true(event.button == 0, "Button attribute is 0") + }, pointerTestName + "'s button attribute is 0 when left mouse button is just released."); + test(function() { + assert_true(event.buttons == 0, "Buttons attribute is 0") + }, pointerTestName + "'s buttons attribute is 0 when left mouse button is just released."); + } else { + test(function() { + assert_true(event.button == -1, "Button attribute is -1") + }, pointerTestName + "'s button is -1 when mouse buttons are in released state."); + test(function() { + assert_true(event.buttons == 0, "Buttons attribute is 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_true(event.clientX >= targetBoundingClientRect.left && event.clientX < targetBoundingClientRect.right && event.clientY >= targetBoundingClientRect.top && event.clientY < targetBoundingClientRect.bottom, "ClientX/Y should be in the boundaries of the box"); + }, pointerTestName + "'s ClientX and ClientY attributes are correct."); + } else { + test(function () { + assert_true(event.clientX < targetBoundingClientRect.left || event.clientX > targetBoundingClientRect.right - 1 || event.clientY < targetBoundingClientRect.top || event.clientY > targetBoundingClientRect.bottom - 1, "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 value + test(function () { + assert_equals(event.isPrimary, true, "isPrimary should be true"); + }, pointerTestName + ".isPrimary attribute is correct."); + + // Test pointerId value + if (isNaN(expectedPointerId)) { + expectedPointerId = event.pointerId; + } else { + test(function () { + assert_equals(event.pointerId, expectedPointerId, "pointerId should remain the same for the same active pointer"); + }, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer."); + } + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", HOVERABLE_POINTERS); + 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(); + } + }); + }); + } + </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_nohover_pointers-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_attributes_nohover_pointers-manual.html new file mode 100644 index 000000000..0fd7904ef --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_attributes_nohover_pointers-manual.html @@ -0,0 +1,126 @@ +<!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> + <!-- 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']; + 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 + ' ' + expectedPointerType + ' ' + expectedEventType; + + detected_pointertypes[event.pointerType] = true; + + test(function() { + assert_equals(event.type, expectedEventType, "Event.type should be " + expectedEventType) + }, pointerTestName + "'s type should be " + expectedEventType); + + // Test button and buttons + test(function() { + assert_true(event.button == 0, "Button attribute is 0") + }, pointerTestName + "'s button attribute is 0 when left mouse button is pressed."); + + if (event.type == 'pointerdown' || event.type == 'pointerover' || event.type == 'pointerenter') { + test(function() { + assert_true(event.buttons == 1, "Buttons attribute is 1") + }, pointerTestName + "'s buttons attribute is 1 when left mouse button is pressed."); + } else { + test(function() { + assert_true(event.buttons == 0, "Buttons attribute is 0") + }, pointerTestName + "'s buttons is 0 when mouse buttons are in released state."); + } + + // Test clientX and clientY + test(function () { + assert_true(event.clientX >= targetBoundingClientRect.left && event.clientX < targetBoundingClientRect.right && event.clientY >= targetBoundingClientRect.top && event.clientY < targetBoundingClientRect.bottom, "ClientX/Y should be in 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, "isPrimary should be true"); + }, pointerTestName + ".isPrimary attribute is correct."); + + // Test pointerId value + if (isNaN(expectedPointerId)) { + expectedPointerId = event.pointerId; + } else { + test(function () { + assert_equals(event.pointerId, expectedPointerId, "pointerId should remain the same for the same active pointer"); + }, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer."); + } + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", NOHOVER_POINTERS); + 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(); + } + }); + }); + } + </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_capture_mouse-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_capture_mouse-manual.html new file mode 100644 index 000000000..c4c7bc8c7 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_capture_mouse-manual.html @@ -0,0 +1,132 @@ +<!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> + <!-- 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 detected_pointertypes = {}; + add_completion_callback(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) { + test_gotpointercapture.done(); + log("gotpointercapture", target0); + }); + + on_event(target0, 'lostpointercapture', function(e) { + test_lostpointercapture.done(); + isPointerCapture = false; + log("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) { + test_pointermove0.done(); + log("pointermove", document.getElementById('target0')); + pointermoveNoCaptureGot0 = true; + } + if(isPointerCapture) { + if(!pointermoveCaptureGot0) { + test(function() { + assert_true(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"); + log("pointermove", document.getElementById('target0')); + pointermoveCaptureGot0 = true; + } + 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"); + log("pointermove", document.getElementById('target0')); + ownEventForTheCapturedTargetGot = true; + } + } + }); + + on_event(target1, "pointermove", function (event) { + if(isPointerCapture == true) { + test(function() { + assert_unreached("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) { + test_pointermove1.done(); + log("pointermove", document.getElementById('target1')); + pointermoveNoCaptureGot1 = true; + } + }); + } + </script> + <h1>Pointer Events Capture Test</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_capture_suppressing_mouse-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_capture_suppressing_mouse-manual.html new file mode 100644 index 000000000..763e17916 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_capture_suppressing_mouse-manual.html @@ -0,0 +1,196 @@ +<!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> + <!-- 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> Put your mouse over the black rectangle. pointerover and pointerenter should be logged inside of it.</li> + <li> Move your mouse out of the black rectangle. pointerout and pointerleave should be logged inside of it</li> + <li> Put your mouse over the purple rectangle. pointerover and pointerenter should be logged inside of it.</li> + <li> Move your mouse out of the purple rectangle. pointerout and pointerleave should be logged inside of it</li> + <li> Press and hold left mouse button over "Set Capture" button and move mouse a litte inside the button. "gotpointercapture", "pointerover", and "pointerenter" should be logged in the black rectangle</li> + <li> Put your mouse over the purple rectangle and then move it out. Nothing should happen</li> + <li> Put your mouse over the black rectangle and then move it out. Nothing should happen.</li> + <li> Put your mouse over the purple rectangle and then release left mouse button. "lostpointercapture" should be logged in the black rectangle. Move your mouse in the purple rectangle a little. "pointerout" and "pointerleave" should be logged in the black rectangle. Also "pointerover" and "pointerenter" should be logged in the purple 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 isRelatedTargetValueTested = false; + var isTargetAuthenticityTested = false; + var lostPointerCaptureReceived = false; + var count = 0; + + var detected_pointertypes = {}; + add_completion_callback(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"); + + var test_pointerover_no_capture = async_test("pointerover event without capture received"); + var test_pointerover_capture = async_test("pointerover event with capture received"); + + var test_pointerout_no_capture = async_test("pointerout event without capture received"); + var test_pointerout_after_capture = async_test("pointerout event after lostpointercapture received"); + + var test_pointerenter_no_capture = async_test("pointerenter event without capture received"); + var test_pointerenter_capture = async_test("pointerenter event with capture received"); + + var test_pointerleave_no_capture = async_test("pointerleave event without capture received"); + var test_pointerleave_after_capture = async_test("pointerleave event after lostpointercapture received"); + + window.onload = function() { + on_event(captureButton, 'pointerdown', function(e) { + if(isPointerCapture == false) { + sPointerCapture(e); + isPointerCapture = true; + } + }); + + on_event(target0, 'gotpointercapture', function(e) { + test_gotpointercapture.done(); + log("gotpointercapture", target0); + }); + + on_event(target0, 'lostpointercapture', function(e) { + isPointerCapture = false; + lostPointerCaptureReceived = true; + test_lostpointercapture.done(); + log("lostpointercapture", target0); + }); + + run(); + } + + function run() { + on_event(target0, "pointerover", function (event) { + detected_pointertypes[ event.pointerType ] = true; + log("pointerover", target0); + if(isPointerCapture) { + test_pointerover_capture.done(); + if (!isRelatedTargetValueTested) { + test(function() { + assert_not_equals(event.relatedTarget, null, "relatedTarget should behave the same as when the capture is not set") + }, "relatedTarget is not null for boundary events even when the capture is set."); + isRelatedTargetValueTested = true; + } + var hitTest = document.elementFromPoint(event.clientX, event.clientY); + if(event.target !== hitTest && !isTargetAuthenticityTested) { + test(function () { + assert_not_equals(event.target, hitTest, "pointerover should be fired on capture target even if the pointer it not over the capture target"); + }, "pointerover should trigger the black rectangle even when pointer is not over black rectangle."); + isTargetAuthenticityTested = true; + } + } + else { + test_pointerover_no_capture.done(); + } + }); + + on_event(target0, "pointerout", function (event) { + log("pointerout", target0); + if(isPointerCapture) { + test(function() { + assert_unreached("pointerout shouldn't be sent to captured node as all the events are targeted at the capturing node"); + }, "pointerout shouldn't be sent to captured node as all the events are targeted at the capturing node."); + } + else { + if (lostPointerCaptureReceived) { + test_pointerout_after_capture.done(); + } else { + test_pointerout_no_capture.done(); + } + } + }); + + on_event(target0, "pointerenter", function (event) { + log("pointerenter", target0); + if(isPointerCapture) { + test_pointerenter_capture.done(); + } + else { + test_pointerenter_no_capture.done(); + } + }); + + on_event(target0, "pointerleave", function (event) { + log("pointerleave", target0); + if(isPointerCapture) { + test(function() { + assert_unreached("pointerleave shouldn't be sent to captured node as all the events are targeted at the capturing node"); + }, "pointerleave shouldn't be sent to captured node as all the events are targeted at the capturing node."); + } + else { + if (lostPointerCaptureReceived) { + test_pointerleave_after_capture.done(); + } else { + test_pointerleave_no_capture.done(); + } + } + }); + + // fail if capture is set but event is received for the non-captured target + on_event(target1, "pointerover", function (event) { + log("pointerover", target1); + if(isPointerCapture == true) { + test(function() { + assert_unreached("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"); + } + }); + + on_event(target1, "pointerout", function (event) { + log("pointerout", target1); + if(isPointerCapture == true) { + test(function() { + assert_unreached("pointerout shouldn't trigger for this target when capture is enabled"); + }, "pointerout shouldn't trigger for the purple rectangle while the black rectangle has capture"); + } + }); + + on_event(target1, "pointerenter", function (event) { + log("pointerenter", target1); + if(isPointerCapture == true) { + test(function() { + assert_unreached("pointerenter shouldn't trigger for this target when capture is enabled"); + }, "pointerenter shouldn't trigger for the purple rectangle while the black rectangle has capture"); + } + }); + + on_event(target1, "pointerleave", function (event) { + log("pointerleave", target1); + if(isPointerCapture == true) { + test(function() { + assert_unreached("pointerleave shouldn't trigger for this target when capture is enabled"); + }, "pointerleave shouldn't trigger for the purple rectangle while the black rectangle has capture"); + } + }); + } + </script> + <h1>Pointer Events Capture Test</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_change-touch-action-onpointerdown_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_change-touch-action-onpointerdown_touch-manual.html new file mode 100644 index 000000000..04d56cb7a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_change-touch-action-onpointerdown_touch-manual.html @@ -0,0 +1,135 @@ +<!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="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 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; + } + done(); + }); + + 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_true(before != after, "touch-action was changed"); + }, "touch-action was changed"); + + styleIsChanged = true; + } + }); + + on_event(target0, 'pointerup', function(event) { + firstTouchCompleted = true; + }); + } + </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_constructor.html b/testing/web-platform/tests/pointerevents/pointerevent_constructor.html new file mode 100644 index 000000000..b2a779d1f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_constructor.html @@ -0,0 +1,106 @@ +<!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 PointerEvent constructor works properly using synthetic pointerover and pointerout events. For valid results, this test must be run without generating real (trusted) pointerover or pointerout events on the black rectangle below.</h4> + <div id="target0"></div> + <script> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + + async_test(function() { + var target0 = document.getElementById("target0"); + // set values for non-default constructor + var testBubbles = true; + var testCancelable = true; + var testPointerId = 42; + var testPointerType = 'pen'; + var testClientX = 300; + var testClientY = 500; + var testWidth = 3; + var testHeight = 5; + var testTiltX = -45; + var testTiltY = 30; + var testButton = 0; + var testButtons = 1; + var testPressure = 0.4; + var testIsPrimary = true; + + on_event(target0, "pointerover", this.step_func(function(event) { + detected_pointertypes[ event.pointerType ] = true; + generate_tests(assert_equals, [ + ["custom bubbles", event.bubbles, testBubbles], + ["custom cancelable", event.cancelable, testCancelable], + ["custom pointerId", event.pointerId, testPointerId], + ["custom pointerType", event.pointerType, testPointerType], + ["custom button", event.button, testButton], + ["custom buttons", event.buttons, testButtons], + ["custom width", event.width, testWidth], + ["custom height", event.height, testHeight], + ["custom clientX", event.clientX, testClientX], + ["custom clientY", event.clientY, testClientY], + ["custom tiltX", event.tiltX, testTiltX], + ["custom tiltY", event.tiltY, testTiltY], + ["custom isPrimary", event.isPrimary, testIsPrimary] + ]); + test(function() { + assert_approx_equals(event.pressure, testPressure, 0.00000001, "custom pressure: "); + }, "custom pressure: "); + })); + + on_event(target0, "pointerout", this.step_func(function(event) { + generate_tests(assert_equals, [ + ["default pointerId", event.pointerId, 0], + ["default pointerType", event.pointerType, ""], + ["default width", event.width, 1], + ["default height", event.height, 1], + ["default tiltX", event.tiltX, 0], + ["default tiltY", event.tiltY, 0], + ["default pressure", event.pressure, 0], + ["default isPrimary", event.isPrimary, false] + ]); + })); + + on_event(window, "load", this.step_func_done(function() { + assert_not_equals(window.PointerEvent, undefined); + + var pointerEventCustom = new PointerEvent("pointerover", + {bubbles: testBubbles, + cancelable: testCancelable, + pointerId: testPointerId, + pointerType: testPointerType, + width: testWidth, + height: testHeight, + clientX: testClientX, + clientY: testClientY, + tiltX: testTiltX, + tiltY: testTiltY, + button: testButton, + buttons: testButtons, + pressure: testPressure, + isPrimary: testIsPrimary + }); + // A PointerEvent created with a PointerEvent constructor must have all its attributes set to the corresponding values provided to the constructor. + // For attributes where values are not provided to the constructor, the corresponding default values must be used. + // TA: 12.1 + target0.dispatchEvent(pointerEventCustom); + var pointerEventDefault = new PointerEvent("pointerout"); + target0.dispatchEvent(pointerEventDefault); + }, "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_element_haspointercapture-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture-manual.html new file mode 100644 index 000000000..1b479a64f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture-manual.html @@ -0,0 +1,127 @@ +<!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 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"); + + 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"); + }); + test_pointerEvent.done(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture_release_pending_capture-manual.html new file mode 100644 index 000000000..17ad3e24b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_element_haspointercapture_release_pending_capture-manual.html @@ -0,0 +1,73 @@ +<!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 type="text/javascript" src="pointerevent_support.js"></script> + <script> + 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) { + test_pointerEvent.done(); + }); + } + </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_gotpointercapture_before_first_pointerevent-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_gotpointercapture_before_first_pointerevent-manual.html new file mode 100644 index 000000000..754a58fac --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_gotpointercapture_before_first_pointerevent-manual.html @@ -0,0 +1,97 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: gotpiontercapture is fired first and asynchronously.</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="After setting capture, the gotpointercapture dispatched to the capturing element before any other event is fired." /> + <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("gotpointercapture 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); + + var target0; + var listener; + var pointerdown_event; + var detected_pointerEvents = new Array(); + var eventRcvd = false; + var isWaiting = false; + + + function run() { + target0 = document.getElementById("target0"); + target0.style["touchAction"] = "none"; + listener = document.getElementById("listener"); + + // listen to all events + for (var i = 0; i < All_Pointer_Events.length; i++) { + on_event(listener, All_Pointer_Events[i], function (event) { + if (event.type == "gotpointercapture") { + check_PointerEvent(event); + + // TA: 10.2 + assert_true(isWaiting, "gotpointercapture must be fired asynchronously"); + isWaiting = false; + + // if any events have been received with same pointerId before gotpointercapture, then fail + var eventsRcvd_str = ""; + if (eventRcvd) { + eventsRcvd_str = "Events received before gotpointercapture: "; + 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 gotpointercapture." + eventsRcvd_str); + assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerID is same for pointerdown and gotpointercapture"); + }); + } + else { + if (pointerdown_event.pointerId === event.pointerId) { + assert_false(isWaiting, event.type + " must be fired after gotpointercapture"); + detected_pointerEvents.push(event.type); + eventRcvd = true; + test_pointerEvent.done(); // complete test + } + } + }); + } + + // set pointer capture + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[event.pointerType] = true; + pointerdown_event = event; + listener.setPointerCapture(event.pointerId); + isWaiting = true; + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: Dispatch gotpointercapture event</h1> + <h4>Test Description: + After pointer capture is set for a pointer, and prior to dispatching the first event for the pointer, the gotpointercapture + event must be dispatched to the element that is receiving the pointer capture. The gotpointercapture event must be dispatched asynchronously. + </h4> + <br /> + <div id="target0"> + Use the mouse, touch or pen to tap/click this box. + </div> + <div id="listener">Do not hover over or touch this element. </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_lostpointercapture_for_disconnected_node-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node-manual.html new file mode 100644 index 000000000..4d152b73a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_for_disconnected_node-manual.html @@ -0,0 +1,78 @@ +<!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="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 detected_pointertypes = {}; + add_completion_callback(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() { + on_event(captureButton, 'pointerdown', function(event) { + detected_pointertypes[event.pointerType] = true; + sPointerCapture(event); + }); + + on_event(target0, 'gotpointercapture', function(e) { + log("gotpointercapture", target1); + setTimeout(function() { + isDisconnected = true; + target0.parentNode.removeChild(target0); + }, 250); + }); + + on_event(target0, 'lostpointercapture', function(e) { + log("lostpointercapture on element", target1); + 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) { + log("lostpointercapture on document", target1); + test(function() { + // TA: 11.3 + assert_true(isDisconnected, "lostpointercapture must be fired on the document"); + + }, "lostpointercapture is dispatched on the document"); + test_lostpointercapture.done(); + }); + } + </script> + <h1>Pointer Events Capture Test</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_lostpointercapture_is_first-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_is_first-manual.html new file mode 100644 index 000000000..e446d1844 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_is_first-manual.html @@ -0,0 +1,129 @@ +<!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="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; + + add_completion_callback(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; + log("gotpointercapture", target0); + return; + } + else if (event.type == "lostpointercapture") { + log("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"); + }); + test_pointerEvent.done(); // complete test + } + 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; + } + } + } + }); + } + } + </script> + <h1>Pointer Events Capture Test</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_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 000000000..eb758c707 --- /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_true(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_pointerId_scope-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerId_scope-manual.html new file mode 100644 index 000000000..3640cb6f6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerId_scope-manual.html @@ -0,0 +1,82 @@ +<!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> + <!-- 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 = {}; + + function run() { + var target0 = document.getElementById("target0"); + 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) { + var pe_event = JSON.parse(event.data); + receivedEventsInnerFrame[pe_event.type] = 1; + checkPointerId(pe_event, 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; + }); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointercancel_touch-manual.html new file mode 100644 index 000000000..70a65eeb5 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointercancel_touch-manual.html @@ -0,0 +1,77 @@ +<!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> + <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"); + + 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"); + check_PointerEvent(event); + }); + }); + + 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"); + }); + test_pointerEvent.done(); + }); + } + </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_pointerenter_does_not_bubble-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerenter_does_not_bubble-manual.html new file mode 100644 index 000000000..3f0583364 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerenter_does_not_bubble-manual.html @@ -0,0 +1,88 @@ +<!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> + <!-- 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"); + + on_event(target0, "pointerenter", function (event) { + pointerenter_event = event; + + check_PointerEvent(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: "); + }); + test_pointerEvent.done(); // complete test + }); + + // 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); + }); + }); + } + + </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>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_after_pointercancel_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_after_pointercancel_touch-manual.html new file mode 100644 index 000000000..56be26549 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_after_pointercancel_touch-manual.html @@ -0,0 +1,66 @@ +<!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> + <!-- 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 eventTested = false; + var pointercancel_event = null; + var detected_pointertypes = {}; + + function run() { + var target0 = document.getElementById("target0"); + + 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) { + if(eventTested == false) { + 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"); + }); + eventTested = true; + test_pointerleave.done(); + } + } + else { + test_pointerleave.step(function() { + assert_unreached("pointerleave received before pointercancel"); + }, "pointerleave received before pointercancel"); + } + } + }); + } + + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendant_over-manual.html new file mode 100644 index 000000000..8f4f4bfc7 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendant_over-manual.html @@ -0,0 +1,61 @@ +<!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="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 = {}; + + 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(function() { + assert_true(!pointerleaveReceived, "pointerleave shouldn't be received on descendant's pointerover") + }, "pointerleave shouldn't be received on descendant's pointerover"); + }); + + on_event(target0, "pointerleave", function (event) { + if (eventTested == false) { + pointerleaveReceived = true; + eventTested = true; + } + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendants-manual.html new file mode 100644 index 000000000..ac9edcff3 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_descendants-manual.html @@ -0,0 +1,52 @@ +<!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="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 eventTested = false; + var detected_pointertypes = {}; + + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var test_pointerleave = async_test("pointerleave event received"); + + 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) { + if (eventTested == false) { + test_pointerleave.done(); + eventTested = true; + } + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_does_not_bubble-manual.html new file mode 100644 index 000000000..c0e551cd6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_does_not_bubble-manual.html @@ -0,0 +1,77 @@ +<!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> + <!-- 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 + // 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; + check_PointerEvent(event); + 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); + }); + test_pointerEvent.done(); // complete test + }); + } + </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>
\ No newline at end of file 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 000000000..38a2f6979 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerleave_pen-manual.html @@ -0,0 +1,58 @@ +<!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"); + + on_event(target0, "pointerleave", function (event) { + detected_pointertypes[event.pointerType] = true; + 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_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"); + }); + 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. + </h4> + <br /> + <div id="target0"> + Use a pen to hover over then lift up away from this element. + </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>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_pointermove-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointermove-manual.html new file mode 100644 index 000000000..cf1a1ee4e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointermove-manual.html @@ -0,0 +1,44 @@ +<!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> + <!-- 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 eventTested = false; + var detected_pointertypes = {}; + var test_pointermove = async_test("pointermove event received"); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + // 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; + if (eventTested == false) { + test_pointermove.done(); + eventTested = true; + } + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_isprimary_same_as_pointerdown-manual.html new file mode 100644 index 000000000..b43d59f4f --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_isprimary_same_as_pointerdown-manual.html @@ -0,0 +1,70 @@ +<!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> + <!-- 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"); + + 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: "); + }); + test_pointerEvent.done(); // complete test + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_on_chorded_mouse_button-manual.html new file mode 100644 index 000000000..8bade6355 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointermove_on_chorded_mouse_button-manual.html @@ -0,0 +1,76 @@ +<!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> + <!-- 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 eventTested = false; + 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"); + + // 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_true(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_true(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_true(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_true(step === 3, "The pointerup event must be triggered after pressing and releasing the second button.");}); + test_pointermove.step(function() {assert_true(event.buttons === 0, "The pointerup event must be triggered by releasing the last pressed button.");}); + test_pointermove.done(); + eventTested = true; + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_after_pointercancel_touch-manual.html new file mode 100644 index 000000000..1888591a7 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_after_pointercancel_touch-manual.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> + <!-- 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 eventTested = false; + var pointercancel_event = null; + var detected_pointertypes = {}; + + function run() { + var target0 = document.getElementById("target0"); + + 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) { + if (eventTested == false) { + 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"); + }); + eventTested = true; + test_pointerout.done(); + } + } + else { + test_pointerout.step(function() { + assert_true(false, + "pointercancel received before pointerout"); + }, "pointercancel received before pointerout"); + } + } + }); + } + + </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_pen-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_pen-manual.html new file mode 100644 index 000000000..3973948c1 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_pen-manual.html @@ -0,0 +1,57 @@ +<!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> + <!-- 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 eventTested = false; + var isPointerupReceived = false; + var detected_pointertypes = {}; + + function run() { + var target0 = document.getElementById("target0"); + + // 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') { + if (eventTested == false) { + eventTested = true; + 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"); + } + }); + } + + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_received_once-manual.html new file mode 100644 index 000000000..4827ae91d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_pointerout_received_once-manual.html @@ -0,0 +1,58 @@ +<!doctype html> +<html> + <head> + <title>pointerout received just once</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="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 = {}; + + 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++; + + setTimeout(function() { + test(function() { + assert_true(pointeroutCounter == 1, "pointerout received just once") + }, "pointerout received just once"); + done(); + }, 5000); + }); + } + </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_releasepointercapture_events_to_original_target-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_events_to_original_target-manual.html new file mode 100644 index 000000000..904efa46b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_events_to_original_target-manual.html @@ -0,0 +1,131 @@ +<!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"/> + <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> + <!-- 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("lostpointercapture: subsequent events to target."); // 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 captured_event; + var test_done = false; + var overEnterEventsFail = false; + var outLeaveEventsFail = false; + var f_gotPointerCapture = false; + var 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(!overEnterEventsFail) { + test(function() { + assert_true(f_gotPointerCapture, "pointerover/enter should not be received when the target doesn't have capture and pointer is not over it."); + }, "pointerover/enter should not be received when the target doesn't have capture and 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."); + }, "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"); + }, "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 + ". "); + }, "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_pointerEvent.done(); // complete test + test_done = true; + } + } + } + + function run() { + 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); + } + } + </script> + </head> + <body onload="run()"> + <div id="listener"></div> + <h1>Pointer Event: releasePointerCapture() - subsequent events follow normal hitting testing mechanisms</h1> + <h4> + Test Description: + 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"> + Use mouse, touch or pen to contact here and move around. + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_invalid_pointerid-manual.html new file mode 100644 index 000000000..fe2ab0061 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_invalid_pointerid-manual.html @@ -0,0 +1,76 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: releasePointerCapture DOMException - InvalidPointerId</title> + <meta name="assert" content="releasePointerCapture DOMException - InvalidPointerId"/> + <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 InvalidPointerId 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> + <!-- 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 InvalidPointerId"); // 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; + + 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; + + try { + listener.releasePointerCapture(invalid_pointerId); + + test_pointerEvent.step(function () { + assert_true(false, "DOMException not thrown. Expected: InvalidPointerId should have been thrown"); + }); + } catch (e) { + test_pointerEvent.step(function () { + assert_true(e.name == "InvalidPointerId", "DOMException should be InvalidPointerId"); + }); + } + test_pointerEvent.done(); // complete test + }); + + // set pointer capture + on_event(target0, "pointerdown", function (event) { + detected_pointertypes[event.pointerType] = true; + listener.setPointerCapture(event.pointerId); + }); + } + </script> + </head> + <body onload="run()"> + <div id="listener"></div> + <h1> Pointer Event: releasePointerCapture() DOMException - InvalidPointerId</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 InvalidPointerId 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>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch-manual.html new file mode 100644 index 000000000..105e3b5a9 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointercancel_touch-manual.html @@ -0,0 +1,71 @@ +<!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="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 detected_pointertypes = {}; + var test_pointerEvent = async_test("pointer capture is released on pointercancel"); + + var target0 = document.getElementById('target0'); + + add_completion_callback(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) { + log("gotpointercapture", document.getElementById('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) { + log("lostpointercapture", document.getElementById('target0')); + test_pointerEvent.step(function () { + assert_true(pointercancelGot, "pointercancel was received before lostpointercapture"); + }); + test_pointerEvent.done(); + }); + + on_event(target0, 'pointercancel', function(e) { + log("pointercancel", target0); + pointercancelGot = true; + }); + } + </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> + </div> + <div id="log"></div> + </body> +</html> diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse-manual.html new file mode 100644 index 000000000..df515436c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_onpointerup_mouse-manual.html @@ -0,0 +1,79 @@ +<!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="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 detected_pointertypes = {}; + add_completion_callback(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) { + log("gotpointercapture", document.getElementById('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"); + log("lostpointercapture", document.getElementById('target0')); + isPointerCapture = false; + done(); + }); + + on_event(target0, 'pointerup', function(e) { + log("pointerup", target0); + pointerupGot = true; + }); + } + </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> + </div> + <div id="log"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_release_right_after_capture-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_release_right_after_capture-manual.html new file mode 100644 index 000000000..5a166a57a --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_releasepointercapture_release_right_after_capture-manual.html @@ -0,0 +1,61 @@ +<!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="pointerevent_support.js"></script> + <script type="text/javascript"> + 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(e.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) { + test_setPointerCapture.done(); + }); + } + </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_setpointercapture_disconnected-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_disconnected-manual.html new file mode 100644 index 000000000..9e9646525 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_disconnected-manual.html @@ -0,0 +1,55 @@ +<!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="pointerevent_support.js"></script> + <script type="text/javascript"> + var detected_pointertypes = {}; + add_completion_callback(showPointerTypes); + var test_setPointerCapture = async_test("setPointerCapture: DOMException InvalidStateError"); + + 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"); + }); + } + test_setPointerCapture.done(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_inactive_button_mouse-manual.html new file mode 100644 index 000000000..b3e8debb7 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_inactive_button_mouse-manual.html @@ -0,0 +1,58 @@ +<!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="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({ explicit_done: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + + on_event(target0, "pointerover", function (event) { + detected_pointertypes[event.pointerType] = true; + target0.setPointerCapture(event.pointerId); + }); + + // 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) { + test(function() { + assert_false(captureGot, "pointer capture is not set while button state is inactive") + }, "pointer capture is not set while button state is inactive"); + 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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_invalid_pointerid-manual.html new file mode 100644 index 000000000..4dbe858db --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_invalid_pointerid-manual.html @@ -0,0 +1,65 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: gotPiontercapture 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 InvalidPointerId 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> + <!-- 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 InvalidPointerId"); // 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 = -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; + + try { + listener.setPointerCapture(INVALID_POINTERID); + + test_pointerEvent.step(function () { + assert_true(false, "DOMException: InvalidPointerId should have been thrown."); + }); + } catch (e) { + test_pointerEvent.step(function () { + assert_equals(e.name, "InvalidPointerId", "DOMException should be InvalidPointerId"); + }); + } + test_pointerEvent.done(); // complete test + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: DOMException InvalidPointerId</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 InvalidPointerId 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>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_override_pending_capture_element-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_override_pending_capture_element-manual.html new file mode 100644 index 000000000..4e4818c21 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_override_pending_capture_element-manual.html @@ -0,0 +1,63 @@ +<!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="pointerevent_support.js"></script> + <script type="text/javascript"> + 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) { + test_setPointerCapture.done(); + }); + } + </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_relatedtarget-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_relatedtarget-manual.html new file mode 100644 index 000000000..bc3195127 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_relatedtarget-manual.html @@ -0,0 +1,100 @@ +<!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="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 detected_pointertypes = {}; + add_completion_callback(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) { + log("gotpointercapture", document.getElementById('target0')); + }); + + on_event(target0, 'lostpointercapture', function(e) { + log("lostpointercapture", document.getElementById('target0')); + isPointerCapture = false; + }); + + run(); + } + + function run() { + // 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) { + log("pointerover", document.getElementById('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."); + done(); + } + }); + + on_event(target1, "pointerover", function (event) { + detected_pointertypes[ event.pointerType ] = true; + if(!isPointeroverGot) { + test(function() { + assert_true(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; + log("pointerover", document.getElementById('target1')); + } + }); + } + </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>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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_to_same_element_twice-manual.html new file mode 100644 index 000000000..161c5c2fc --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_setpointercapture_to_same_element_twice-manual.html @@ -0,0 +1,62 @@ +<!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="pointerevent_support.js"></script> + <script type="text/javascript"> + 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) { + test_setPointerCapture.done(); + }); + } + </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 000000000..1ee3b0b39 --- /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 000000000..ee479c7d6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_support.js @@ -0,0 +1,244 @@ +var All_Pointer_Events = [ + "pointerdown", + "pointerup", + "pointercancel", + "pointermove", + "pointerover", + "pointerout", + "pointerenter", + "pointerleave", + "gotpointercapture", + "lostpointercapture"]; + +// Check for conformance to PointerEvent interface +// TA: 1.1, 1.2, 1.6, 1.7, 1.8, 1.9, 1.10, 1.11, 1.12, 1.13 +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 + ' ' + (expectedPointerType == null ? event.pointerType : expectedPointerType) + ' ' + event.type; + + if (expectedPointerType != null) { + test(function () { + assert_equals(event.pointerType, expectedPointerType, "pointerType should be the same as the requested device."); + }, pointerTestName + " event pointerType is correct."); + } + + test(function () { + assert_true(event instanceof event.target.ownerDocument.defaultView.PointerEvent, "event is a PointerEvent event"); + }, pointerTestName + " event is a PointerEvent event"); + + + // Check attributes for conformance to WebIDL: + // * attribute exists + // * has proper type + // * if the attribute is "readonly", it cannot be changed + // TA: 1.1, 1.2 + 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" } + }; + [ + ["readonly", "long", "pointerId"], + ["readonly", "float", "width"], + ["readonly", "float", "height"], + ["readonly", "float", "pressure"], + ["readonly", "long", "tiltX"], + ["readonly", "long", "tiltY"], + ["readonly", "string", "pointerType"], + ["readonly", "boolean", "isPrimary"], + ["readonly", "long", "detail", 0] + ].forEach(function (attr) { + var readonly = attr[0]; + var type = attr[1]; + var name = attr[2]; + var value = attr[3]; + + // existence check + test(function () { + assert_true(name in event, name + " attribute in " + event.type + " event"); + }, pointerTestName + "." + name + " attribute exists"); + + // readonly check + if (readonly === "readonly") { + test(function () { + assert_readonly(event.type, name, event.type + "." + name + " cannot be changed"); + }, pointerTestName + "." + name + " is readonly"); + } + + // type check + test(function () { + assert_true(idl_type_check[type](event[name]), name + " attribute of type " + type); + }, pointerTestName + "." + name + " IDL type " + type + " (JS type was " + typeof event[name] + ")"); + + // value check if defined + if (value != undefined) { + test(function () { + assert_equals(event[name], value, name + " attribute value"); + }, pointerTestName + "." + name + " value is " + value + "."); + } + }); + + + // Check the pressure value + // TA: 1.6, 1.7, 1.8 + test(function () { + // TA: 1.6 + 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.type === "pointerup") { + assert_equals(event.pressure, 0, "pressure is 0 during pointerup"); + } + + // TA: 1.7, 1.8 + if (event.pointerType === "mouse") { + if (event.buttons === 0) { + assert_equals(event.pressure, 0, "pressure is 0 for mouse with no buttons pressed"); + } else { + 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") { + // TA: 1.9, 1.10, 1.13 + 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 properties for pointers other than mouse + } +} + +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 log(msg, el) { + if (++count > 10){ + count = 0; + el.innerHTML = ' '; + } + el.innerHTML = msg + '; ' + el.innerHTML; +} + + 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.setTimeout(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) { + window.setTimeout(function() { + objectScroller(target, 'left', 0);} + , 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 HOVERABLE_POINTERS = ['mouse', 'pen']; +const NOHOVER_POINTERS = ['touch']; + +function MultiPointerTypeTest(testName, types) { + this.testName = testName; + this.types = types; + this.currentTypeIndex = 0; + this.currentTest = null; + this.createNextTest(); +} + +MultiPointerTypeTest.prototype.skip = function() { + var prevTest = this.currentTest; + this.createNextTest(); + prevTest.timeout(); +} + +MultiPointerTypeTest.prototype.done = function() { + var prevTest = this.currentTest; + this.createNextTest(); + if (prevTest != null) + prevTest.done(); +} + +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); +} diff --git a/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_click-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_click-manual.html new file mode 100644 index 000000000..71b8a0828 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_click-manual.html @@ -0,0 +1,101 @@ +<!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 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 detected_pointertypes = {}; + var event_log = []; + + function end_of_test() { + showLoggedEvents(); + showPointerTypes(); + } + + function end_of_interaction() { + test(function () { + assert_equals(event_log.join(", "), + "mousedown@target1, mouseup@target1"); + }, "Event log"); + + test_pointerEvent.done(); // complete test + } + + function run() { + on_event(document.getElementById("done"), "click", end_of_interaction); + + var target_list = ["target0", "target1"]; + var pointer_event_list = ["pointerdown"]; + var mouse_event_list = ["mousedown", "mouseup"]; + + 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); + }); + }); + }); + } + </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. + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_drag_mouse-manual.html new file mode 100644 index 000000000..02bca8500 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_suppress_compat_events_on_drag_mouse-manual.html @@ -0,0 +1,114 @@ +<!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 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 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"); + + test_pointerEvent.done(); // complete test + } + + function run() { + on_event(document.getElementById("done"), "click", end_of_interaction); + + var target_list = ["target0", "target1"]; + var pointer_event_list = ["pointerdown"]; + 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; + + 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"); + }); + }); + }); + } + </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_touch-action-auto-css_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-auto-css_touch-manual.html new file mode 100644 index 000000000..f5e9d12c3 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-auto-css_touch-manual.html @@ -0,0 +1,129 @@ +<!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="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"); + + 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) { + test_touchaction.done(); + updateDescriptionComplete(); + } + }); + } + </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-test_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-button-test_touch-manual.html new file mode 100644 index 000000000..c57f869ef --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-button-test_touch-manual.html @@ -0,0 +1,109 @@ +<!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="pointerevent_support.js"></script> + <style> + #target0 { + height: 150px; + 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 black element DOWN moving your touch outside of the red border. Wait for description update.</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 = {}; + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + var scrollReturnInterval = 1000; + var isFirstPart = true; + setup({ explicit_timeout: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + + //TA 15.11 + var test_touchaction_div = async_test("touch-action attribute test out of element"); + var test_touchaction_button = async_test("touch-action attribute test in element"); + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(btnComplete, 'click', function(event) { + test_touchaction_button.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"); + assert_true(xScrollIsReceived && yScrollIsReceived, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively"); + }); + test_touchaction_button.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_div.step(function () { + yScrollIsReceived = true; + }); + updateDescriptionSecondStepTouchActionElement(target0, scrollReturnInterval); + } + + if(xScrollIsReceived && yScrollIsReceived) { + test_touchaction_div.done(); + updateDescriptionThirdStepTouchActionElement(target0, scrollReturnInterval); + setTimeout(function() { + isFirstPart = false; + }, 2 * scrollReturnInterval); // avoid immediate triggering while scroll is still being performed + } + } + else { + test_touchaction_button.step(failOnScroll, "scroll received while shouldn't"); + } + }); + } + </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 000000000..5fe617984 --- /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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-auto-child-none_touch-manual.html new file mode 100644 index 000000000..dcea28375 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-auto-child-none_touch-manual.html @@ -0,0 +1,117 @@ +<!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"> + <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> + .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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-none_touch-manual.html new file mode 100644 index 000000000..16e42954e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-none_touch-manual.html @@ -0,0 +1,112 @@ +<!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="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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch-manual.html new file mode 100644 index 000000000..c75d067e4 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch-manual.html @@ -0,0 +1,112 @@ +<!doctype html> +<html> + <head> + <title>touch-action: parent > child: pan-x > child: pan-x</title> + <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="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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch-manual.html new file mode 100644 index 000000000..d420cc56c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch-manual.html @@ -0,0 +1,117 @@ +<!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="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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_highest-parent-none_touch-manual.html new file mode 100644 index 000000000..d87d2b3a3 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_highest-parent-none_touch-manual.html @@ -0,0 +1,133 @@ +<!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="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"); + + 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) { + test_touchaction.done(); + updateDescriptionComplete(); + } + }); + } + + 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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_parent-none_touch-manual.html new file mode 100644 index 000000000..5e674a14d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-inherit_parent-none_touch-manual.html @@ -0,0 +1,112 @@ +<!doctype html> +<html> + <head> + <title>touch-action: inherit from parent: none</title> + <meta name="assert" content="TA15.8 - 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: `none` Child: `auto`"> + <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> + .scroller { + 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"); + + // Check if touch-action attribute works properly for embedded divs + // + // TA: 15.8 + 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + } + </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-keyboard-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-keyboard-manual.html new file mode 100644 index 000000000..3fef3f646 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-keyboard-manual.html @@ -0,0 +1,124 @@ +<!doctype html> +<html> + <head> + <title>touch-action: keyboard</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: 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"); + + 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) { + test_touchaction.done(); + updateDescriptionComplete(); + } + }); + } + + 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>
\ No newline at end of file diff --git a/testing/web-platform/tests/pointerevents/pointerevent_touch-action-mouse-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-mouse-manual.html new file mode 100644 index 000000000..fcc858451 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-mouse-manual.html @@ -0,0 +1,130 @@ +<!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="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"); + + 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) { + test_touchaction.done(); + updateDescriptionComplete(); + } + }); + } + + 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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-css_touch-manual.html new file mode 100644 index 000000000..dec694f3e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-none-css_touch-manual.html @@ -0,0 +1,111 @@ +<!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="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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + + on_event(target0, 'scroll', function(event) { + test_touchaction.step(failOnScroll, "scroll received while touch-action is none"); + }); + } + </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-pan-down-css_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-down-css_touch-manual.html new file mode 100644 index 000000000..16e1cb2fa --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-down-css_touch-manual.html @@ -0,0 +1,114 @@ +<!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="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"); + 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-left-css_touch-manual.html new file mode 100644 index 000000000..53fd2de13 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-left-css_touch-manual.html @@ -0,0 +1,114 @@ +<!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="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"); + 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-right-css_touch-manual.html new file mode 100644 index 000000000..53bbac65e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-right-css_touch-manual.html @@ -0,0 +1,114 @@ +<!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"> + <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: 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"); + 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-up-css_touch-manual.html new file mode 100644 index 000000000..0902700d2 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-up-css_touch-manual.html @@ -0,0 +1,114 @@ +<!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="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"); + 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-css_touch-manual.html new file mode 100644 index 000000000..e757baec6 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-css_touch-manual.html @@ -0,0 +1,106 @@ +<!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="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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y-pan-y_touch-manual.html new file mode 100644 index 000000000..e2a4386b2 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y-pan-y_touch-manual.html @@ -0,0 +1,111 @@ +<!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="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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y_touch-manual.html new file mode 100644 index 000000000..0c900ff74 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-x-pan-y_touch-manual.html @@ -0,0 +1,126 @@ +<!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="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"); + + 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) { + test_touchaction.done(); + updateDescriptionComplete(); + } + }); + } + </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-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-y-css_touch-manual.html new file mode 100644 index 000000000..4ad39ecc8 --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-pan-y-css_touch-manual.html @@ -0,0 +1,106 @@ +<!doctype html> +<html> + <head> + <title>touch-action: pan-y</title> + <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="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"); + + // 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"); + }); + test_touchaction.done(); + updateDescriptionComplete(); + }); + } + </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-span-test_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-span-test_touch-manual.html new file mode 100644 index 000000000..41635e0bf --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-span-test_touch-manual.html @@ -0,0 +1,113 @@ +<!doctype html> +<html> + <head> + <title>Span touch-action test</title> + <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="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 black element DOWN moving your touch outside of the red border. Wait for description update.</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 = {}; + + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var failScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + var scrollReturnInterval = 500; + var isFirstPart = true; + setup({ explicit_timeout: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + + //TA 15.18 + var test_touchaction_div = async_test("touch-action attribute test out of element"); + var test_touchaction_span = async_test("touch-action attribute test in element"); + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(btnComplete, 'click', function(event) { + test_touchaction_span.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"); + assert_true(!isFirstPart, "target0 x and y scroll offsets should be greater than 0 after first two interactions (outside red border) respectively"); + }); + test_touchaction_span.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_div.step(function () { + yScrollIsReceived = true; + }); + updateDescriptionSecondStepTouchActionElement(target0, scrollReturnInterval); + } + + if(xScrollIsReceived && yScrollIsReceived) { + test_touchaction_div.done(); + updateDescriptionThirdStepTouchActionElement(target0, scrollReturnInterval); + setTimeout(function() { + isFirstPart = false; + xScr0 = target0.scrollLeft; + xScr0 = target0.scrollLeft; + xScrollIsReceived = false; + yScrollIsReceived = false; + }, 2 * scrollReturnInterval); // avoid immediate triggering while scroll is still being performed + } + } + }); + } + </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-test_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-svg-test_touch-manual.html new file mode 100644 index 000000000..e9dc9d78e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-svg-test_touch-manual.html @@ -0,0 +1,122 @@ +<!doctype html> +<html> + <head> + <title>SVG 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="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 black element DOWN moving your touch outside of the red border. Wait for description update.</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 = {}; + var xScrollIsReceived = false; + var yScrollIsReceived = false; + var xScr0, yScr0, xScr1, yScr1; + var scrollReturnInterval = 1000; + var isFirstPart = true; + setup({ explicit_timeout: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + + var test_touchaction_div = async_test("touch-action attribute test out of SVG"); + var test_touchaction_svg = async_test("touch-action attribute test in SVG"); + + xScr0 = target0.scrollLeft; + yScr0 = target0.scrollTop; + + on_event(btnComplete, 'click', function(event) { + test_touchaction_svg.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"); + }); + test_touchaction_svg.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_div.step(function () { + yScrollIsReceived = true; + assert_true(true, "y-scroll received."); + }); + updateDescriptionSecondStepSVG(); + } + + if(xScrollIsReceived && yScrollIsReceived) { + test_touchaction_div.done(); + updateDescriptionThirdStepSVG(); + setTimeout(function() { + isFirstPart = false; + }, 2 * scrollReturnInterval); + } + } + }); + } + + function updateDescriptionSecondStepSVG() { + window.setTimeout(function() { + objectScroller(target0, 'up', 0);} + , scrollReturnInterval); + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT moving your touch outside of the red border"; + } + + function updateDescriptionThirdStepSVG() { + window.setTimeout(function() { + objectScroller(target0, 'left', 0);} + , scrollReturnInterval); + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the circle. Tap Complete button under the rectangle when done"; + } + + function objectScroller(target, direction, value) { + if (direction == 'up') { + target.scrollTop = 0; + } else if (direction == 'left') { + target.scrollLeft = 0; + } + } + </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-test_touch-manual.html b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-table-test_touch-manual.html new file mode 100644 index 000000000..fcc3a3e7c --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-table-test_touch-manual.html @@ -0,0 +1,141 @@ +<!doctype html> +<html> + <head> + <title>Table touch-action test</title> + <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="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 starting your touch over the 1st Row. Wait for description update.</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 scrollReturnInterval = 1000; + var isFirstPart = true; + setup({ explicit_timeout: true }); + add_completion_callback(showPointerTypes); + + function run() { + var target0 = document.getElementById("target0"); + var btnComplete = document.getElementById("btnComplete"); + + //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, 0, "table scroll x offset should be 0 in the end of the test"); + assert_equals(target0.scrollTop, 0, "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"); + }); + 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; + }); + updateDescriptionSecondStepTable(target0, scrollReturnInterval); + } + + if(xScrollIsReceived && yScrollIsReceived) { + test_touchaction_row.done(); + updateDescriptionThirdStepTable(target0, scrollReturnInterval); + setTimeout(function() { + isFirstPart = false; + }, 2 * scrollReturnInterval); // avoid immediate triggering while scroll is still being performed + } + } + else { + test_touchaction_cell.step(failOnScroll, "scroll received while shouldn't"); + } + }); + } + + function updateDescriptionSecondStepTable(target, scrollReturnInterval, element) { + window.setTimeout(function() { + objectScroller(target, 'up', 0); + } + , scrollReturnInterval); + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT staring your touch over the Row 1"; + } + + function updateDescriptionThirdStepTable(target, scrollReturnInterval) { + window.setTimeout(function() { + objectScroller(target, 'left', 0); + } + , scrollReturnInterval); + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the Cell 3"; + } + + </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 000000000..7800f2c9d --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_touch-action-verification.html @@ -0,0 +1,91 @@ +<!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> + <script src="pointerevent_support.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/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 000000000..5e5586828 --- /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_pointerId_scope-iframe.html b/testing/web-platform/tests/pointerevents/resources/pointerevent_pointerId_scope-iframe.html new file mode 100644 index 000000000..ab33560b3 --- /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(JSON.stringify(pass_data), "*"); + }); + }); + } + </script> + </head> + <body onload="run()"> + <div id="target1" class="touchActionNone"> + </div> + </body> +</html> |