pointerevent_movementxy-manual.html (3969B)
1 <!doctype html> 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 <!-- Additional helper script for common checks across event types --> 10 <script type="text/javascript" src="../pointerevent_support.js"></script> 11 <style> 12 #testContainer { 13 touch-action: none; 14 user-select: none; 15 position: relative; 16 } 17 #box1 { 18 top: 30px; 19 left: 50px; 20 background: black; 21 } 22 #box2 { 23 top: 70px; 24 left: 250px; 25 background: red; 26 } 27 #innerFrame { 28 top: 10px; 29 left: 100px; 30 } 31 #square2 { 32 visibility: block; 33 } 34 </style> 35 <script> 36 var expectedPointerId = NaN; 37 var startSummation = false; 38 var lastScreenX = 0; 39 var lastScreenY = 0; 40 41 function resetTestState() { 42 startSummation = false; 43 lastScreenX = 0; 44 lastScreenY = 0; 45 } 46 47 function run() { 48 var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", ['mouse', 'touch']); 49 50 [document, document.getElementById('innerFrame').contentDocument].forEach(function(element) { 51 on_event(element, 'pointermove', function (event) { 52 if (startSummation) { 53 test_pointerEvent.step(function() { 54 assert_equals(event.movementX, event.screenX - lastScreenX, "movementX should be the delta between current event's and last event's screenX"); 55 assert_equals(event.movementY, event.screenY - lastScreenY, "movementY should be the delta between current event's and last event's screenY"); 56 }); 57 lastScreenX = event.screenX; 58 lastScreenY = event.screenY; 59 } 60 }); 61 }); 62 on_event(document.querySelector('#box1'), 'pointerdown', function(event) { 63 event.target.releasePointerCapture(event.pointerId); 64 test_pointerEvent.step(function() { 65 assert_equals(event.pointerType, expectedPointerType, "Use the instructed pointer type."); 66 }); 67 startSummation = true; 68 lastScreenX = event.screenX; 69 lastScreenY = event.screenY; 70 }); 71 on_event(document.querySelector('#box2'), 'pointerup', function(event) { 72 startSummation = false; 73 test_pointerEvent.done(); 74 }); 75 } 76 </script> 77 </head> 78 <body onload="run()"> 79 <h1>Pointer Events movementX/Y attribute test</h1> 80 <h2 id="pointerTypeDescription"></h2> 81 <h4> 82 Test Description: This test checks the properties of pointer events that do not support hover. 83 <ol> 84 <li>Press down on the black square.</li> 85 <li>Move your pointer slowly along a straight line to the red square.</li> 86 <li>Release the pointer when you are over the red square.</li> 87 </ol> 88 89 Test passes if the proper behavior of the events is observed. 90 </h4> 91 <div id="testContainer"> 92 <div id="box1" class="square"></div> 93 <div id="box2" class="square"></div> 94 <iframe id="innerFrame" src="resources/pointerevent_movementxy-iframe.html"></iframe> 95 </div> 96 <div class="spacer"></div> 97 </body> 98 </html>