| <!doctype html> |
| <html> |
| <head> |
| <title>Pointer Events coalesced events count and properties</title> |
| <meta name="viewport" content="width=device-width"> |
| <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <!-- Additional helper script for common checks across event types --> |
| <script type="text/javascript" src="pointerevent_support.js"></script> |
| <script> |
| var eventList = All_Pointer_Events; |
| PhaseEnum = { |
| WaitingForCancel: 0, |
| WaitingForOver: 1, |
| WaitingForEnter: 2, |
| WaitingForDown: 3, |
| WaitingForMove: 4, |
| WaitingForUp: 5, |
| WaitingForOut: 6, |
| WaitingForLeave: 7, |
| Done: 8, |
| }; |
| var phase = PhaseEnum.WaitingForCancel; |
| |
| function resetTestState() { |
| phase = PhaseEnum.WaitingForCancel; |
| } |
| function expect_no_coalesced_events(event, eventName) { |
| test(function () { |
| assert_equals(event.getCoalescedEvents().length, 0, eventName + ' should not have any coalesced events'); |
| }, expectedPointerType + ' ' + eventName + ' should not have any coalesced events'); |
| } |
| function getInViewPoint(element) { |
| var rectangles = element.getClientRects(); |
| if (rectangles.length === 0) { |
| return false; |
| } |
| |
| var rect = rectangles[0]; |
| var left = Math.max(0, rect.left); |
| var right = Math.min(window.innerWidth, rect.right); |
| var top = Math.max(0, rect.top); |
| var bottom = Math.min(window.innerHeight, rect.bottom); |
| |
| var x = parseInt(0.5 * (left + right)); |
| var y = parseInt(0.5 * (top + bottom)); |
| |
| return [x, y]; |
| } |
| function run() { |
| var test_pointerEvent = setup_pointerevent_test("coalesced events attributes in pointerevents", ['touch']); |
| var target0 = document.getElementById("target0"); |
| var target1 = document.getElementById("target1"); |
| var actions_promise; |
| |
| on_event(target0, 'pointercancel', function (event) { |
| if (phase == PhaseEnum.WaitingForCancel) { |
| expect_no_coalesced_events(event, 'pointercancel'); |
| phase++; |
| } |
| }); |
| eventList.forEach(function(eventName) { |
| on_event(target1, eventName, function (event) { |
| switch (phase) { |
| case PhaseEnum.WaitingForOver: |
| if (eventName == 'pointerover') { |
| expect_no_coalesced_events(event, eventName); |
| phase++; |
| } |
| break; |
| case PhaseEnum.WaitingForEnter: |
| if (eventName == 'pointerenter') { |
| expect_no_coalesced_events(event, eventName); |
| phase++; |
| } |
| break; |
| case PhaseEnum.WaitingForDown: |
| if (eventName == 'pointerdown') { |
| expect_no_coalesced_events(event, eventName); |
| phase++; |
| step_timeout(function(){ |
| // This is just a way to block the main thread. |
| var current = new Date().getTime(); |
| for (; new Date().getTime() - current < 500;); |
| }, 0); |
| } |
| break; |
| case PhaseEnum.WaitingForMove: |
| if (eventName == 'pointermove') { |
| var coalescedEvents = event.getCoalescedEvents(); |
| test (function() { |
| assert_greater_than(event.getCoalescedEvents().length, 1, 'pointermove should have at least 2 coalesced events.'); |
| }, expectedPointerType + ' pointermove should have >2 coalesced events as main thread is busy.'); |
| test (function() { |
| for (var i=0; i<coalescedEvents.length; i++) { |
| assert_equals(coalescedEvents[i].isTrusted, true, 'isTrusted flag should be true for coalesced events.'); |
| if (i > 0) |
| assert_greater_than_equal(coalescedEvents[i].timeStamp, coalescedEvents[i-1].timeStamp, 'Time stamps of coalesced events must be ascending.'); |
| } |
| }, expectedPointerType + ' pointermove coalesced events should all be marked as trusted.'); |
| test (function() { |
| for (var i=1; i<coalescedEvents.length; i++) |
| assert_greater_than_equal(coalescedEvents[i].timeStamp, coalescedEvents[i-1].timeStamp, 'Time stamps of coalesced events must be ascending.'); |
| }, expectedPointerType + ' time stamps of coalesced events must be ascending.'); |
| test (function() { |
| for (var i=0; i<coalescedEvents.length; i++) { |
| assert_equals(coalescedEvents[i].bubbles, false, 'Bubbles attribute should be false for coalesced events.'); |
| assert_equals(coalescedEvents[i].cancelable, false, 'Cancelable attribute should be false for coalesced events.'); |
| } |
| }, expectedPointerType + ' pointermove coalesced events should all bubbles and cancelable as false.'); |
| phase++; |
| } |
| break; |
| case PhaseEnum.WaitingForUp: |
| if (eventName == 'pointerup') { |
| expect_no_coalesced_events(event, eventName); |
| phase++; |
| } |
| break; |
| case PhaseEnum.WaitingForOut: |
| if (eventName == 'pointerout') { |
| expect_no_coalesced_events(event, eventName); |
| phase++; |
| } |
| break; |
| case PhaseEnum.WaitingForLeave: |
| if (eventName == 'pointerleave') { |
| expect_no_coalesced_events(event, eventName); |
| phase++; |
| actions_promise.then( () => { |
| test_pointerEvent.done(); |
| }); |
| } |
| break; |
| } |
| }); |
| }); |
| |
| // Inject touch inputs. |
| var elementPoint1 = getInViewPoint(target0); |
| var x1 = elementPoint1[0]; |
| var y1 = elementPoint1[1]; |
| var elementPoint2 = getInViewPoint(target1); |
| var x2 = elementPoint2[0]; |
| var y2 = elementPoint2[1]; |
| actions_promise = new test_driver.Actions(0) |
| .addPointer("touchPointer1", "touch") |
| .pointerMove(x1, y1) |
| .pointerDown() |
| .pointerMove(x1 + 10, y1) |
| .pointerMove(x1 + 20, y1) |
| .pointerMove(x1 + 30, y1) |
| .addTick(20) |
| .pointerUp() |
| .pointerMove(x2, y2) |
| .pointerDown() |
| .pointerMove(x2 + 10, y2) |
| .pointerMove(x2 + 20, y2) |
| .pointerMove(x2 + 30, y2) |
| .addTick(20) |
| .pointerUp() |
| .send(); |
| } |
| </script> |
| </head> |
| <body onload="run()"> |
| <h1>Pointer Events coalesced events count and properties</h1> |
| <h2 id="pointerTypeDescription"></h2> |
| <h4> |
| Test Description: This test checks the coalesced events of all types of pointer events. |
| <ol> |
| <li>Pointer down in the black square and drag inside the black square immediately</li> |
| <li>Release the pointer.</li> |
| <li>Pointer down in the purple square and drag inside the purple square immediately</li> |
| <li>Release the pointer and move out of the purple square</li> |
| </ol> |
| |
| Test passes if the proper behavior of the events is observed. |
| </h4> |
| <div id="target0"></div> |
| <div id="target1" class="touchActionNone"></div> |
| <div id="complete-notice"> |
| <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> |
| <p>Refresh the page to run the tests again with a different pointer type.</p> |
| </div> |
| </body> |
| </html> |
| |