diff options
Diffstat (limited to 'dom/events/test/pointerevents/wpt')
49 files changed, 5191 insertions, 0 deletions
diff --git a/dom/events/test/pointerevents/wpt/compat/pointerevent_touch-action_two-finger_interaction-manual.html b/dom/events/test/pointerevents/wpt/compat/pointerevent_touch-action_two-finger_interaction-manual.html new file mode 100644 index 0000000000..3537e0e1e9 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/compat/pointerevent_touch-action_two-finger_interaction-manual.html @@ -0,0 +1,102 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: touch-action test for two-finger interaction</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <link rel="help" href="https://compat.spec.whatwg.org/#touch-action" /> + <meta name="assert" content="Tests that a two-finger pan gesture is cancelled in 'touch-action: pan-x pan-y' but is allowed in 'touch-action: pinch-zoom'"/> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <script type="text/javascript"> + var event_log = []; + var active_pointers = 0; + + function resetTestState() { + event_log = []; + active_pointers = 0; + } + + function run() { + var test_pointer_events = [ + setup_pointerevent_test("two-finger pan on 'touch-action: pan-x pan-y'", ["touch"]), + setup_pointerevent_test("two-finger pan on 'touch-action: pinch-zoom'", ["touch"]) + ]; + var expected_events = [ + "pointerdown@black, pointerdown@black, pointerup@black, pointerup@black", + "pointerdown@grey, pointerdown@grey, pointercancel@grey, pointercancel@grey" + ]; + var current_test_index = 0; + + on_event(document.getElementById("done"), "click", function() { + test_pointer_events[current_test_index].step(function () { + assert_equals(active_pointers, 0); + assert_equals(event_log.join(", "), expected_events[current_test_index]); + }); + event_log = []; + + test_pointer_events[current_test_index++].done(); + }); + + var targets = [document.getElementById("black"), document.getElementById("grey")]; + + ["pointerdown", "pointerup", "pointercancel"].forEach(function(eventName) { + targets.forEach(function(target){ + on_event(target, eventName, function (event) { + event_log.push(event.type + "@" + event.target.id); + + if (event.type == "pointerdown") { + active_pointers++; + + } else { + active_pointers--; + } + }); + }); + }); + } + </script> + <style> + .box { + width: 250px; + height: 150px; + float: left; + margin: 10px; + } + + #black { + touch-action: pan-x pan-y; + background-color: black; + } + + #grey { + touch-action: pinch-zoom; + background-color: grey; + } + + #done { + float: left; + padding: 20px; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: touch-action test for two-finger interaction</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Tests that a two-finger pan gesture is cancelled in 'touch-action: pan-x pan-y' but is allowed in 'touch-action: pinch-zoom' + </h4> + <ol> + <li>Touch on Black with two fingers and drag both fingers down at same speed.</li> + <li>Tap on Done.</li> + <li>Touch on Grey with two fingers and drag both fingers down at same speed.</li> + <li>Tap on Done.</li> + </ol> + <div class="box" id="black"></div> + <input type="button" id="done" value="Done" /> + <div class="box" id="grey"></div> + <div id="log"></div> + </body> +</html> diff --git a/dom/events/test/pointerevents/wpt/html/pointerevent_drag_interaction-manual.html b/dom/events/test/pointerevents/wpt/html/pointerevent_drag_interaction-manual.html new file mode 100644 index 0000000000..1a80d239b8 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/html/pointerevent_drag_interaction-manual.html @@ -0,0 +1,103 @@ +<html> + <head> + <title>Pointer Events interaction with drag and drop</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <!-- Additional helper script for common checks across event types --> + <script type="text/javascript" src="../pointerevent_support.js"></script> + <script> + var eventList = ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture', 'dragstart', 'mousedown']; + + PhaseEnum = { + DndWithoutCapture: 0, + DndWithCapture: 1, + DndWithCaptureMouse: 2, + DndPrevented: 3, + Done: 4, + }; + var phase = PhaseEnum.DndWithoutCapture; + var received_events = []; + var pointerId = -1; + + function resetTestState() { + phase = PhaseEnum.DndWithoutCapture; + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointer events vs drag and drop", ['mouse']); + + var target0 = document.querySelector('#target0'); + var target1 = document.querySelector('#target1'); + + function handleEvent(e) { + if (e.type == 'pointerdown') { + received_events = []; + if (phase == PhaseEnum.DndWithCapture) { + target0.setPointerCapture(e.pointerId); + } else if (phase == PhaseEnum.DndWithCaptureMouse) { + pointerId = e.pointerId; + } + } + if (e.type == 'mousedown') { + if (phase == PhaseEnum.DndWithCaptureMouse) { + target0.setPointerCapture(pointerId); + } + } + received_events.push(e.type + "@" + e.target.id); + if (e.type == 'dragstart') { + e.dataTransfer.setData('text/plain', 'dragstart test'); + if (phase == PhaseEnum.DndPrevented) + e.preventDefault(); + } + if (phase == PhaseEnum.DndWithoutCapture && e.type == 'pointercancel') { + phase++; + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointercancel@target0", "Pointercancel should be fired with the expected order when drag operation starts."); + }, "Pointercancel when drag operation starts"); + } else if (phase == PhaseEnum.DndWithCapture && e.type == 'lostpointercapture') { + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts."); + }, "Pointercancel while capturing when drag operation starts"); + phase++; + } else if (phase == PhaseEnum.DndWithCaptureMouse && e.type == 'lostpointercapture') { + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts."); + }, "Pointercancel while capturing on mousedown when drag operation starts"); + phase++; + } else if (phase == PhaseEnum.DndPrevented && e.type == 'pointerup') { + test(() => { + assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointerup@target1", "Pointerevent stream shouldn't get interrupted when drag is prevented."); + }, "Pointerevent stream when drag is prevented."); + phase++; + test_pointerEvent.done(); + } + } + eventList.forEach(function(eventName) { + on_event(target0, eventName, handleEvent); + on_event(target1, eventName, handleEvent); + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events interaction with drag and drop</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks that the pointercancel (and if needed lostpointercapture) is dispatched when drag starts. + <ol> + <li>Press down on the black square.</li> + <li>Move your pointer to purple square and release.</li> + <li>Repeat the first two steps.</li> + <li>Repeat the first two steps once again.</li> + <li>Repeat the first two steps once again.</li> + </ol> + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div draggable="true" id="target0"></div> + <div id="target1"></div> + </div> + </body> +</html> diff --git a/dom/events/test/pointerevents/wpt/idlharness.html b/dom/events/test/pointerevents/wpt/idlharness.html new file mode 100644 index 0000000000..a4ba4c35f5 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/idlharness.html @@ -0,0 +1,104 @@ +<!doctype html> +<meta charset=utf-8> +<title>idlharness test</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="/resources/WebIDLParser.js"></script> +<script src="/resources/idlharness.js"></script> + +<pre id='untested_idl' style='display:none'> +[PrimaryGlobal] +interface Window { +}; + +[TreatNonObjectAsNull] +callback EventHandlerNonNull = any (Event event); +typedef EventHandlerNonNull? EventHandler; + +[NoInterfaceObject] +interface GlobalEventHandlers { +}; +Window implements GlobalEventHandlers; + +interface Navigator { +}; + +interface Element { +}; + +interface HTMLElement : Element { +}; +HTMLElement implements GlobalEventHandlers; + +interface Document { +}; +Document implements GlobalEventHandlers; + +interface MouseEvent { +}; + +</pre> + +<pre id='idl'> +dictionary PointerEventInit : MouseEventInit { + long pointerId = 0; + double width = 1; + double height = 1; + float pressure = 0; + float tangentialPressure = 0; + long tiltX = 0; + long tiltY = 0; + long twist = 0; + DOMString pointerType = ""; + boolean isPrimary = false; +}; + +[Constructor(DOMString type, optional PointerEventInit eventInitDict)] +interface PointerEvent : MouseEvent { + readonly attribute long pointerId; + readonly attribute double width; + readonly attribute double height; + readonly attribute float pressure; + readonly attribute float tangentialPressure; + readonly attribute long tiltX; + readonly attribute long tiltY; + readonly attribute long twist; + readonly attribute DOMString pointerType; + readonly attribute boolean isPrimary; +}; + +partial interface Element { + void setPointerCapture(long pointerId); + void releasePointerCapture(long pointerId); + boolean hasPointerCapture(long pointerId); +}; + +partial interface GlobalEventHandlers { + attribute EventHandler ongotpointercapture; + attribute EventHandler onlostpointercapture; + attribute EventHandler onpointerdown; + attribute EventHandler onpointermove; + attribute EventHandler onpointerup; + attribute EventHandler onpointercancel; + attribute EventHandler onpointerover; + attribute EventHandler onpointerout; + attribute EventHandler onpointerenter; + attribute EventHandler onpointerleave; +}; + +partial interface Navigator { + readonly attribute long maxTouchPoints; +}; +</pre> +<script> + var idl_array = new IdlArray(); + idl_array.add_untested_idls(document.getElementById("untested_idl").textContent); + idl_array.add_idls(document.getElementById("idl").textContent); + + // Note that I don't bother including Document here because there are still + // a bunch of differences between browsers around Document vs HTMLDocument. + idl_array.add_objects({ + Window: ["window"], + Navigator: ["navigator"]}); + idl_array.test(); +</script> diff --git a/dom/events/test/pointerevents/wpt/pointerevent_attributes_hoverable_pointers-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_attributes_hoverable_pointers-manual.html new file mode 100644 index 0000000000..0922ae7448 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_attributes_nohover_pointers-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_attributes_nohover_pointers-manual.html new file mode 100644 index 0000000000..0fd7904ef0 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_boundary_events_in_capturing-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_boundary_events_in_capturing-manual.html new file mode 100644 index 0000000000..0de4d55ed1 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_boundary_events_in_capturing-manual.html @@ -0,0 +1,97 @@ +<!doctype html> +<html> + <head> + <title>Pointer Events boundary events in capturing 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 eventList = All_Pointer_Events; + PhaseEnum = { + WaitingForDown: "down", + WaitingForFirstMove: "firstMove", + WaitingForSecondMove: "secondMove", + WaitingForUp: "up" + } + var phase = PhaseEnum.WaitingForDown; + var eventsRecieved = []; + + function resetTestState() { + eventsRecieved = []; + phase = PhaseEnum.WaitingForDown; + } + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent boundary events in capturing", ALL_POINTERS); + var target = document.getElementById("target0"); + var listener = document.getElementById("listener"); + + eventList.forEach(function(eventName) { + on_event(target, eventName, function (event) { + if (phase == PhaseEnum.WaitingForDown) { + if (eventName == 'pointerdown') { + listener.setPointerCapture(event.pointerId); + phase = PhaseEnum.WaitingForFirstMove; + } + } else if (phase == PhaseEnum.WaitingForUp) { + if (event.type == 'pointerup') + test_pointerEvent.done(); + } else { + eventsRecieved.push(event.type + '@target'); + if (phase == PhaseEnum.WaitingForSecondMove && event.type == 'pointermove') { + test(function () { + checkPointerEventType(event); + assert_array_equals(eventsRecieved, ['lostpointercapture@listener', 'pointerout@listener', 'pointerleave@listener', 'pointerover@target', 'pointerenter@target', 'pointermove@target'], + 'lostpointercapture and pointerout/leave should be dispatched to the capturing target and pointerover/enter should be dispatched to the hit-test element before the first pointermove event after releasing pointer capture'); + }, expectedPointerType + " pointer events boundary events when releasing capture"); + phase = PhaseEnum.WaitingForUp; + } + } + }); + on_event(listener, eventName, function (event) { + if (phase == PhaseEnum.WaitingForDown) + return; + eventsRecieved.push(event.type + '@listener'); + if (phase == PhaseEnum.WaitingForFirstMove && eventName == 'pointermove') { + test(function () { + checkPointerEventType(event); + assert_array_equals(eventsRecieved, ['pointerout@target', 'pointerleave@target', 'pointerover@listener', 'pointerenter@listener', 'gotpointercapture@listener', 'pointermove@listener'], + 'pointerout/leave should be dispatched to the previous target and pointerover/enter and gotpointercapture should be dispatched to the capturing element before the first captured pointermove event'); + }, expectedPointerType + " pointer events boundary events when receiving capture"); + listener.releasePointerCapture(event.pointerId); + eventsRecieved = []; + phase = PhaseEnum.WaitingForSecondMove; + } + }); + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events boundary events in capturing</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks the boundary events of pointer events while the capturing changes. 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</li> + <li>Press down the pointer (i.e. press left button with mouse or touch the screen with finger or pen).</li> + <li>Drag the pointer within the black square.</li> + <li>Release the pointer.</li> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="target0" class="touchActionNone"> + </div> + <div id="listener">Do not hover over or touch this element. </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/dom/events/test/pointerevents/wpt/pointerevent_change-touch-action-onpointerdown_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_change-touch-action-onpointerdown_touch-manual.html new file mode 100644 index 0000000000..04d56cb7a5 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_constructor.html b/dom/events/test/pointerevents/wpt/pointerevent_constructor.html new file mode 100644 index 0000000000..b2a779d1f7 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_multiple_primary_pointers_boundary_events-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_multiple_primary_pointers_boundary_events-manual.html new file mode 100644 index 0000000000..eb758c7073 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_pointerId_scope-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_pointerId_scope-manual.html new file mode 100644 index 0000000000..3640cb6f6b --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_pointercancel_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_pointercancel_touch-manual.html new file mode 100644 index 0000000000..70a65eeb5c --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_pointerleave_after_pointercancel_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_pointerleave_after_pointercancel_touch-manual.html new file mode 100644 index 0000000000..56be26549f --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_pointerleave_pen-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_pointerleave_pen-manual.html new file mode 100644 index 0000000000..38a2f69792 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_pointerout_after_pointercancel_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_pointerout_after_pointercancel_touch-manual.html new file mode 100644 index 0000000000..1888591a7c --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_pointerout_pen-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_pointerout_pen-manual.html new file mode 100644 index 0000000000..3973948c16 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_releasepointercapture_events_to_original_target-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_releasepointercapture_events_to_original_target-manual.html new file mode 100644 index 0000000000..3386fafb5a --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_releasepointercapture_events_to_original_target-manual.html @@ -0,0 +1,137 @@ +<!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 test_pointerEvent; + var detected_pointertypes = {}; + var captured_event = null; + var test_done = false; + var overEnterEventsFail = false; + var outLeaveEventsFail = false; + var f_gotPointerCapture = false; + var f_lostPointerCapture = false; + + function resetTestState() { + captured_event = null; + test_done = false; + overEnterEventsFail = false; + outLeaveEventsFail = false; + f_gotPointerCapture = false; + f_lostPointerCapture = false; + } + + function listenerEventHandler(event) { + if (test_done) + return; + detected_pointertypes[event.pointerType] = true; + if (event.type == "gotpointercapture") { + f_gotPointerCapture = true; + check_PointerEvent(event); + } + else if (event.type == "lostpointercapture") { + f_lostPointerCapture = true; + f_gotPointerCapture = false; + check_PointerEvent(event); + } + else if(event.type == "pointerover" || event.type == "pointerenter") { + if(captured_event && !overEnterEventsFail) { + test(function() { + assert_false(f_gotPointerCapture, "pointerover/enter should be received before the target receives gotpointercapture even when the pointer is not over it."); + }, expectedPointerType + " pointerover/enter should be received before the target receives gotpointercapture even when the pointer is not over it."); + overEnterEventsFail = true; + } + } + else if(event.type == "pointerout" || event.type == "pointerleave") { + if(!outLeaveEventsFail) { + test(function() { + assert_true(f_lostPointerCapture, "pointerout/leave should not be received unless the target just lost the capture."); + }, expectedPointerType + " pointerout/leave should not be received unless the target just lost the capture."); + outLeaveEventsFail = true; + } + } + else if (event.pointerId == captured_event.pointerId) { + if (f_gotPointerCapture && event.type == "pointermove") { + // on first event received for capture, release capture + listener.releasePointerCapture(event.pointerId); + } + else { + // if any other events are received after releaseCapture, then the test fails + test(function () { + assert_unreached(event.target.id + "-" + event.type + " should be handled by target element handler"); + }, expectedPointerType + " No other events should be recieved by capturing node after release"); + } + } + } + + function targetEventHandler(event) { + if (test_done) + return; + if (f_gotPointerCapture) { + if(event.type != "pointerout" && event.type != "pointerleave") { + test(function () { + assert_unreached("The Target element should not have received any events while capture is active. Event recieved:" + event.type + ". "); + }, expectedPointerType + " The target element should not receive any events while capture is active"); + } + } + + if (event.type == "pointerdown") { + // pointerdown event received will be used to capture events. + listener.setPointerCapture(event.pointerId); + captured_event = event; + } + + if (f_lostPointerCapture) { + test_pointerEvent.step(function () { + assert_equals(event.pointerId, captured_event.pointerId, "pointerID is same for event captured and after release"); + }); + if (event.type == "pointerup") { + test_done = true; + test_pointerEvent.done(); // complete test + } + } + } + + function run() { + test_pointerEvent = setup_pointerevent_test("got/lost pointercapture: subsequent events to target", ALL_POINTERS); // set up test harness + var listener = document.getElementById("listener"); + var target0 = document.getElementById("target0"); + target0.style.touchAction = "none"; + + // target0 and listener - handle all events + for (var i = 0; i < All_Pointer_Events.length; i++) { + on_event(target0, All_Pointer_Events[i], targetEventHandler); + on_event(listener, All_Pointer_Events[i], listenerEventHandler); + } + } + </script> + </head> + <body onload="run()"> + <h2 id="pointerTypeDescription"></h2> + <div id="listener"></div> + <h1>Pointer Event: releasePointerCapture() - subsequent events follow normal hitting testing mechanisms</h1> + <h4> + Test Description: + Use your pointer and press down in the black box. Then move around in the box and release your pointer. + After invoking the releasePointerCapture method on an element, subsequent events for the specified + pointer must follow normal hit testing mechanisms for determining the event target. + </h4> + <br /> + <div id="target0"> + </div> + <div id="complete-notice"> + <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>Refresh the page to run the tests again with a different pointer type.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/dom/events/test/pointerevents/wpt/pointerevent_releasepointercapture_onpointercancel_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_releasepointercapture_onpointercancel_touch-manual.html new file mode 100644 index 0000000000..105e3b5a97 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_sequence_at_implicit_release_on_click-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_sequence_at_implicit_release_on_click-manual.html new file mode 100644 index 0000000000..274f9a435b --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_sequence_at_implicit_release_on_click-manual.html @@ -0,0 +1,83 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Event sequence at implicit release on click</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When a captured pointer is implicitly released after a click, the boundary events should follow the lostpointercapture event."/> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script type="text/javascript" src="pointerevent_support.js"></script> + <script type="text/javascript"> + var detected_pointertypes = {}; + var event_log = []; + var start_logging = false; + + function resetTestState() { + detected_eventTypes = {}; + event_log = []; + start_logging = false; + } + + function run() { + var test_pointer_event = setup_pointerevent_test("Event sequence at implicit release on click", ALL_POINTERS); + + on_event(document.getElementById("done"), "click", function() { + test_pointer_event.step(function () { + var expected_events = "pointerup, lostpointercapture, pointerout, pointerleave"; + assert_equals(event_log.join(", "), expected_events); + }); + test_pointer_event.done(); + }); + + var target = document.getElementById("target"); + + All_Pointer_Events.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + + if (event.type == "pointerdown") { + event.target.setPointerCapture(event.pointerId); + + } else if (event.type == "gotpointercapture") { + start_logging = true; + + } else if (event.type != "pointermove" && start_logging) { + event_log.push(event.type); + } + }); + }); + } + </script> + <style> + #target { + margin: 20px; + background-color: black; + } + + #done { + margin: 20px; + background-color: green; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Event sequence at implicit release on click<h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + When a captured pointer is implicitly released after a click, the boundary events should follow the lostpointercapture event. + </h4> + <ol> + <li>Click or tap on Black.</li> + <li>Click or tap on Green.</li> + </ol> + <div id="target"></div> + <div id="done"></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/dom/events/test/pointerevents/wpt/pointerevent_sequence_at_implicit_release_on_drag-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_sequence_at_implicit_release_on_drag-manual.html new file mode 100644 index 0000000000..7b8e39b94d --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_sequence_at_implicit_release_on_drag-manual.html @@ -0,0 +1,84 @@ +<!doctype html> +<html> + <head> + <title>Pointer Event: Event sequence at implicit release on drag</title> + <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> + <link rel="author" title="Google" href="http://www.google.com "/> + <meta name="assert" content="When a captured pointer is implicitly released after a drag, the boundary events should follow the lostpointercapture event."/> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script type="text/javascript" src="pointerevent_support.js"></script> + <script type="text/javascript"> + var detected_pointertypes = {}; + var event_log = []; + var start_logging = false; + + function resetTestState() { + detected_eventTypes = {}; + event_log = []; + start_logging = false; + } + + function run() { + var test_pointer_event = setup_pointerevent_test("Event sequence at implicit release on drag", ["touch"]); + + on_event(document.getElementById("done"), "click", function() { + test_pointer_event.step(function () { + var expected_events = "pointercancel, lostpointercapture, pointerout, pointerleave"; + assert_equals(event_log.join(", "), expected_events); + }); + test_pointer_event.done(); + }); + + var target = document.getElementById("target"); + + All_Pointer_Events.forEach(function(eventName) { + on_event(target, eventName, function (event) { + detected_pointertypes[event.pointerType] = true; + + if (event.type == "pointerdown") { + event.target.setPointerCapture(event.pointerId); + + } else if (event.type == "gotpointercapture") { + start_logging = true; + + } else if (event.type != "pointermove" && start_logging) { + event_log.push(event.type); + } + }); + }); + } + </script> + <style> + #target { + margin: 20px; + background-color: black; + touch-action: auto; + } + + #done { + margin: 20px; + background-color: green; + } + </style> + </head> + <body onload="run()"> + <h1>Pointer Event: Event sequence at implicit release on drag<h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + When a captured pointer is implicitly released after a drag, the boundary events should follow the lostpointercapture event. + </h4> + <ol> + <li>Drag quickly down starting on Black.</li> + <li>Click or tap on Green.</li> + </ol> + <div id="target"></div> + <div id="done"></div> + <div id="complete-notice"> + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> + <p>The following events were logged: <span id="event-log"></span>.</p> + </div> + <div id="log"></div> + </body> +</html> diff --git a/dom/events/test/pointerevents/wpt/pointerevent_styles.css b/dom/events/test/pointerevents/wpt/pointerevent_styles.css new file mode 100644 index 0000000000..1ee3b0b396 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_support.js b/dom/events/test/pointerevents/wpt/pointerevent_support.js new file mode 100644 index 0000000000..cd3c799f73 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_support.js @@ -0,0 +1,333 @@ +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 one specified in the test page." + ); + }, 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(v) { + return typeof v === "number" && Math.round(v) === v; + }, + float(v) { + return typeof v === "number"; + }, + string(v) { + return typeof v === "string"; + }, + boolean(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, + callback = null +) { + window.setTimeout(function () { + objectScroller(target, "left", 0); + if (callback) { + callback(); + } + }, scrollReturnInterval); + document.getElementById("desc").innerHTML = + "Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the element. Then tap complete button"; +} + +function updateDescriptionFourthStepTouchActionElement( + target, + scrollReturnInterval +) { + document.getElementById("desc").innerHTML = + "Test Description: Try to scroll element RIGHT starting your touch inside of the element"; +} + +function objectScroller(target, direction, value) { + if (direction == "up") { + target.scrollTop = 0; + } else if (direction == "left") { + target.scrollLeft = 0; + } +} + +function sPointerCapture(e) { + try { + target0.setPointerCapture(e.pointerId); + } catch (ex) {} +} + +function rPointerCapture(e) { + try { + captureButton.value = "Set Capture"; + target0.releasePointerCapture(e.pointerId); + } catch (ex) {} +} + +var globalPointerEventTest = null; +var expectedPointerType = null; +const ALL_POINTERS = ["mouse", "touch", "pen"]; +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.step = function (stepFunction) { + this.currentTest.step(stepFunction); +}; + +MultiPointerTypeTest.prototype.createNextTest = function () { + if (this.currentTypeIndex < this.types.length) { + var pointerTypeDescription = document.getElementById( + "pointerTypeDescription" + ); + document.getElementById("pointerTypeDescription").innerHTML = + "Follow the test instructions with <span style='color: red'>" + + this.types[this.currentTypeIndex] + + "</span>. If you don't have the device <a href='javascript:;' onclick='globalPointerEventTest.skip()'>skip it</a>."; + this.currentTest = async_test( + this.types[this.currentTypeIndex] + " " + this.testName + ); + expectedPointerType = this.types[this.currentTypeIndex]; + this.currentTypeIndex++; + } else { + document.getElementById("pointerTypeDescription").innerHTML = ""; + } + resetTestState(); +}; + +function setup_pointerevent_test(testName, supportedPointerTypes) { + return (globalPointerEventTest = new MultiPointerTypeTest( + testName, + supportedPointerTypes + )); +} + +function checkPointerEventType(event) { + assert_equals( + event.pointerType, + expectedPointerType, + "pointerType should be the same as the requested device." + ); +} diff --git a/dom/events/test/pointerevents/wpt/pointerevent_touch-action-auto-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-auto-css_touch-manual.html new file mode 100644 index 0000000000..f5e9d12c35 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-button-test_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-button-test_touch-manual.html new file mode 100644 index 0000000000..c7c5d9a440 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-button-test_touch-manual.html @@ -0,0 +1,110 @@ +<!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, function () { + setTimeout(function() { + isFirstPart = false; + }, 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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-illegal.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-illegal.html new file mode 100644 index 0000000000..5fe6179840 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-auto-child-none_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-auto-child-none_touch-manual.html new file mode 100644 index 0000000000..dcea283750 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-none_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-none_touch-manual.html new file mode 100644 index 0000000000..16e42954e5 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-pan-x-child-pan-x_touch-manual.html new file mode 100644 index 0000000000..c75d067e44 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_child-pan-x-child-pan-y_touch-manual.html new file mode 100644 index 0000000000..d420cc56c7 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_highest-parent-none_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_highest-parent-none_touch-manual.html new file mode 100644 index 0000000000..d87d2b3a34 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_parent-none_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-inherit_parent-none_touch-manual.html new file mode 100644 index 0000000000..5e674a14da --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-keyboard-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-keyboard-manual.html new file mode 100644 index 0000000000..3fef3f646f --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-mouse-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-mouse-manual.html new file mode 100644 index 0000000000..fcc8584515 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-none-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-none-css_touch-manual.html new file mode 100644 index 0000000000..dec694f3ec --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-down-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-down-css_touch-manual.html new file mode 100644 index 0000000000..16e1cb2fab --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-left-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-left-css_touch-manual.html new file mode 100644 index 0000000000..53fd2de138 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-right-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-right-css_touch-manual.html new file mode 100644 index 0000000000..53bbac65ec --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-up-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-up-css_touch-manual.html new file mode 100644 index 0000000000..0902700d2d --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-x-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-x-css_touch-manual.html new file mode 100644 index 0000000000..e757baec6b --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-x-pan-y-pan-y_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-x-pan-y-pan-y_touch-manual.html new file mode 100644 index 0000000000..e2a4386b27 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-x-pan-y_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-x-pan-y_touch-manual.html new file mode 100644 index 0000000000..0c900ff740 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-y-css_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-pan-y-css_touch-manual.html new file mode 100644 index 0000000000..4ad39ecc83 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-span-test_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-span-test_touch-manual.html new file mode 100644 index 0000000000..61f0e8d329 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-span-test_touch-manual.html @@ -0,0 +1,114 @@ +<!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, function () { + setTimeout(function() { + isFirstPart = false; + xScr0 = target0.scrollLeft; + xScr0 = target0.scrollLeft; + xScrollIsReceived = false; + yScrollIsReceived = false; + }, 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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-svg-test_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-svg-test_touch-manual.html new file mode 100644 index 0000000000..e9dc9d78ee --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerevent_touch-action-table-test_touch-manual.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-table-test_touch-manual.html new file mode 100644 index 0000000000..17d5a29575 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-table-test_touch-manual.html @@ -0,0 +1,145 @@ +<!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, function() { + setTimeout(function() { + isFirstPart = false; + }, scrollReturnInterval); // avoid immediate triggering while scroll is still being performed + }); + } + } + else { + test_touchaction_cell.step(failOnScroll, "scroll received while shouldn't"); + } + }); + } + + function updateDescriptionSecondStepTable(target, returnInterval, element) { + window.setTimeout(function() { + objectScroller(target, 'up', 0); + } + , returnInterval); + document.getElementById('desc').innerHTML = "Test Description: Try to scroll element RIGHT staring your touch over the Row 1"; + } + + function updateDescriptionThirdStepTable(target, returnInterval, callback = null) { + window.setTimeout(function() { + objectScroller(target, 'left', 0); + if (callback) { + callback(); + } + } + , returnInterval); + 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> diff --git a/dom/events/test/pointerevents/wpt/pointerevent_touch-action-verification.html b/dom/events/test/pointerevents/wpt/pointerevent_touch-action-verification.html new file mode 100644 index 0000000000..7800f2c9da --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/pointerlock/pointerevent_movementxy-manual.html b/dom/events/test/pointerevents/wpt/pointerlock/pointerevent_movementxy-manual.html new file mode 100644 index 0000000000..5b0edd3c61 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerlock/pointerevent_movementxy-manual.html @@ -0,0 +1,99 @@ +<!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> + <style> + #testContainer { + touch-action: none; + user-select: none; + position: relative; + } + #box1 { + top: 30px; + left: 50px; + background: black; + } + #box2 { + top: 70px; + left: 250px; + background: red; + } + #innerFrame { + top: 10px; + left: 100px; + } + #square2 { + visibility: block; + } + </style> + <script> + var expectedPointerId = NaN; + var startSummation = false; + var lastScreenX = 0; + var lastScreenY = 0; + + function resetTestState() { + startSummation = false; + lastScreenX = 0; + lastScreenY = 0; + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", ['mouse', 'touch']); + + [document, document.getElementById('innerFrame').contentDocument].forEach(function(element) { + on_event(element, 'pointermove', function (event) { + if (startSummation) { + test_pointerEvent.step(function() { + assert_equals(event.movementX, event.screenX - lastScreenX, "movementX should be the delta between current event's and last event's screenX"); + assert_equals(event.movementY, event.screenY - lastScreenY, "movementY should be the delta between current event's and last event's screenY"); + }); + lastScreenX = event.screenX; + lastScreenY = event.screenY; + } + }); + }); + on_event(document.querySelector('#box1'), 'pointerdown', function(event) { + event.target.releasePointerCapture(event.pointerId); + test_pointerEvent.step(function() { + assert_equals(event.pointerType, expectedPointerType, "Use the instructed pointer type."); + }); + startSummation = true; + lastScreenX = event.screenX; + lastScreenY = event.screenY; + }); + on_event(document.querySelector('#box2'), 'pointerup', function(event) { + startSummation = false; + test_pointerEvent.done(); + }); + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Events movementX/Y attribute test</h1> + <h2 id="pointerTypeDescription"></h2> + <h4> + Test Description: This test checks the properties of pointer events that do not support hover. + <ol> + <li>Press down on the black square.</li> + <li>Move your pointer slowly along a straight line to the red square.</li> + <li>Release the pointer when you are over the red square.</li> + </ol> + + Test passes if the proper behavior of the events is observed. + </h4> + <div id="testContainer"> + <div id="box1" class="square"></div> + <div id="box2" class="square"></div> + <iframe id="innerFrame" src="resources/pointerevent_movementxy-iframe.html"></iframe> + </div> + <div class="spacer"></div> + </body> +</html> + diff --git a/dom/events/test/pointerevents/wpt/pointerlock/resources/pointerevent_movementxy-iframe.html b/dom/events/test/pointerevents/wpt/pointerlock/resources/pointerevent_movementxy-iframe.html new file mode 100644 index 0000000000..627af3b61c --- /dev/null +++ b/dom/events/test/pointerevents/wpt/pointerlock/resources/pointerevent_movementxy-iframe.html @@ -0,0 +1,8 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width"> + </head> + <body> + </body> +</html> diff --git a/dom/events/test/pointerevents/wpt/resources/pointerevent_attributes_hoverable_pointers-iframe.html b/dom/events/test/pointerevents/wpt/resources/pointerevent_attributes_hoverable_pointers-iframe.html new file mode 100644 index 0000000000..5e55868282 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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/dom/events/test/pointerevents/wpt/resources/pointerevent_pointerId_scope-iframe.html b/dom/events/test/pointerevents/wpt/resources/pointerevent_pointerId_scope-iframe.html new file mode 100644 index 0000000000..ab33560b35 --- /dev/null +++ b/dom/events/test/pointerevents/wpt/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> |