file_retargetMouseEvents.html (7844B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=633602 5 --> 6 <head> 7 <title>Bug 633602 - file_retargetMouseEvents.html</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"> 9 </script> 10 <script src="/tests/SimpleTest/EventUtils.js"></script> 11 <script type="application/javascript" src="pointerlock_utils.js"></script> 12 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 13 </head> 14 <body> 15 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602"> 16 Mozilla Bug 633602 17 </a> 18 19 <div id="parent"> 20 <div id="child" style="width: 100%; height: 100%;"> 21 </div> 22 </div> 23 24 <pre id="test"> 25 <script type="application/javascript"> 26 /* 27 * Test for Bug 633602 28 * Retarget mouse events to the locked element 29 */ 30 31 SimpleTest.waitForExplicitFinish(); 32 33 function MouseEventStats() { 34 this.mouseMove = false; 35 this.mouseDown = false; 36 this.mouseUp = false; 37 this.mouseClick = false; 38 this.mouseScroll = false; 39 this.wheel = false; 40 } 41 42 var parent = document.getElementById("parent") 43 , child = document.getElementById("child") 44 , parentStats = new MouseEventStats() 45 , childStats = new MouseEventStats() 46 , mouseMoveIntervalID; 47 48 function runTests () { 49 is(childStats.mouseMove, false, "Child shound not receive mousemove event."); 50 is(childStats.mouseDown, false, "Child should not receive mousedown event."); 51 is(childStats.mouseUp, false, "Child should not receive mouseup event."); 52 is(childStats.mouseClick, false, "Child should not receive click event."); 53 is(childStats.mouseScroll, false, "Child should not receive DOMMouseScroll event."); 54 is(childStats.wheel, false, "Child should not receive wheel event."); 55 56 ok(parentStats.mouseMove, "Parent should receive mousemove event."); 57 ok(parentStats.mouseDown, "Parent should receive mousedown event."); 58 ok(parentStats.mouseUp, "Parent should receive mouseup event."); 59 ok(parentStats.mouseClick, "Parent should receive click event."); 60 ok(parentStats.mouseScroll, "Parent should receive DOMMouseScroll event."); 61 ok(parentStats.wheel, "Parent should receive wheel event."); 62 } 63 64 65 /** 66 * The event listeners for the child element shouldn't be fired 67 * Mouse events will only happen when the pointer is locked 68 * and if the pointer is locked all the mouse events should be 69 * retargetted to the locked element 70 */ 71 var childMoveTest = function() { 72 clearInterval(mouseMoveIntervalID); 73 childStats.mouseMove = true; 74 } 75 76 var childDownTest = function() { 77 childStats.mouseDown = true; 78 }; 79 80 var childUpTest = function() { 81 childStats.mouseUp = true; 82 }; 83 84 var childClickTest = function() { 85 childStats.mouseClick = true; 86 }; 87 88 var childScrollTest = function() { 89 childStats.mouseScroll = true; 90 }; 91 92 var childWheelTest = function() { 93 childStats.wheel = true; 94 }; 95 96 // Event listeners for the parent element 97 var startMouseTests = function() { 98 info("Got parent mousemove"); 99 clearInterval(mouseMoveIntervalID); 100 parent.removeEventListener("mousemove", startMouseTests); 101 parent.addEventListener("DOMMouseScroll", parentScrollTest); 102 child.addEventListener("DOMMouseScroll", childScrollTest); 103 SimpleTest.executeSoon(function () { 104 synthesizeWheel(child, 5, 5, {'deltaY': 10, 'lineOrPageDeltaY': 10, 105 'deltaMode': WheelEvent.DOM_DELTA_LINE}); 106 }); 107 }; 108 109 var parentScrollTest = function (e) { 110 info("Got parent DOMMouseScroll"); 111 parentStats.mouseScroll = true; 112 parent.removeEventListener("DOMMouseScroll", parentScrollTest); 113 child.removeEventListener("DOMMouseScroll", childScrollTest); 114 parent.addEventListener("wheel", parentWheelTest); 115 child.addEventListener("wheel", childWheelTest); 116 SimpleTest.executeSoon(function () { 117 synthesizeWheel(child, 5, 5, {'deltaY': 10, 'lineOrPageDeltaY': 10, 118 'deltaMode': WheelEvent.DOM_DELTA_LINE}); 119 }); 120 }; 121 122 var parentWheelTest = function (e) { 123 info("Got parent wheel"); 124 parentStats.wheel = true; 125 parent.removeEventListener("wheel", parentWheelTest); 126 child.removeEventListener("wheel", childWheelTest); 127 parent.addEventListener("mousedown", parentDownTest); 128 child.addEventListener("mousedown", childDownTest); 129 SimpleTest.executeSoon(function () { 130 synthesizeMouseAtCenter(child, {type: "mousedown"}, window); 131 }); 132 }; 133 134 var parentDownTest = function (e) { 135 info("Got parent mousedown"); 136 parentStats.mouseDown = true; 137 parent.removeEventListener("mousedown", parentDownTest); 138 child.removeEventListener("mousedown", childDownTest); 139 parent.addEventListener("mouseup", parentUpTest); 140 child.addEventListener("mouseup", childUpTest); 141 SimpleTest.executeSoon(function () { 142 synthesizeMouseAtCenter(child, {type: "mouseup"}, window); 143 }); 144 }; 145 146 var parentUpTest = function (e) { 147 info("Got parent mouseup"); 148 parentStats.mouseUp = true; 149 parent.removeEventListener("mouseup", parentUpTest); 150 child.removeEventListener("mouseup", childUpTest); 151 parent.addEventListener("click", parentClickTest); 152 child.addEventListener("click", childClickTest); 153 SimpleTest.executeSoon(function () { 154 synthesizeMouseAtCenter(child, {}, window); 155 }); 156 }; 157 158 var parentClickTest = function (e) { 159 info("Got parent click"); 160 parentStats.mouseClick = true; 161 parent.removeEventListener("click", parentClickTest); 162 child.removeEventListener("click", childClickTest); 163 parent.addEventListener("mousemove", parentMoveTest); 164 child.addEventListener("mousemove", childMoveTest); 165 SimpleTest.executeSoon(function () { 166 synthesizeMouseAtCenter(child, {type: "mousemove"}, window); 167 }); 168 }; 169 170 var parentMoveTest = function (e) { 171 info("Got parent mousemove"); 172 parentStats.mouseMove = true; 173 parent.removeEventListener("mousemove", parentMoveTest); 174 child.removeEventListener("mousemove", childMoveTest); 175 SimpleTest.executeSoon(function () { 176 info("Exit fullscreen"); 177 addFullscreenChangeContinuation("exit", function() { 178 info("Got fullscreenchange for exiting"); 179 runTests(); 180 SimpleTest.finish(); 181 }); 182 document.exitFullscreen(); 183 }); 184 } 185 186 document.addEventListener("pointerlockchange", function (e) { 187 if (document.pointerLockElement === parent) { 188 info("Got pointerlockchange for entering"); 189 parent.addEventListener("mousemove", startMouseTests); 190 child.addEventListener("mousemove", childMoveTest); 191 // Bug 1357082 192 // Retrigger synthesizeMouseAtCenter until it actually happens. 193 mouseMoveIntervalID = setInterval(() => { 194 synthesizeMouseAtCenter(parent, {type: "mousemove"}, window); 195 }, 100); 196 } else { 197 info("Got pointerlockchange for exiting"); 198 } 199 }); 200 201 function start() { 202 info("Requesting fullscreen on parent"); 203 addFullscreenChangeContinuation("enter", function() { 204 info("Got fullscreenchange for entering"); 205 parent.requestPointerLock(); 206 }); 207 parent.requestFullscreen(); 208 } 209 </script> 210 </pre> 211 </body> 212 </html>