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 a nested 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>
// Expanding on helper_fission_tap_on_zoomed.html.
// We are also zoomed in, but in this test we have two nested iframes
// that we are sending a click to.
SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0);
function getEventPromise(eventName) {
let eventPromise = new Promise(resolve => {
const listener = event => {
if (event.data === eventName) {
window.removeEventListener("message", listener);
resolve();
}
}
window.addEventListener("message", listener);
});
return eventPromise;
}
function getClickPromise() {
let promise = new Promise(resolve => {
let listener = event => {
let data = JSON.parse(event.data);
if ("type" in data && data.type === "clicked") {
window.removeEventListener("message", listener);
resolve([data.x, data.y]);
}
};
window.addEventListener("message", listener);
});
return promise;
}
function isWithinMargin(a, b, margin) {
return (Math.abs(a - b) < margin);
}
async function test() {
const parentIframe = document.querySelector("iframe");
await setupCrossOriginIFrame(parentIframe, "helper_fission_plain.html");
// Load another OOP document in the parent OOP iframe.
await SpecialPowers.spawn(parentIframe, [], async () => {
const iframe = content.document.createElement("iframe");
const url = content.wrappedJSObject.SimpleTest.getTestFileURL("helper_fission_plain.html");
iframe.src = url.replace(content.window.location.origin, "https://example.org");
iframe.style.width = "400px";
iframe.style.height = "300px";
iframe.style.border = "none";
content.document.body.appendChild(iframe);
await new Promise(resolve => {
iframe.addEventListener("load", resolve, { once: true });
});
await SpecialPowers.spawn(iframe, [], async () => {
await content.wrappedJSObject.promiseApzFlushedRepaints();
});
});
// Set a click event listener in the nested OOP document.
let clickListenerReady = getEventPromise("clickEventListenerReady");
await SpecialPowers.spawn(parentIframe, [], async () => {
const childIframe = content.document.querySelector("iframe");
await SpecialPowers.spawn(childIframe, [], async () => {
const listener = event => {
content.document.removeEventListener("click", listener);
let data = JSON.stringify({
type: "clicked",
x: event.clientX,
y: event.clientY
});
content.window.parent.parent.postMessage(data, "*");
};
content.document.addEventListener("click", listener);
content.window.parent.parent.postMessage("clickEventListenerReady", "*");
});
});
await clickListenerReady;
let clickReceived = getClickPromise();
await synthesizeNativeTap(document.documentElement, 200, 200, function () {
dump("Finished synthesizing click, waiting for OOPIF message...\n");
});
const [actualX, actualY] = await clickReceived;
dump(`OOPIF response: (x: ${actualX}, y: ${actualY})\n`);
const expected = 100; // because the parent iframe is offsetted by (100, 100)
const margin = 3;
ok(isWithinMargin(actualX, expected, margin),
`x-coord ${actualX} landed near expected value ${expected}`);
ok(isWithinMargin(actualY, expected, margin),
`y-coord ${actualY} landed near expected value ${expected}`);
}
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>