Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test to ensure events get untransformed properly for OOP iframes</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 => {
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 synthesizeNativeMouseEventWithAPZ(
{ type: "click", target: document.body, offsetX: 400, offsetY: 400 },
() => dump("Finished synthesizing click, waiting for OOPIF message...\n")
);
let clickCoordsInChild = await childMessagePromise;
let expected_coord = 200 / Math.sqrt(2); // because the iframe is rotated 45 deg
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 {
transform-origin: top left;
transform: translateX(400px) scale(2) rotate(45deg) translate(-50px, -50px);
width: 500px;
}
iframe {
width: 400px;
height: 300px;
position: absolute;
top: 50px;
left: 50px;
border: solid 1px black;
}
</style>
</head>
<body>
<div><iframe id="testframe"></iframe></div>
</body>
</html>