pointerevent_movementxy.html (6508B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Events properties tests</title> 5 <meta name="timeout" content="long"> 6 <meta name="viewport" content="width=device-width"> 7 <meta name="variant" content="?mouse"> 8 <meta name="variant" content="?touch"> 9 <meta name="variant" content="?pen"> 10 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/resources/testdriver.js"></script> 14 <script src="/resources/testdriver-actions.js"></script> 15 <script src="/resources/testdriver-vendor.js"></script> 16 <!-- Additional helper script for common checks across event types --> 17 <script type="text/javascript" src="pointerevent_support.js"></script> 18 <style> 19 #testContainer { 20 touch-action: none; 21 user-select: none; 22 position: relative; 23 } 24 #box1 { 25 top: 30px; 26 left: 50px; 27 background: black; 28 } 29 #box2 { 30 top: 70px; 31 left: 250px; 32 background: red; 33 } 34 #innerFrame { 35 top: 10px; 36 left: 100px; 37 } 38 #square2 { 39 visibility: block; 40 } 41 </style> 42 <script> 43 var inputSource = location.search.substring(1); 44 var expectedPointerId = NaN; 45 var lastScreenX = null; 46 var lastScreenY = null; 47 var actionsPromise; 48 49 function resetTestState() { 50 lastScreenX = null; 51 lastScreenY = null; 52 } 53 54 var nonPointermoveEventList = [ 55 "pointerover", 56 "pointerenter", 57 "pointerdown", 58 "pointerup", 59 "pointerout", 60 "pointerleave", 61 "gotpointercapture", 62 "lostpointercapture"]; 63 64 function injectInput(pointerType) { 65 var pointerId = pointerType + "Pointer1"; 66 return new test_driver.Actions() 67 .addPointer(pointerId, pointerType) 68 .pointerMove(0, 0, {origin: box1}) 69 .pointerDown() 70 .pointerMove(20, 30, {origin: box1}) 71 .pointerMove(50, 40, {origin: box1}) 72 .pointerMove(80, 30, {origin: box1}) 73 .pointerMove(110, 20, {origin: box1}) 74 .pointerMove(0, 0, {origin: box2}) 75 .pointerUp() 76 .send(); 77 } 78 79 function run() { 80 var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", [inputSource]); 81 82 [document, document.getElementById('innerFrame').contentDocument].forEach(function(element) { 83 nonPointermoveEventList.forEach(function(eventName) { 84 on_event(element, eventName, function (event) { 85 if (lastScreenX && lastScreenY) { 86 test_pointerEvent.step(function() { 87 assert_equals(event.movementX, 0, "movementX should be 0 for event other than pointermove."); 88 assert_equals(event.movementY, 0, "movementY should be 0 for event other than pointermove."); 89 }); 90 // Reset when entering the new frame. 91 if (event.type == "pointerenter") { 92 lastScreenX = null; 93 lastScreenY = null; 94 } 95 } 96 }); 97 }); 98 99 on_event(element, 'pointermove', function (event) { 100 test_pointerEvent.step(function() { 101 if (lastScreenX && lastScreenY) { 102 assert_equals(event.movementX, event.screenX - lastScreenX, "movementX should be the delta between current event's and last event's screenX"); 103 assert_equals(event.movementY, event.screenY - lastScreenY, "movementY should be the delta between current event's and last event's screenY"); 104 } 105 }); 106 lastScreenX = event.screenX; 107 lastScreenY = event.screenY; 108 }); 109 }); 110 on_event(document.querySelector('#box1'), 'pointerdown', function(event) { 111 event.target.releasePointerCapture(event.pointerId); 112 test_pointerEvent.step(function() { 113 assert_equals(event.pointerType, expectedPointerType, "Use the instructed pointer type."); 114 }); 115 lastScreenX = event.screenX; 116 lastScreenY = event.screenY; 117 }); 118 on_event(document.querySelector('#box2'), 'pointerup', function(event) { 119 // Make sure the test finishes after all the input actions are completed. 120 actionsPromise.then( () => { 121 test_pointerEvent.done(); 122 }); 123 }); 124 125 // Inject input 126 actionsPromise = injectInput(inputSource); 127 } 128 129 </script> 130 </head> 131 <body onload="run()"> 132 <h1>Pointer Events movementX/Y attribute test</h1> 133 <h2 id="pointerTypeDescription"></h2> 134 <h4> 135 Test Description: This test checks the movementX/Y properties of pointer events. 136 <ol> 137 <li>Press down on the black square.</li> 138 <li>Move your pointer slowly along a straight line to the red square.</li> 139 <li>Release the pointer when you are over the red square.</li> 140 </ol> 141 142 Test passes if the proper behavior of the events is observed. 143 </h4> 144 <div id="testContainer"> 145 <div id="box1" class="square"></div> 146 <div id="box2" class="square"></div> 147 <iframe id="innerFrame" src="resources/pointerevent_movementxy-iframe.html"></iframe> 148 </div> 149 <div class="spacer"></div> 150 </body> 151 </html>