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 to ensure events get delivered properly for an OOP iframe</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>
// Copied from helper_fission_touch.html, differences are 1) the iframe is not
// transformed instead it's offseted by margin values, 2) the top level document
// is zoomed by 2.0, 3) using documentElement instead of body to query
// getBoundingClientRect() because margin collapsing happens between the body
// and the offseted div (i.e. getBoundingClientRect() for body returns 100px top
// value).
SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0);
async function test() {
const iframe = document.querySelector("iframe");
await setupCrossOriginIFrame(iframe, "helper_fission_plain.html");
let readyPromise = new Promise(resolve => {
window.addEventListener("message", event => {
if (event.data === "listenerready") {
resolve();
}
});
});
let result = await SpecialPowers.spawn(iframe, [], async () => {
content.document.addEventListener("click", (e) => {
let data = JSON.stringify({
type: "clicked",
coords: {
offsetX: e.clientX,
offsetY: e.clientY
}
});
content.window.parent.postMessage(data, "*");
});
content.window.parent.postMessage("listenerready", "*");
return true;
});
ok(result, "Successfully installed event listener in OOP iframe");
await readyPromise;
let childMessagePromise = new Promise(resolve => {
window.addEventListener("message", event => {
let data = JSON.parse(event.data);
if ("type" in data && data.type == "clicked") {
let coordinates = {
offsetX: data.coords.offsetX,
offsetY: data.coords.offsetY
};
resolve(coordinates);
}
});
});
await synthesizeNativeTap(document.documentElement, 200, 200, function () {
dump("Finished synthesizing click, waiting for OOPIF message...\n");
});
let clickCoordsInChild = await childMessagePromise;
let expected_coord = 100; // because the iframe is offseted by (100, 100).
ok(Math.abs(clickCoordsInChild.offsetX - expected_coord) < 3,
`x-coord ${clickCoordsInChild.offsetX} landed near expected value ${expected_coord}`);
ok(Math.abs(clickCoordsInChild.offsetY - expected_coord) < 3,
`y-coord ${clickCoordsInChild.offsetY} landed near expected value ${expected_coord}`);
}
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
</script>
<style>
body,
html {
margin: 0;
}
div {
margin-left: 100px;
margin-top: 100px;
width: 500px;
}
iframe {
width: 400px;
height: 300px;
border: solid 1px black;
}
</style>
</head>
<body>
<div><iframe id="testframe"></iframe></div>
</body>
</html>