Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style id="style"></style>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/WindowSnapshot.js"></script>
<script type="text/javascript" src="file_fullscreen-utils.js"></script>
<style>
html {
overflow: hidden;
}
#placeholder {
height: 1000vh;
}
</style>
</head>
<body>
<div id="fullscreen"></div>
<div id="placeholder"></div>
<script>
const gStyle = document.getElementById("style");
const gFullscreen = document.getElementById("fullscreen");
function is(a, b, msg) {
opener.is(a, b, "[backdrop] " + msg);
}
function isnot(a, b, msg) {
opener.isnot(a, b, "[backdrop] " + msg);
}
function ok(cond, msg) {
opener.ok(cond, "[backdrop] " + msg);
}
function info(msg) {
opener.info("[backdrop] " + msg);
}
function synthesizeMouseAtWindowCenter() {
synthesizeMouseAtPoint(innerWidth / 2, innerHeight / 2, {});
}
const gFullscreenElementBackground = getComputedStyle(gFullscreen).background;
function begin() {
info("The default background of window should be white");
assertWindowPureColor(window, "white");
addFullscreenChangeContinuation("enter", enterFullscreen);
gFullscreen.requestFullscreen();
}
function setBackdropStyle(style) {
gStyle.textContent = `#fullscreen::backdrop { ${style} }`;
}
function enterFullscreen() {
is(getComputedStyle(gFullscreen).background, gFullscreenElementBackground,
"Computed background of #fullscreen shouldn't be changed");
info("The default background of backdrop for fullscreen is black");
assertWindowPureColor(window, "black");
setBackdropStyle("background: green");
info("The background color of backdrop should be changed to green");
assertWindowPureColor(window, "green");
gFullscreen.style.background = "blue";
info("The blue fullscreen element should cover the backdrop");
assertWindowPureColor(window, "blue");
gFullscreen.style.background = "";
setBackdropStyle("display: none");
info("The white body should be shown when the backdrop is hidden");
assertWindowPureColor(window, "white");
setBackdropStyle("");
info("Content should return to black because we restore the backdrop");
assertWindowPureColor(window, "black");
gFullscreen.style.display = "none";
info("The backdrop should disappear with the fullscreen element");
assertWindowPureColor(window, "white");
gFullscreen.style.display = "";
setBackdropStyle("position: absolute");
info("Changing position shouldn't immediately affect the view");
assertWindowPureColor(window, "black");
window.scroll(0, screen.height);
info("Scrolled up the absolutely-positioned element");
assertWindowPureColor(window, "white");
addFullscreenChangeContinuation("exit", exitFullscreen);
document.exitFullscreen();
}
function exitFullscreen() {
opener.nextTest();
}
</script>
</body>
</html>