diff options
Diffstat (limited to 'testing/web-platform/tests/pointerevents/pointerevent_movementxy.html')
| -rw-r--r-- | testing/web-platform/tests/pointerevents/pointerevent_movementxy.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/testing/web-platform/tests/pointerevents/pointerevent_movementxy.html b/testing/web-platform/tests/pointerevents/pointerevent_movementxy.html new file mode 100644 index 0000000000..cb69c5c95e --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_movementxy.html @@ -0,0 +1,152 @@ +<!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> + |