file_pointercapture_xorigin_iframe_pointerlock.html (3866B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1671849 5 --> 6 <head> 7 <title>Bug 1671849</title> 8 <script src="/tests/SimpleTest/EventUtils.js"></script> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="pointerevent_utils.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 <style> 13 #target { 14 width: 100px; 15 height: 100px; 16 background-color: green; 17 } 18 iframe { 19 width: 400px; 20 height: 300px; 21 border: 1px solid blue; 22 } 23 </style> 24 </head> 25 <body> 26 <a target="_blank"href="https://bugzilla.mozilla.org/show_bug.cgi?id=1671849">Mozilla Bug 1671849</a> 27 <div id="target"></div> 28 <iframe src="https://example.com/tests/dom/events/test/pointerevents/iframe.html"></iframe> 29 30 <pre id="test"> 31 <script type="text/javascript"> 32 /** 33 * Test for Bug 1671849 34 */ 35 function requestPointerLockOnRemoteTarget(aRemoteTarget, aTagName) { 36 return SpecialPowers.spawn(aRemoteTarget, [aTagName], async (tagName) => { 37 SpecialPowers.wrap(content.document).notifyUserGestureActivation(); 38 let target = content.document.querySelector(tagName); 39 target.requestPointerLock(); 40 await new Promise((aResolve) => { 41 let eventHandler = function(e) { 42 is(e.type, "pointerlockchange", `Got ${e.type} on iframe`); 43 is(content.document.pointerLockElement, target, `pointer lock element`); 44 content.document.removeEventListener("pointerlockchange", eventHandler); 45 content.document.removeEventListener("pointerlockerror", eventHandler); 46 aResolve(); 47 }; 48 content.document.addEventListener("pointerlockchange", eventHandler); 49 content.document.addEventListener("pointerlockerror", eventHandler); 50 }); 51 }); 52 } 53 54 function exitPointerLockOnRemoteTarget(aRemoteTarget) { 55 return SpecialPowers.spawn(aRemoteTarget, [], async () => { 56 content.document.exitPointerLock(); 57 await new Promise((aResolve) => { 58 let eventHandler = function(e) { 59 is(e.type, "pointerlockchange", `Got ${e.type} on iframe`); 60 is(content.document.pointerLockElement, null, `pointer lock element`); 61 content.document.removeEventListener("pointerlockchange", eventHandler); 62 content.document.removeEventListener("pointerlockerror", eventHandler); 63 aResolve(); 64 }; 65 content.document.addEventListener("pointerlockchange", eventHandler); 66 content.document.addEventListener("pointerlockerror", eventHandler); 67 }); 68 }); 69 } 70 71 function waitEventOnRemoteTarget(aRemoteTarget, aEventName) { 72 return SpecialPowers.spawn(aRemoteTarget, [aEventName], async (eventName) => { 73 await new Promise((aResolve) => { 74 content.document.body.addEventListener(eventName, (e) => { 75 ok(true, `got ${e.type} event on ${e.target}`); 76 aResolve(); 77 }, { once: true }); 78 }); 79 }); 80 } 81 82 add_task(async function test_pointer_capture_xorigin_iframe_pointer_lock() { 83 await SimpleTest.promiseFocus(); 84 85 // Request pointer capture on top-level. 86 let target = document.getElementById("target"); 87 synthesizeMouse(target, 10, 10, { type: "mousedown" }); 88 await waitForEvent(target, "pointerdown", function(e) { 89 target.setPointerCapture(e.pointerId); 90 }); 91 92 let iframe = document.querySelector("iframe"); 93 synthesizeMouse(iframe, 10, 10, { type: "mousemove" }); 94 await Promise.all([waitForEvent(target, "gotpointercapture"), 95 waitForEvent(target, "pointermove")]); 96 97 // Request pointer lock on iframe. 98 let iframeWin = iframe.contentWindow; 99 await Promise.all([requestPointerLockOnRemoteTarget(iframeWin, "div"), 100 waitForEvent(target, "lostpointercapture")]); 101 102 // Exit pointer lock on iframe. 103 await exitPointerLockOnRemoteTarget(iframeWin); 104 105 synthesizeMouse(target, 10, 10, { type: "mouseup" }); 106 await waitForEvent(target, "pointerup"); 107 }); 108 </script> 109 </pre> 110 </body> 111 </html>