file_movementXY.html (6063B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=633602 5 --> 6 <head> 7 <title>Bug 633602 - file_movementXY.html</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"> 9 </script> 10 <script src="/tests/SimpleTest/EventUtils.js"> 11 </script> 12 <script type="application/javascript" src="pointerlock_utils.js"></script> 13 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 14 </head> 15 <body> 16 <a target="_blank" 17 href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602"> 18 Mozilla Bug 633602 19 </a> 20 <div id="div"></div> 21 <pre id="test"> 22 <script type="application/javascript"> 23 /* 24 * Test for Bug 633602 25 * Checks if movementX and movementY are present 26 * in the mouse event object. 27 * It also checks the values for movementXY. 28 * They should be equal to the current screenXY minus 29 * the last screenXY 30 */ 31 32 SimpleTest.waitForExplicitFinish(); 33 SimpleTest.requestFlakyTimeout("We may need to wait for window's moving"); 34 35 function MouseMovementStats(aEvent) { 36 this.screenX = aEvent.screenX; 37 this.screenY = aEvent.screenY; 38 this.movementX = aEvent.movementX; 39 this.movementY = aEvent.movementY; 40 } 41 42 var div = document.getElementById("div"); 43 var movementX, movementY; 44 var firstMouseMove, secondMouseMove, secondPointerMove, secondPointerRawUpdate; 45 46 function runTests () { 47 ok(movementX && movementY, "movementX and " + 48 "movementY should exist in mouse events objects."); 49 ok(firstMouseMove, "firstMouseMove should be recorded"); 50 ok(secondMouseMove, "secondMouseMove should be recorded"); 51 ok(secondPointerMove, "secondPointerMove should be recorded"); 52 ok(secondPointerRawUpdate, "secondPointerRawUpdate should be recorded"); 53 is( 54 secondMouseMove?.movementX, 55 secondMouseMove?.screenX - firstMouseMove?.screenX, 56 `movementX should be equal to eNow.screenX (${secondMouseMove.screenX}) - ePrevious.screenX (${firstMouseMove.screenX})` 57 ); 58 is( 59 secondPointerMove?.movementX, 60 secondMouseMove?.movementX, 61 "movementX of pointermove should be equal to movementX of the corresponding mousemove" 62 ); 63 is( 64 secondPointerRawUpdate?.movementX, 65 secondPointerMove?.movementX, 66 "movementX of pointerrawupdate should be equal to movementX of the corresponding pointermove" 67 ); 68 is( 69 secondMouseMove?.movementY, 70 secondMouseMove?.screenY - firstMouseMove?.screenY, 71 `movementY should be equal to eNow.screenY (${secondMouseMove.screenY}) - ePrevious.screenY (${firstMouseMove.screenY})` 72 ); 73 is( 74 secondPointerMove?.movementY, 75 secondMouseMove?.movementY, 76 "movementY of pointermove should be equal to movementY of the corresponding mousemove" 77 ); 78 is( 79 secondPointerRawUpdate?.movementY, 80 secondPointerMove?.movementY, 81 "movementY of pointerrawupdate should be equal to movementY of the corresponding pointermove" 82 ); 83 } 84 85 var onFirstMouseMove = function(e) { 86 info(`Got first ${e.type}`); 87 88 div.removeEventListener(e.type, onFirstMouseMove); 89 90 firstMouseMove = new MouseMovementStats(e); 91 92 movementX = ("movementX" in e); 93 movementY = ("movementY" in e); 94 95 div.addEventListener("mousemove", onSecondMouseMoveOrPointerMove); 96 div.addEventListener("pointermove", onSecondMouseMoveOrPointerMove); 97 div.addEventListener("pointerrawupdate", onSecondMouseMoveOrPointerMove); 98 const divCenterWidth = Math.round(div.getBoundingClientRect().width / 2); 99 const divCenterHeight = Math.round(div.getBoundingClientRect().height / 2); 100 // FIXME: We should synthesize another mousemove after the propagation of 101 // current mousemove ends. However, doing that will fail so that it does 102 // not make sense what this test checks. 103 synthesizeMouse(div, (divCenterWidth + 10), (divCenterHeight + 10), { 104 type: "mousemove" 105 }, window); 106 }; 107 108 var onSecondMouseMoveOrPointerMove = function(e) { 109 info(`Got second ${e.type}`); 110 111 div.removeEventListener(e.type, onSecondMouseMoveOrPointerMove); 112 switch (e.type) { 113 case "mousemove": 114 secondMouseMove = new MouseMovementStats(e); 115 addFullscreenChangeContinuation("exit", function() { 116 info("Got fullscreenchange for exiting"); 117 runTests(); 118 SimpleTest.finish(); 119 }); 120 document.exitFullscreen(); 121 break; 122 case "pointermove": 123 secondPointerMove = new MouseMovementStats(e); 124 break; 125 case "pointerrawupdate": 126 secondPointerRawUpdate = new MouseMovementStats(e); 127 break; 128 } 129 }; 130 131 function start() { 132 info("Requesting fullscreen on parent"); 133 for (const type of ["mousemove", "pointermove", "pointerrawupdate"]) { 134 addEventListener(type, event => { 135 info(`${type}: { screenX: ${event.screenX}, screenY: ${ 136 event.screenY 137 }, movementX: ${event.movementX}, movementY: ${event.movementY} }`); 138 }, {capture: true}); 139 } 140 addFullscreenChangeContinuation("enter", function() { 141 info("Got fullscreenchange for entering"); 142 div.addEventListener("mousemove", onFirstMouseMove); 143 requestAnimationFrame( 144 () => synthesizeMouseAtCenter(div, {type: "mousemove"}, window) 145 ); 146 }); 147 div.requestFullscreen(); 148 } 149 </script> 150 </pre> 151 </body> 152 </html>