Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /fullscreen/api/element-request-fullscreen-cross-origin.sub.html - WPT Dashboard Interop Dashboard
<!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",
allow_fullscreen: true,
expectedEvents: ["fullscreenchange"],
},
{
name: "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>