Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test that OOP iframe's displayport is initially set</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<script src="helper_fission_utils.js"></script>
<script src="apz_test_utils.js"></script>
<script>
async function getIframeDisplayport(iframe) {
return SpecialPowers.spawn(iframe, [], () => {
return content.wrappedJSObject.getLastContentDisplayportFor(
"fission_empty_docelement",
{ expectPainted: false }
);
});
}
async function test() {
// Fully visible iframe.
const visibleIframeElement = document.getElementById("visible-testframe");
const shortIframeSize = visibleIframeElement.getBoundingClientRect();
await setupCrossOriginIFrame(visibleIframeElement, "helper_fission_plain.html");
const remoteType = await SpecialPowers.spawn(visibleIframeElement, [], async () => {
return await SpecialPowers.spawnChrome([], () => {
return windowGlobalParent.domProcess.remoteType;
});
});
if (remoteType === "web") {
is(SpecialPowers.effectiveIsolationStrategy(), SpecialPowers.ISOLATION_STRATEGY.IsolateHighValue);
ok(true, "Skipping this test since the document on example.com got loaded in the same content process");
return;
}
let displayport = await getIframeDisplayport(visibleIframeElement);
is(displayport.width, shortIframeSize.width, "The displayport size should be same as the iframe size");
is(displayport.height, shortIframeSize.height, "The displayport size should be same as the iframe size");
// Fully invisible iframe (inside `overflow: hidden` parent element)
const invisibleIframeElement = document.getElementById("invisible-testframe");
await setupCrossOriginIFrame(invisibleIframeElement, "helper_fission_plain.html", true);
displayport = await getIframeDisplayport(invisibleIframeElement);
ok(!displayport, "The displayport shouldn't have set for invisible iframe");
// Scrolled out iframe.
const scrolledOutIframeElement = document.getElementById("scrolled-out-testframe");
await setupCrossOriginIFrame(scrolledOutIframeElement, "helper_fission_plain.html", true);
displayport = await getIframeDisplayport(scrolledOutIframeElement);
ok(!displayport,
"The displayport shouldn't have set for iframe far away from the parent displayport");
// Partially invisible iframe (inside `overflow: hidden` parent element)
const clippedOutIframeElement = document.getElementById("clipped-out-testframe");
const tallIframeSize = clippedOutIframeElement.getBoundingClientRect();
await setupCrossOriginIFrame(clippedOutIframeElement, "helper_fission_plain.html");
displayport = await getIframeDisplayport(clippedOutIframeElement);
is(displayport.width, tallIframeSize.width, "The displayport width should be same as the iframe width");
ok(displayport.height > 0, "The displayport height should be greater than zero");
ok(displayport.height < tallIframeSize.height, "The displayport height should be less than the iframe height");
const partiallyScrolledOutIframeElement = document.getElementById("partially-scrolled-out-testframe");
await setupCrossOriginIFrame(partiallyScrolledOutIframeElement, "helper_fission_plain.html");
displayport = await getIframeDisplayport(partiallyScrolledOutIframeElement);
is(displayport.width, tallIframeSize.width, "The displayport width should be same as the iframe width");
ok(displayport.height > 0, "The displayport height should be greater than zero");
ok(displayport.height < tallIframeSize.height, "The displayport height should be less than the iframe height");
}
if (!SpecialPowers.Services.appinfo.fissionAutostart) {
ok(true, "This test doesn't need to run with disabling Fission");
subtestDone();
} else {
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
}
</script>
<style>
:root {
/* To avoid fractional getBoundingClientRect() */
--rounded-15vh: round(15vh, 1px);
--rounded-50vh: round(50vh, 1px);
--rounded-30vw: round(30vw, 1px);
}
body {
margin: 0px;
}
.container {
display: flex;
}
iframe {
width: var(--rounded-30vw);
border: none;
}
.short {
height: var(--rounded-15vh);
}
.tall {
height: var(--rounded-50vh);
}
</style>
</head>
<body>
<div class="container">
<iframe id="visible-testframe" class="short"></iframe>
<div style="width: var(--rounded-30vw); height: var(--rounded-15vh); overflow: hidden;">
<div style="width: 100%; height: 1000px;"></div>
<iframe id="invisible-testframe" class="short"></iframe>
</div>
<div style="width: var(--rounded-30vw); height: var(--rounded-15vh); overflow: scroll;">
<div style="width: 100%; height: 10000px;"></div>
<iframe id="scrolled-out-testframe" class="short"></iframe>
</div>
</div>
<div class="container">
<div style="width: var(--rounded-30vw); height: var(--rounded-50vh); overflow: hidden;">
<div style="width: 100%; height: 40vh;"></div>
<iframe id="clipped-out-testframe" class="tall"></iframe>
</div>
<div style="width: var(--rounded-30vw); height: var(--rounded-50vh); overflow: scroll;">
<div style="width: 100%; height: 40vh;"></div>
<iframe id="partially-scrolled-out-testframe" class="tall"></iframe>
</div>
</div>
</body>
</html>