helper_fission_tap.html (3124B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>Test to ensure events get untransformed properly for OOP iframes</title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <script src="/tests/SimpleTest/paint_listener.js"></script> 9 <script src="helper_fission_utils.js"></script> 10 <script src="apz_test_utils.js"></script> 11 <script src="apz_test_native_event_utils.js"></script> 12 <script> 13 14 // Copied from helper_fission_transforms.html, except for the 15 // synthesis function. 16 17 async function test() { 18 const iframe = document.querySelector("iframe"); 19 await setupCrossOriginIFrame(iframe, "helper_fission_plain.html"); 20 21 let readyPromise = new Promise(resolve => { 22 window.addEventListener("message", event => { 23 if (event.data === "listenerready") { 24 resolve(); 25 } 26 }); 27 }); 28 29 let result = await SpecialPowers.spawn(iframe, [], async () => { 30 content.document.addEventListener("click", (e) => { 31 let data = JSON.stringify({ 32 type: "clicked", 33 coords: { 34 offsetX: e.clientX, 35 offsetY: e.clientY 36 } 37 }); 38 content.window.parent.postMessage(data, "*"); 39 }); 40 41 content.window.parent.postMessage("listenerready", "*"); 42 43 return true; 44 }); 45 ok(result, "Successfully installed event listener in OOP iframe"); 46 47 await readyPromise; 48 49 let childMessagePromise = new Promise(resolve => { 50 window.addEventListener("message", event => { 51 if (typeof event.data === 'string') { 52 let data = JSON.parse(event.data); 53 if ("type" in data && data.type == "clicked") { 54 let coordinates = { 55 offsetX: data.coords.offsetX, 56 offsetY: data.coords.offsetY 57 }; 58 resolve(coordinates); 59 } 60 } 61 }); 62 }); 63 64 await synthesizeNativeTap(document.body, 200, 200, function () { 65 dump("Finished synthesizing click, waiting for OOPIF message...\n"); 66 }); 67 68 let clickCoordsInChild = await childMessagePromise; 69 let expected_coord = 100 / Math.sqrt(2); // because the iframe is rotated 45 deg 70 ok(Math.abs(clickCoordsInChild.offsetX - expected_coord) < 3, 71 `x-coord ${clickCoordsInChild.offsetX} landed near expected value ${expected_coord}`); 72 ok(Math.abs(clickCoordsInChild.offsetY - expected_coord) < 3, 73 `y-coord ${clickCoordsInChild.offsetY} landed near expected value ${expected_coord}`); 74 } 75 76 waitUntilApzStable() 77 .then(test) 78 .then(subtestDone, subtestFailed); 79 80 </script> 81 <style> 82 body, 83 html { 84 margin: 0; 85 } 86 87 div { 88 transform-origin: top left; 89 transform: translateX(200px) scale(2) rotate(45deg); 90 width: 250px; 91 } 92 93 iframe { 94 width: 200px; 95 height: 150px; 96 border: solid 1px black; 97 } 98 </style> 99 </head> 100 <body> 101 <div><iframe id="testframe"></iframe></div> 102 </body> 103 </html>