helper_fission_irregular_areas.html (3667B)
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>Ensure irregular areas on top of OOPIFs hit-test properly</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 async function test() { 14 const iframe = document.getElementById("testframe"); 15 await setupCrossOriginIFrame(iframe, "helper_fission_plain.html"); 16 const remoteType = await SpecialPowers.spawn(iframe, [], async () => { 17 return await SpecialPowers.spawnChrome([], () => { 18 return windowGlobalParent.domProcess.remoteType; 19 }); 20 }); 21 if (remoteType === "web") { 22 is(SpecialPowers.effectiveIsolationStrategy(), SpecialPowers.ISOLATION_STRATEGY.IsolateHighValue); 23 ok(true, "Skipping this test since the document on example.com got loaded in the same content process"); 24 return; 25 } 26 27 let oopifScrollerIds = await SpecialPowers.spawn(iframe, [], async () => { 28 // ensure the oopif is scrollable, and wait for the paint so that the 29 // compositor also knows it's scrollable. 30 content.document.body.style.height = "200vh"; 31 await content.wrappedJSObject.promiseApzFlushedRepaints(); 32 let utils = SpecialPowers.getDOMWindowUtils(content.window); 33 let result = { 34 layersId: utils.getLayersId(), 35 viewId: utils.getViewId(content.document.scrollingElement) 36 }; 37 dump(`OOPIF computed IDs ${JSON.stringify(result)}\n`); 38 return result; 39 }); 40 41 let utils = SpecialPowers.getDOMWindowUtils(window); 42 43 // The triangle_overlay div overlays a part of the iframe. We do 3 hit-tests: 44 // - one that hits the opaque part of the overlay 45 // - one that hits the clipped-away part of the overlay div but is still 46 // inside the bounding box 47 // - one that is not on the overlay at all, but on the part of the iframe not 48 // covered by the overlay. 49 // For the latter two, we expect the hit-test to hit the OOPIF. 50 51 checkHitResult(await hitTestOOPIF({x: 20, y: 100}, iframe), 52 APZHitResultFlags.VISIBLE | APZHitResultFlags.IRREGULAR_AREA, 53 utils.getViewId(document.scrollingElement), 54 utils.getLayersId(), 55 "opaque part of overlay should hit parent doc hosting the OOPIF"); 56 57 checkHitResult(await hitTestOOPIF({x: 180, y: 100}, iframe), 58 APZHitResultFlags.VISIBLE, 59 oopifScrollerIds.viewId, 60 oopifScrollerIds.layersId, 61 "clipped-away part of overlay should hit OOPIF"); 62 63 checkHitResult(await hitTestOOPIF({x: 250, y: 100}, iframe), 64 APZHitResultFlags.VISIBLE, 65 oopifScrollerIds.viewId, 66 oopifScrollerIds.layersId, 67 "part of OOPIF outside the overlay bounding rect should hit the OOPIF"); 68 } 69 70 if (!SpecialPowers.Services.appinfo.fissionAutostart) { 71 ok(true, "This test doesn't need to run with disabling Fission"); 72 subtestDone(); 73 } else { 74 waitUntilApzStable() 75 .then(test) 76 .then(subtestDone, subtestFailed); 77 } 78 </script> 79 </head> 80 <body> 81 <style> 82 html, body { 83 margin: 0; 84 } 85 iframe { 86 position: absolute; 87 width: 300px; 88 height: 200px; 89 } 90 91 #triangle_overlay { 92 position: absolute; 93 top: 0; 94 left: 0; 95 width: 200px; 96 height: 200px; 97 background-color: green; 98 clip-path: polygon(0% 0%, 100% 100%, 0% 100%); 99 } 100 </style> 101 <iframe id="testframe"></iframe> 102 <div id="triangle_overlay"></div> 103 </body> 104 </html>