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>
fission_subtest_init();
FissionTestHelper.startTestPromise
.then(waitUntilApzStable)
.then(loadOOPIFrame("testframe", "helper_fission_empty.html"))
.then(waitUntilApzStable)
.then(test)
.then(FissionTestHelper.subtestDone, FissionTestHelper.subtestFailed);
let code_for_oopif_to_run = function() {
document.addEventListener("click", function(e) {
dump(`OOPIF got click at ${e.clientX},${e.clientY}\n`);
let result = { x: e.clientX, y: e.clientY };
FissionTestHelper.fireEventInEmbedder("OOPIF:ClickData", result);
}, {once: true});
dump("OOPIF registered click listener\n");
return true;
};
function failsafe() {
// Catch and fail faster on the case where the click ends up not going to
// the iframe like it should. Otherwise the test hangs until timeout which
// is more painful.
document.addEventListener("click", function(e) {
dump(`${location.href} got click at ${e.clientX},${e.clientY}\n`);
ok(false, "The OOPIF hosting page should not have gotten the click");
setTimeout(FissionTestHelper.subtestDone, 0);
}, {once: true});
}
async function test() {
let iframeElement = document.getElementById("testframe");
let iframeResponse = await FissionTestHelper.sendToOopif(iframeElement, `(${code_for_oopif_to_run})()`);
dump("OOPIF response: " + JSON.stringify(iframeResponse) + "\n");
ok(iframeResponse, "code_for_oopif_to_run successfully installed");
iframePromise = promiseOneEvent(window, "OOPIF:ClickData", null);
await synthesizeNativeMouseEventWithAPZ(
{ type: "click", target: document.body, offsetX: 400, offsetY: 400 },
() => dump("Finished synthesizing click, waiting for OOPIF message...\n")
);
iframeResponse = await iframePromise;
dump("OOPIF response: " + JSON.stringify(iframeResponse.data) + "\n");
let expected_coord = 200 / Math.sqrt(2); // because the iframe is rotated 45 deg
ok(Math.abs(iframeResponse.data.x - expected_coord) < 3,
`x-coord ${iframeResponse.data.x} landed near expected value ${expected_coord}`);
ok(Math.abs(iframeResponse.data.y - expected_coord) < 3,
`y-coord ${iframeResponse.data.y} landed near expected value ${expected_coord}`);
}
</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 onload="failsafe()">
<div><iframe id="testframe"></iframe></div>
</body>
</html>