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>Ensure inactive scollframes under OOPIFs hit-test properly</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 src="apz_test_native_event_utils.js"></script>
<script>
async function test() {
const iframe = document.querySelector("iframe");
await setupCrossOriginIFrame(iframe, "helper_fission_plain.html");
let readyPromise = new Promise(resolve => {
window.addEventListener("message", event => {
let data = JSON.parse(event.data);
if ("type" in data && data.type == "scrollableready") {
let ids = {
layersId: data.layersId,
viewId: data.viewId
};
resolve(ids);
}
});
});
let result = await SpecialPowers.spawn(iframe, [], async () => {
// Ensure the oopif is scrollable, and wait for the paint so that the
// compositor also knows it's scrollable.
content.document.body.style.height = "200vh";
await content.wrappedJSObject.promiseApzFlushedRepaints();
let utils = SpecialPowers.getDOMWindowUtils(content.window);
let data = JSON.stringify({
type: "scrollableready",
layersId: utils.getLayersId(),
viewId: utils.getViewId(content.document.scrollingElement)
});
dump(`OOPIF computed IDs ${data}\n`);
content.window.parent.postMessage(data, "*");
return true;
});
ok(result, "Successfully made OOP iframe scrollable");
let oopifScrollerIds = await readyPromise;
// The #scroller div is (a) inactive, and (b) under the OOPIF. Hit-testing
// against it should hit the OOPIF.
checkHitResult(await hitTestOOPIF(centerOf("scroller"), iframe),
APZHitResultFlags.VISIBLE,
oopifScrollerIds.viewId,
oopifScrollerIds.layersId,
"Part of OOPIF sitting on top of the inactive scrollframe should hit OOPIF");
}
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
</script>
</head>
<body>
<style>
html,
body {
margin: 0;
}
body {
/* Ensure root document is scrollable so that #scroller is inactive by
default */
height: 200vh;
}
iframe {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 200px;
}
#scroller {
width: 200px;
height: 200px;
background-color: transparent;
overflow-y: scroll;
}
</style>
<div id="scroller">
<div style="height:500px">inside scroller</div>
</div>
<iframe id="testframe"></iframe>
</body>
</html>