helper_fission_initial_displayport.html (5779B)
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 that OOP iframe's displayport is initially set</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> 12 13 async function getIframeDisplayport(iframe) { 14 return SpecialPowers.spawn(iframe, [], () => { 15 return content.wrappedJSObject.getLastContentDisplayportFor( 16 "fission_empty_docelement", 17 { expectPainted: false } 18 ); 19 }); 20 } 21 22 async function test() { 23 // Fully visible iframe. 24 const visibleIframeElement = document.getElementById("visible-testframe"); 25 const shortIframeSize = visibleIframeElement.getBoundingClientRect(); 26 await setupCrossOriginIFrame(visibleIframeElement, "helper_fission_plain.html"); 27 28 const remoteType = await SpecialPowers.spawn(visibleIframeElement, [], async () => { 29 return await SpecialPowers.spawnChrome([], () => { 30 return windowGlobalParent.domProcess.remoteType; 31 }); 32 }); 33 if (remoteType === "web") { 34 is(SpecialPowers.effectiveIsolationStrategy(), SpecialPowers.ISOLATION_STRATEGY.IsolateHighValue); 35 ok(true, "Skipping this test since the document on example.com got loaded in the same content process"); 36 return; 37 } 38 39 let displayport = await getIframeDisplayport(visibleIframeElement); 40 is(displayport.width, shortIframeSize.width, "The displayport size should be same as the iframe size"); 41 is(displayport.height, shortIframeSize.height, "The displayport size should be same as the iframe size"); 42 43 // Fully invisible iframe (inside `overflow: hidden` parent element) 44 const invisibleIframeElement = document.getElementById("invisible-testframe"); 45 await setupCrossOriginIFrame(invisibleIframeElement, "helper_fission_plain.html", true); 46 displayport = await getIframeDisplayport(invisibleIframeElement); 47 ok(!displayport, "The displayport shouldn't have set for invisible iframe"); 48 49 // Scrolled out iframe. 50 const scrolledOutIframeElement = document.getElementById("scrolled-out-testframe"); 51 await setupCrossOriginIFrame(scrolledOutIframeElement, "helper_fission_plain.html", true); 52 displayport = await getIframeDisplayport(scrolledOutIframeElement); 53 ok(!displayport, 54 "The displayport shouldn't have set for iframe far away from the parent displayport"); 55 56 // Partially invisible iframe (inside `overflow: hidden` parent element) 57 const clippedOutIframeElement = document.getElementById("clipped-out-testframe"); 58 const tallIframeSize = clippedOutIframeElement.getBoundingClientRect(); 59 await setupCrossOriginIFrame(clippedOutIframeElement, "helper_fission_plain.html"); 60 displayport = await getIframeDisplayport(clippedOutIframeElement); 61 is(displayport.width, tallIframeSize.width, "The displayport width should be same as the iframe width"); 62 ok(displayport.height > 0, "The displayport height should be greater than zero"); 63 ok(displayport.height < tallIframeSize.height, "The displayport height should be less than the iframe height"); 64 65 const partiallyScrolledOutIframeElement = document.getElementById("partially-scrolled-out-testframe"); 66 await setupCrossOriginIFrame(partiallyScrolledOutIframeElement, "helper_fission_plain.html"); 67 displayport = await getIframeDisplayport(partiallyScrolledOutIframeElement); 68 is(displayport.width, tallIframeSize.width, "The displayport width should be same as the iframe width"); 69 ok(displayport.height > 0, "The displayport height should be greater than zero"); 70 ok(displayport.height < tallIframeSize.height, "The displayport height should be less than the iframe height"); 71 } 72 73 if (!SpecialPowers.Services.appinfo.fissionAutostart) { 74 ok(true, "This test doesn't need to run with disabling Fission"); 75 subtestDone(); 76 } else { 77 waitUntilApzStable() 78 .then(test) 79 .then(subtestDone, subtestFailed); 80 } 81 82 </script> 83 <style> 84 :root { 85 /* To avoid fractional getBoundingClientRect() */ 86 --rounded-15vh: round(15vh, 1px); 87 --rounded-50vh: round(50vh, 1px); 88 --rounded-30vw: round(30vw, 1px); 89 } 90 body { 91 margin: 0px; 92 } 93 .container { 94 display: flex; 95 } 96 iframe { 97 width: var(--rounded-30vw); 98 border: none; 99 } 100 .short { 101 height: var(--rounded-15vh); 102 } 103 .tall { 104 height: var(--rounded-50vh); 105 } 106 </style> 107 </head> 108 <body> 109 <div class="container"> 110 <iframe id="visible-testframe" class="short"></iframe> 111 <div style="width: var(--rounded-30vw); height: var(--rounded-15vh); overflow: hidden;"> 112 <div style="width: 100%; height: 1000px;"></div> 113 <iframe id="invisible-testframe" class="short"></iframe> 114 </div> 115 <div style="width: var(--rounded-30vw); height: var(--rounded-15vh); overflow: scroll;"> 116 <div style="width: 100%; height: 10000px;"></div> 117 <iframe id="scrolled-out-testframe" class="short"></iframe> 118 </div> 119 </div> 120 121 <div class="container"> 122 <div style="width: var(--rounded-30vw); height: var(--rounded-50vh); overflow: hidden;"> 123 <div style="width: 100%; height: 40vh;"></div> 124 <iframe id="clipped-out-testframe" class="tall"></iframe> 125 </div> 126 <div style="width: var(--rounded-30vw); height: var(--rounded-50vh); overflow: scroll;"> 127 <div style="width: 100%; height: 40vh;"></div> 128 <iframe id="partially-scrolled-out-testframe" class="tall"></iframe> 129 </div> 130 </div> 131 </body> 132 </html>