Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /fullscreen/api/fullscreen-request-preconditions.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>requestFullscreen preconditions: permission-feature check, popover visibility</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>
<script src="../trusted-click.js"></script>
<div id="log"></div>
<script>
// requestFullscreen preconditions:
// - Element's node document must be allowed to use the "fullscreen"
// permission feature — a document in a same-origin iframe whose
// allow= list denies fullscreen must reject.
// - Element's popover visibility state must be hidden — an element
// with popover="..." that has been shown via showPopover() has
// visibility state "showing" and fails the ready-check's
// "namespace is not HTML OR popover visibility state is hidden"
// clause.
// - A hidden popover element (has popover attribute, not shown) IS
// eligible because its visibility state is "hidden".
promise_test(async t => {
const iframe = document.createElement("iframe");
iframe.srcdoc = "<!doctype html><div id='target'>iframe target</div>";
iframe.allow = "fullscreen 'none'";
document.body.appendChild(iframe);
t.add_cleanup(() => { iframe.remove(); });
await new Promise(r => iframe.addEventListener("load", r, { once: true }));
const iframeDoc = iframe.contentDocument;
const target = iframeDoc.getElementById("target");
assert_not_equals(target, null, "iframe contains the target element");
await trusted_click(iframeDoc.body);
let rejection = null;
try {
await target.requestFullscreen();
} catch (e) {
rejection = e;
}
assert_not_equals(rejection, null,
"requestFullscreen on an element in an iframe with allow='fullscreen \\'none\\'' rejects");
assert_equals(rejection.name, "TypeError",
"rejection is a TypeError (name check for cross-realm safety)");
}, "requestFullscreen: rejects when the document is not allowed to use the fullscreen permission feature");
promise_test(async t => {
// Hidden popover: element with popover attribute but not shown is
// in popover-visibility-state "hidden". The ready-check's
// "namespace is not HTML OR popover visibility state is hidden"
// clause succeeds via the second branch, so requestFullscreen
// proceeds normally.
const el = document.createElement("div");
el.setAttribute("popover", "auto");
document.body.appendChild(el);
t.add_cleanup(async () => {
if (document.fullscreenElement) await document.exitFullscreen().catch(() => {});
el.remove();
});
await trusted_request(el);
assert_equals(document.fullscreenElement, el,
"requestFullscreen succeeds on a hidden popover element " +
"(popover-visibility-state 'hidden' satisfies the ready-check OR clause)");
}, "requestFullscreen: succeeds when the element is a popover in hidden state");
promise_test(async t => {
// Showing popover: "namespace is not HTML OR popover visibility
// state is hidden" fails for a showing HTML popover (both branches
// false), so requestFullscreen rejects with TypeError.
const el = document.createElement("div");
el.setAttribute("popover", "manual");
document.body.appendChild(el);
t.add_cleanup(() => {
if (el.matches(":popover-open")) el.hidePopover();
el.remove();
});
el.showPopover();
assert_true(el.matches(":popover-open"),
"popover is in the showing state after showPopover()");
await trusted_click(document.body);
let rejection = null;
try {
await el.requestFullscreen();
} catch (e) {
rejection = e;
}
assert_not_equals(rejection, null,
"requestFullscreen on a showing popover element rejects");
assert_equals(rejection.name, "TypeError", "rejection is a TypeError");
}, "requestFullscreen: rejects when the element is a popover in showing state");
</script>