helper_fission_inactivescroller_positionedcontent.html (5342B)
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 positioned content inside inactive scollframes but 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 14 function getEventPromise(eventName) { 15 let eventPromise = new Promise(resolve => { 16 const listener = event => { 17 if (event.data === eventName) { 18 window.removeEventListener("message", listener); 19 resolve(); 20 } 21 } 22 window.addEventListener("message", listener); 23 }); 24 return eventPromise; 25 } 26 27 async function makeIframeScrollable(iframe) { 28 let readyPromise = getEventPromise("scrollableReady"); 29 let ids = await SpecialPowers.spawn(iframe, [], async () => { 30 // Ensure the oopif is scrollable, and wait for the paint so that the 31 // compositor also knows it's scrollable. 32 content.document.body.style.height = "200vh"; 33 await content.wrappedJSObject.promiseApzFlushedRepaints(); 34 content.window.parent.postMessage("scrollableReady", "*"); 35 36 let utils = SpecialPowers.getDOMWindowUtils(content.window); 37 return [utils.getLayersId(), utils.getViewId(content.document.scrollingElement)]; 38 }); 39 await readyPromise; 40 return ids; 41 } 42 43 async function test() { 44 // Set up iframe 45 let iframe = document.getElementById("testframe"); 46 await setupCrossOriginIFrame(iframe, "helper_fission_plain.html"); 47 48 const remoteType = await SpecialPowers.spawn(iframe, [], async () => { 49 return await SpecialPowers.spawnChrome([], () => { 50 return windowGlobalParent.domProcess.remoteType; 51 }); 52 }); 53 if (remoteType === "web") { 54 is(SpecialPowers.effectiveIsolationStrategy(), SpecialPowers.ISOLATION_STRATEGY.IsolateHighValue); 55 ok(true, "Skipping this test since the document on example.com got loaded in the same content process"); 56 return; 57 } 58 59 let [layersId, viewId] = await makeIframeScrollable(iframe); 60 61 let config = getHitTestConfig(); 62 let utils = config.utils; 63 64 // The #scroller div is (a) inactive, and (b) under the OOPIF. However, it 65 // also contains a positioned element with a high z-index (#abspos). #abspos 66 // therefore sits on top of the OOPIF. Hit-testing on #abspos should hit 67 // #scroller, but anywhere else within the OOPIF box should hit the OOPIF. 68 checkHitResult(await hitTestOOPIF(centerOf("abspos"), iframe), 69 APZHitResultFlags.VISIBLE | 70 (config.activateAllScrollFrames ? 0 : APZHitResultFlags.INACTIVE_SCROLLFRAME), 71 config.activateAllScrollFrames ? 72 utils.getViewId(document.getElementById("scroller")) : 73 utils.getViewId(document.scrollingElement), 74 utils.getLayersId(), 75 "abspos element on top of OOPIF should hit parent doc hosting the OOPIF"); 76 77 // If the fix for the bug this test is for is not active (as indicated by 78 // config.activateAllScrollFrames) then we just accept the wrong answer. As 79 // of writing this comment the fix will only be active if fission is pref'ed 80 // on, not just enabled for this window, ie the test suite is run in fission 81 // mode. 82 checkHitResult(await hitTestOOPIF(centerOf("scroller"), iframe), 83 APZHitResultFlags.VISIBLE | 84 (config.activateAllScrollFrames ? 0 : APZHitResultFlags.INACTIVE_SCROLLFRAME), 85 config.activateAllScrollFrames ? 86 viewId : 87 utils.getViewId(document.scrollingElement), 88 config.activateAllScrollFrames ? 89 layersId : 90 utils.getLayersId(), 91 "Part of OOPIF sitting on top of the inactive scrollframe should hit OOPIF"); 92 93 checkHitResult(await hitTestOOPIF({ x: 250, y: 100 }, iframe), 94 APZHitResultFlags.VISIBLE, 95 viewId, 96 layersId, 97 "part of OOPIF outside the inactive scfollframe rect should hit the OOPIF"); 98 } 99 100 if (!SpecialPowers.Services.appinfo.fissionAutostart) { 101 ok(true, "This test doesn't need to run with disabling Fission"); 102 subtestDone(); 103 } else { 104 waitUntilApzStable() 105 .then(test) 106 .then(subtestDone, subtestFailed); 107 } 108 109 </script> 110 </head> 111 112 <body> 113 <style> 114 html, 115 body { 116 margin: 0; 117 } 118 119 body { 120 /* Ensure root document is scrollable so that #scroller is inactive by 121 default */ 122 height: 200vh; 123 } 124 125 iframe { 126 position: absolute; 127 width: 300px; 128 height: 200px; 129 } 130 131 #scroller { 132 position: absolute; 133 top: 0; 134 left: 0; 135 width: 200px; 136 height: 200px; 137 background-color: transparent; 138 overflow-y: scroll; 139 } 140 </style> 141 <div id="scroller"> 142 <div style="height:500px">inside scroller</div> 143 <div id="abspos" 144 style="position: absolute; z-index: 5; left: 0; width: 80px; top: 20px; height: 80px; background-color: green"> 145 abspos inside scroller</div> 146 </div> 147 <iframe id="testframe"></iframe> 148 </body> 149 </html>