file_childIframe.html (4710B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=633602 5 --> 6 <head> 7 <title>Bug 633602 - file_childIframe.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 <style> 14 #parent, #childDiv, #iframe, #table, #table td { 15 margin: 0; 16 padding: 0; 17 border: none; 18 } 19 #iframe, #table { 20 background-color: red; 21 width: 100%; 22 height: 100%; 23 } 24 #childDiv, #table td { 25 background-color: blue; 26 width: 50%; 27 height: 50%; 28 } 29 </style> 30 </head> 31 <body> 32 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602"> 33 Mozilla Bug 633602 34 </a> 35 36 <div id="parent"> 37 <table id="childTable"> 38 <tr> 39 <td> 40 <iframe id="iframe" src="iframe_differentDOM.html"> 41 </iframe> 42 </td> 43 <td> 44 <div id="childDiv"> 45 </div> 46 </td> 47 </tr> 48 </table> 49 </div> 50 51 <pre id="test"> 52 <script type="application/javascript"> 53 /* 54 * Test for Bug 633602 55 * Check if pointer is locked when over a child iframe of 56 * the locked element 57 * Check if pointer is being repositioned back to center of 58 * the locked element even when pointer goes over a child iframe 59 */ 60 61 SimpleTest.waitForExplicitFinish(); 62 63 var parent = document.getElementById("parent") 64 , childDiv = document.getElementById("childDiv") 65 , iframe = document.getElementById("iframe"); 66 67 function MovementStats(aEvent) { 68 this.movementX = aEvent.movementX; 69 this.movementY = aEvent.movementY; 70 } 71 72 var hoverIframe; 73 var firstMove, secondMove; 74 75 function runTests () { 76 ok( 77 hoverIframe, 78 "Pointer should be locked even when pointer hovers over a child iframe" 79 ); 80 is( 81 firstMove?.movementX, 82 secondMove?.movementX, 83 "MovementX of first move to childDiv should be equal to movementX of second move to child div" 84 ); 85 is( 86 firstMove?.movementY, 87 secondMove?.movementY, 88 "MovementY of first move to childDiv should be equal to movementY of second move to child div" 89 ); 90 } 91 92 var firstMoveChild = function (e) { 93 info(`got firstMoveChild called: { screenX: ${e.screenX}, screenY: ${ 94 e.screenY 95 }, movementX: ${e.movementX}, movementY: ${e.movementY} }`); 96 97 firstMove = new MovementStats(e); 98 99 parent.removeEventListener("mousemove", firstMoveChild); 100 101 requestAnimationFrame(() => { 102 parent.addEventListener("mousemove", moveIframe); 103 synthesizeMouseAtCenter(iframe, {type: "mousemove"}, window); 104 }); 105 }; 106 107 var moveIframe = function (e) { 108 info(`got moveIframe called: { screenX: ${e.screenX}, screenY: ${ 109 e.screenY 110 }, movementX: ${e.movementX}, movementY: ${e.movementY} }`); 111 112 hoverIframe = !!document.pointerLockElement; 113 114 parent.removeEventListener("mousemove", moveIframe); 115 116 requestAnimationFrame(() => { 117 parent.addEventListener("mousemove", secondMoveChild); 118 synthesizeMouseAtCenter(childDiv, {type: "mousemove"}, window); 119 }); 120 }; 121 122 var secondMoveChild = function (e) { 123 info(`got secondMoveChild called: { screenX: ${e.screenX}, screenY: ${ 124 e.screenY 125 }, movementX: ${e.movementX}, movementY: ${e.movementY} }`); 126 127 secondMove = new MovementStats(e); 128 parent.removeEventListener("mousemove", secondMoveChild); 129 130 addFullscreenChangeContinuation("exit", function() { 131 runTests(); 132 SimpleTest.finish(); 133 }); 134 info("Calling exitFullscreen()..."); 135 document.exitFullscreen(); 136 }; 137 138 document.addEventListener("pointerlockchange", function () { 139 info(`Got pointerlockchange: pointerLockElement:\n${document.pointerLockElement?.outerHTML}`); 140 if (document.pointerLockElement === parent) { 141 parent.addEventListener("mousemove", firstMoveChild); 142 synthesizeMouseAtCenter(childDiv, {type: "mousemove"}, window); 143 } 144 }); 145 146 function start() { 147 addFullscreenChangeContinuation("enter", function() { 148 info("Calling requestPointerLock()..."); 149 parent.requestPointerLock(); 150 }); 151 info("Calling requestFullscreen()..."); 152 parent.requestFullscreen(); 153 } 154 </script> 155 </pre> 156 </body> 157 </html>