143 lines
4.5 KiB
HTML
143 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>
|
|
Element#requestFullscreen() works properly with a tree of cross-origin iframes
|
|
</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
|
|
<body>
|
|
<script>
|
|
function waitFor(action, frameName) {
|
|
return new Promise((resolve) => {
|
|
window.addEventListener("message", function listener(e) {
|
|
if (e.data.action === action && e.data.name === frameName) {
|
|
window.removeEventListener("message", listener);
|
|
resolve(event.data);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function compare_report(report, expectedEvents) {
|
|
assert_equals(
|
|
report.events.length,
|
|
expectedEvents.length,
|
|
`Expected report for iframe "${report.frame}" to have ${expectedEvents.length} events: [${expectedEvents}]`
|
|
);
|
|
report.events.forEach((value, i) => {
|
|
assert_equals(
|
|
value,
|
|
expectedEvents[i],
|
|
"Event type matches in order expected"
|
|
);
|
|
});
|
|
|
|
report.events.length
|
|
? assert_false(
|
|
report.fullscreenElementIsNull,
|
|
"Event fired, fullscreenElement is set"
|
|
)
|
|
: assert_true(
|
|
report.fullscreenElementIsNull,
|
|
"No event fired, fullscreenElement is null"
|
|
);
|
|
}
|
|
|
|
const iframes = [
|
|
{
|
|
name: "A",
|
|
src: "http://{{hosts[][]}}:{{ports[http][0]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?a",
|
|
allow_fullscreen: true,
|
|
expectedEvents: ["fullscreenchange"],
|
|
},
|
|
{
|
|
name: "B",
|
|
src: "http://{{hosts[][]}}:{{ports[http][1]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?b",
|
|
allow_fullscreen: true,
|
|
expectedEvents: ["fullscreenchange"],
|
|
},
|
|
{
|
|
name: "C",
|
|
src: "http://{{hosts[alt][]}}:{{ports[http][0]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?c",
|
|
allow_fullscreen: true,
|
|
expectedEvents: ["fullscreenchange"],
|
|
},
|
|
{
|
|
name: "D",
|
|
src: "http://{{hosts[alt][]}}:{{ports[http][1]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?d",
|
|
allow_fullscreen: true,
|
|
expectedEvents: ["fullscreenchange"],
|
|
},
|
|
{
|
|
name: "E",
|
|
src: "http://{{hosts[][]}}:{{ports[http][0]}}/fullscreen/api/resources/recursive-iframe-fullscreen.html?e",
|
|
allow_fullscreen: true,
|
|
expectedEvents: [],
|
|
},
|
|
];
|
|
|
|
promise_setup(async () => {
|
|
// Add the first iframe.
|
|
const iframeDetails = iframes[0];
|
|
const child_frame = document.createElement("iframe");
|
|
child_frame.allow = iframeDetails.allow_fullscreen ? "fullscreen" : "";
|
|
child_frame.name = iframeDetails.name;
|
|
child_frame.style.width = "100%";
|
|
child_frame.style.height = "100%";
|
|
child_frame.src = iframeDetails.src;
|
|
await new Promise((resolve) => {
|
|
child_frame.onload = resolve;
|
|
document.body.appendChild(child_frame);
|
|
});
|
|
|
|
// Create the nested iframes.
|
|
for (let i = 1; i < iframes.length; i++) {
|
|
const parentName = iframes[i - 1].name;
|
|
const details = iframes[i];
|
|
child_frame.contentWindow.postMessage(
|
|
{ action: "addIframe", iframe: details, name: parentName },
|
|
"*"
|
|
);
|
|
await waitFor("load", details.name);
|
|
}
|
|
});
|
|
|
|
promise_test(async (t) => {
|
|
t.add_cleanup(() => {
|
|
if (document.fullscreenElement) {
|
|
return document.exitFullscreen();
|
|
}
|
|
});
|
|
document.onfullscreenerror = t.unreached_func(
|
|
"fullscreenerror event fired"
|
|
);
|
|
const fsChangeFiredPromise = new Promise((resolve) => {
|
|
document.onfullscreenchange = resolve;
|
|
});
|
|
|
|
const child_frame = document.querySelector("iframe[name=A]");
|
|
child_frame.contentWindow.postMessage(
|
|
{
|
|
action: "requestFullscreen",
|
|
name: "D",
|
|
},
|
|
"*"
|
|
);
|
|
|
|
await waitFor("requestFullscreen", "D");
|
|
|
|
for (const frame of iframes.slice(1)) {
|
|
const data = {
|
|
action: "requestReport",
|
|
name: frame.name,
|
|
};
|
|
child_frame.contentWindow.postMessage(data, "*");
|
|
const { report } = await waitFor("report", frame.name);
|
|
compare_report(report, frame.expectedEvents);
|
|
}
|
|
await fsChangeFiredPromise;
|
|
}, "Element#requestFullscreen() works properly with a tree of cross-origin iframes");
|
|
</script>
|
|
</body>
|