|
1 | 1 | <!doctype html>
|
2 |
| -<title>Pointer Events no-hover pointer attributes test</title> |
3 |
| -<meta name="variant" content="?touch"> |
4 |
| -<meta name="viewport" content="width=device-width"> |
5 |
| -<script src="/resources/testharness.js"></script> |
6 |
| -<script src="/resources/testharnessreport.js"></script> |
7 |
| -<script src="/resources/testdriver.js"></script> |
8 |
| -<script src="/resources/testdriver-actions.js"></script> |
9 |
| -<script src="/resources/testdriver-vendor.js"></script> |
10 |
| -<script type="text/javascript" src="pointerevent_support.js"></script> |
11 |
| -<style> |
12 |
| - div { |
13 |
| - height: 80px; |
14 |
| - width: 80px; |
15 |
| - } |
16 |
| -</style> |
17 |
| -<body onload="run()"> |
18 |
| - <div id="square1"></div> |
19 |
| - <iframe id="innerFrame" |
20 |
| - src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"> |
21 |
| - </iframe> |
22 |
| - <div id="done"></div> |
23 |
| -</body> |
24 |
| -<script> |
25 |
| - 'use strict'; |
26 |
| - const pointer_type = location.search.substring(1); |
27 |
| - const test_pointer = pointer_type + "TestPointer"; |
28 |
| - |
29 |
| - const logged_events = [ |
30 |
| - "pointerover", "pointerenter", "pointerdown", |
31 |
| - "pointerup", "pointerout", "pointerleave" |
32 |
| - ]; |
33 |
| - |
34 |
| - // TODO(mustaq@chromium.org): add pointermove coverage with touch-action:none. |
35 |
| - |
36 |
| - function checkPointerEventAttributes(event, |
37 |
| - expected_pointer_id, expected_event_type, |
38 |
| - expected_bounding_rect) { |
39 |
| - assert_equals(event.pointerType, pointer_type, |
40 |
| - expected_event_type + ".pointerType should match test input"); |
41 |
| - |
42 |
| - assert_equals(event.pointerId, expected_pointer_id, |
43 |
| - expected_event_type + ".pointerId should match all other events"); |
44 |
| - assert_equals(event.type, expected_event_type, |
45 |
| - expected_event_type + ".type should be " + expected_event_type); |
46 |
| - |
47 |
| - assert_equals(event.button, 0, |
48 |
| - expected_event_type + ".button should be 0"); |
49 |
| - |
50 |
| - if (['pointerover', 'pointerenter', 'pointerdown'].includes(event.type)) { |
51 |
| - assert_equals(event.buttons, 1, |
52 |
| - expected_event_type + ".buttons should be 1"); |
53 |
| - } else { |
54 |
| - assert_equals(event.buttons, 0, |
55 |
| - expected_event_type + ".buttons should be 0"); |
56 |
| - } |
57 |
| - |
58 |
| - assert_true(event.clientX >= expected_bounding_rect.left && |
59 |
| - event.clientX < expected_bounding_rect.right, |
60 |
| - expected_event_type + ".clientX should be within bounding client rect."); |
61 |
| - |
62 |
| - assert_true(event.clientY >= expected_bounding_rect.top && |
63 |
| - event.clientY < expected_bounding_rect.bottom, |
64 |
| - expected_event_type + ".clientY should be within bounding client rect."); |
65 |
| - |
66 |
| - check_PointerEvent(event, expected_event_type); |
67 |
| - |
68 |
| - assert_equals(event.isPrimary, true, |
69 |
| - expected_event_type + ".isPrimary is true."); |
70 |
| - } |
71 |
| - |
72 |
| - async function checkEventsOnTarget(test, elem) { |
73 |
| - const done = document.getElementById("done"); |
74 |
| - |
75 |
| - let logged_event_promises = []; |
76 |
| - for (let i = 0; i < logged_events.length; i++) { |
77 |
| - logged_event_promises.push(getEvent(logged_events[i], elem, test)); |
78 |
| - } |
79 |
| - let done_promise = getEvent("pointerup", done, test); |
80 |
| - |
81 |
| - let actions = new test_driver.Actions(); |
82 |
| - actions = actions |
83 |
| - .addPointer(test_pointer, pointer_type) |
84 |
| - .pointerMove(0, 0, {origin:elem, sourceName:test_pointer}) |
85 |
| - .pointerDown({sourceName:test_pointer}) |
86 |
| - .pointerUp({sourceName:test_pointer}) |
87 |
| - .pointerMove(0, 0, {origin:done, sourceName:test_pointer}) |
88 |
| - .pointerDown({sourceName:test_pointer}) |
89 |
| - .pointerUp({sourceName:test_pointer}); |
90 |
| - await actions.send(); |
91 |
| - |
92 |
| - let done_event = await done_promise; |
93 |
| - |
94 |
| - let expected_pointer_id; |
95 |
| - |
96 |
| - // All Promises in logged_event_promises are already resolved bynow. |
97 |
| - for (let i = 0; i < logged_event_promises.length; i++) { |
98 |
| - let event = await logged_event_promises[i]; |
99 |
| - if (expected_pointer_id === undefined) { |
100 |
| - expected_pointer_id = event.pointerId; |
101 |
| - } |
102 |
| - checkPointerEventAttributes(event, expected_pointer_id, |
103 |
| - logged_events[i], elem.getBoundingClientRect()); |
104 |
| - } |
105 |
| - } |
106 |
| - |
107 |
| - function run() { |
108 |
| - promise_test(async test => { |
109 |
| - const target = document.getElementById("square1"); |
110 |
| - checkEventsOnTarget(test, target); |
111 |
| - }, "PointerEvent attributes"); |
112 |
| - |
113 |
| - promise_test(async test => { |
114 |
| - const target = frames[0].document.getElementById("square2"); |
115 |
| - |
116 |
| - // In Chromium, `test_driver.Actions()` sent to a subframe does not work |
117 |
| - // even though the `onload` event here fires after a sqame-origin |
118 |
| - // subframe is loaded. Waiting for 2 animation frames resolves this. |
119 |
| - await waitForAnimationFrames(2); |
120 |
| - |
121 |
| - checkEventsOnTarget(test, target); |
122 |
| - }, "PointerEvent attributes in a subframe"); |
123 |
| - } |
124 |
| -</script> |
| 2 | +<html> |
| 3 | + <head> |
| 4 | + <title>Pointer Events properties tests</title> |
| 5 | + <meta name="viewport" content="width=device-width"> |
| 6 | + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> |
| 7 | + <script src="/resources/testharness.js"></script> |
| 8 | + <script src="/resources/testharnessreport.js"></script> |
| 9 | + <script src="/resources/testdriver.js"></script> |
| 10 | + <script src="/resources/testdriver-actions.js"></script> |
| 11 | + <script src="/resources/testdriver-vendor.js"></script> |
| 12 | + <!-- Additional helper script for common checks across event types --> |
| 13 | + <script type="text/javascript" src="pointerevent_support.js"></script> |
| 14 | + <script> |
| 15 | + var detected_pointertypes = {}; |
| 16 | + var detected_eventTypes = {}; |
| 17 | + var eventList = ['pointerover', 'pointerenter', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave']; |
| 18 | + // TODO(mustaq@chromium.org): missing touch pointermove coverage! |
| 19 | + var expectedPointerId = NaN; |
| 20 | + |
| 21 | + function resetTestState() { |
| 22 | + detected_eventTypes = {}; |
| 23 | + document.getElementById("square1").style.visibility = 'visible'; |
| 24 | + document.getElementById('innerFrame').contentDocument.getElementById("square2").style.visibility = 'hidden'; |
| 25 | + } |
| 26 | + function checkPointerEventAttributes(event, targetBoundingClientRect, testNamePrefix) { |
| 27 | + if (detected_eventTypes[event.type]) |
| 28 | + return; |
| 29 | + var expectedEventType = eventList[Object.keys(detected_eventTypes).length]; |
| 30 | + detected_eventTypes[event.type] = true; |
| 31 | + var pointerTestName = (testNamePrefix ? testNamePrefix + ' ' : '') |
| 32 | + + expectedPointerType + ' ' + expectedEventType; |
| 33 | + |
| 34 | + detected_pointertypes[event.pointerType] = true; |
| 35 | + |
| 36 | + test(function() { |
| 37 | + assert_equals(event.type, expectedEventType); |
| 38 | + }, pointerTestName + ".type should be " + expectedEventType); |
| 39 | + |
| 40 | + // Test button and buttons |
| 41 | + test(function() { |
| 42 | + assert_equals(event.button, 0); |
| 43 | + }, pointerTestName + ".button attribute is 0 on touch-down."); |
| 44 | + |
| 45 | + if (event.type == 'pointerdown' || event.type == 'pointerover' || event.type == 'pointerenter') { |
| 46 | + test(function() { |
| 47 | + assert_equals(event.buttons, 1); |
| 48 | + }, pointerTestName + ".buttons attribute is 1 on touch-down."); |
| 49 | + } else { |
| 50 | + test(function() { |
| 51 | + assert_equals(event.buttons, 0); |
| 52 | + }, pointerTestName + ".buttons is 0 on touch-release."); |
| 53 | + } |
| 54 | + |
| 55 | + // Test clientX and clientY |
| 56 | + test(function () { |
| 57 | + assert_true(event.clientX >= targetBoundingClientRect.left && event.clientX < targetBoundingClientRect.right && event.clientY >= targetBoundingClientRect.top && event.clientY < targetBoundingClientRect.bottom); |
| 58 | + }, pointerTestName + ".clientX and .clientY attributes are correct."); |
| 59 | + |
| 60 | + check_PointerEvent(event, testNamePrefix); |
| 61 | + |
| 62 | + // Test isPrimary |
| 63 | + test(function () { |
| 64 | + assert_equals(event.isPrimary, true); |
| 65 | + }, pointerTestName + ".isPrimary attribute is true."); |
| 66 | + |
| 67 | + // Test pointerId value |
| 68 | + if (isNaN(expectedPointerId)) { |
| 69 | + expectedPointerId = event.pointerId; |
| 70 | + } else { |
| 71 | + test(function () { |
| 72 | + assert_equals(event.pointerId, expectedPointerId); |
| 73 | + }, pointerTestName + ".pointerId should be the same as previous pointer events for this active pointer."); |
| 74 | + } |
| 75 | + } |
| 76 | + |
| 77 | + async function run() { |
| 78 | + var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", ['touch']); |
| 79 | + var square1 = document.getElementById("square1"); |
| 80 | + var rectSquare1 = square1.getBoundingClientRect(); |
| 81 | + var innerFrame = document.getElementById('innerFrame'); |
| 82 | + var square2 = innerFrame.contentDocument.getElementById('square2'); |
| 83 | + var rectSquare2 = square2.getBoundingClientRect(); |
| 84 | + |
| 85 | + eventList.forEach(function(eventName) { |
| 86 | + on_event(square1, eventName, function (event) { |
| 87 | + if (square1.style.visibility == 'hidden') |
| 88 | + return; |
| 89 | + checkPointerEventAttributes(event, rectSquare1, ""); |
| 90 | + if (Object.keys(detected_eventTypes).length == eventList.length) { |
| 91 | + square1.style.visibility = 'hidden'; |
| 92 | + detected_eventTypes = {}; |
| 93 | + square2.style.visibility = 'visible'; |
| 94 | + expectedPointerId = NaN; |
| 95 | + } |
| 96 | + }); |
| 97 | + on_event(square2, eventName, function (event) { |
| 98 | + checkPointerEventAttributes(event, rectSquare2, "Inner frame "); |
| 99 | + if (Object.keys(detected_eventTypes).length == eventList.length) { |
| 100 | + square2.style.visibility = 'hidden'; |
| 101 | + test_pointerEvent.done(); |
| 102 | + } |
| 103 | + }); |
| 104 | + }); |
| 105 | + |
| 106 | + // Inject touch inputs. |
| 107 | + await clickInTarget("touch", square1); |
| 108 | + await clickInTarget("touch", square2); |
| 109 | + } |
| 110 | + </script> |
| 111 | + </head> |
| 112 | + <body onload="run()"> |
| 113 | + <h1>Pointer Events no-hover pointer attributes test</h1> |
| 114 | + <h2 id="pointerTypeDescription"></h2> |
| 115 | + <h4> |
| 116 | + Test Description: This test checks the properties of pointer events that do not support hover. |
| 117 | + <ol> |
| 118 | + <li>Tap the black square.</li> |
| 119 | + <li>Then move it off the black square so that it disappears.</li> |
| 120 | + <li>When the red square appears tap on that as well.</li> |
| 121 | + </ol> |
| 122 | + |
| 123 | + Test passes if the proper behavior of the events is observed. |
| 124 | + </h4> |
| 125 | + <div id="square1" class="square"></div> |
| 126 | + <iframe id="innerFrame" src="resources/pointerevent_attributes_hoverable_pointers-iframe.html"></iframe> |
| 127 | + <div class="spacer"></div> |
| 128 | + <div id="complete-notice"> |
| 129 | + <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> |
| 130 | + <p>Refresh the page to run the tests again with a different pointer type.</p> |
| 131 | + </div> |
| 132 | + <div id="log"></div> |
| 133 | + </body> |
| 134 | +</html> |
0 commit comments