| <!doctype html> |
| <html> |
| <head> |
| <title>Pointer Events properties tests</title> |
| <meta name="timeout" content="long"> |
| <meta name="viewport" content="width=device-width"> |
| <meta name="variant" content="?mouse"> |
| <meta name="variant" content="?touch"> |
| <meta name="variant" content="?pen"> |
| <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <!-- Additional helper script for common checks across event types --> |
| <script type="text/javascript" src="pointerevent_support.js"></script> |
| <style> |
| #testContainer { |
| touch-action: none; |
| user-select: none; |
| position: relative; |
| } |
| #box1 { |
| top: 30px; |
| left: 50px; |
| background: black; |
| } |
| #box2 { |
| top: 70px; |
| left: 250px; |
| background: red; |
| } |
| #innerFrame { |
| top: 10px; |
| left: 100px; |
| } |
| #square2 { |
| visibility: block; |
| } |
| </style> |
| <script> |
| var inputSource = location.search.substring(1); |
| var expectedPointerId = NaN; |
| var lastScreenX = null; |
| var lastScreenY = null; |
| var actionsPromise; |
| |
| function resetTestState() { |
| lastScreenX = null; |
| lastScreenY = null; |
| } |
| |
| var nonPointermoveEventList = [ |
| "pointerover", |
| "pointerenter", |
| "pointerdown", |
| "pointerup", |
| "pointerout", |
| "pointerleave", |
| "gotpointercapture", |
| "lostpointercapture"]; |
| |
| function injectInput(pointerType) { |
| var pointerId = pointerType + "Pointer1"; |
| return new test_driver.Actions() |
| .addPointer(pointerId, pointerType) |
| .pointerMove(0, 0, {origin: box1}) |
| .pointerDown() |
| .pointerMove(20, 30, {origin: box1}) |
| .pointerMove(50, 40, {origin: box1}) |
| .pointerMove(80, 30, {origin: box1}) |
| .pointerMove(110, 20, {origin: box1}) |
| .pointerMove(0, 0, {origin: box2}) |
| .pointerUp() |
| .send(); |
| } |
| |
| function run() { |
| var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", [inputSource]); |
| |
| [document, document.getElementById('innerFrame').contentDocument].forEach(function(element) { |
| nonPointermoveEventList.forEach(function(eventName) { |
| on_event(element, eventName, function (event) { |
| if (lastScreenX && lastScreenY) { |
| test_pointerEvent.step(function() { |
| assert_equals(event.movementX, 0, "movementX should be 0 for event other than pointermove."); |
| assert_equals(event.movementY, 0, "movementY should be 0 for event other than pointermove."); |
| }); |
| // Reset when entering the new frame. |
| if (event.type == "pointerenter") { |
| lastScreenX = null; |
| lastScreenY = null; |
| } |
| } |
| }); |
| }); |
| |
| on_event(element, 'pointermove', function (event) { |
| test_pointerEvent.step(function() { |
| if (lastScreenX && lastScreenY) { |
| assert_equals(event.movementX, event.screenX - lastScreenX, "movementX should be the delta between current event's and last event's screenX"); |
| assert_equals(event.movementY, event.screenY - lastScreenY, "movementY should be the delta between current event's and last event's screenY"); |
| } |
| }); |
| lastScreenX = event.screenX; |
| lastScreenY = event.screenY; |
| }); |
| }); |
| on_event(document.querySelector('#box1'), 'pointerdown', function(event) { |
| event.target.releasePointerCapture(event.pointerId); |
| test_pointerEvent.step(function() { |
| assert_equals(event.pointerType, expectedPointerType, "Use the instructed pointer type."); |
| }); |
| lastScreenX = event.screenX; |
| lastScreenY = event.screenY; |
| }); |
| on_event(document.querySelector('#box2'), 'pointerup', function(event) { |
| // Make sure the test finishes after all the input actions are completed. |
| actionsPromise.then( () => { |
| test_pointerEvent.done(); |
| }); |
| }); |
| |
| // Inject input |
| actionsPromise = injectInput(inputSource); |
| } |
| |
| </script> |
| </head> |
| <body onload="run()"> |
| <h1>Pointer Events movementX/Y attribute test</h1> |
| <h2 id="pointerTypeDescription"></h2> |
| <h4> |
| Test Description: This test checks the movementX/Y properties of pointer events. |
| <ol> |
| <li>Press down on the black square.</li> |
| <li>Move your pointer slowly along a straight line to the red square.</li> |
| <li>Release the pointer when you are over the red square.</li> |
| </ol> |
| |
| Test passes if the proper behavior of the events is observed. |
| </h4> |
| <div id="testContainer"> |
| <div id="box1" class="square"></div> |
| <div id="box2" class="square"></div> |
| <iframe id="innerFrame" src="resources/pointerevent_movementxy-iframe.html"></iframe> |
| </div> |
| <div class="spacer"></div> |
| </body> |
| </html> |
| |