| <!doctype html> |
| <html> |
| <head> |
| <title>Pointer Events properties tests</title> |
| <meta name="timeout" content="long"> |
| <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> |
| |
