Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="file_fullscreen-utils.js"></script>
<style>
div {
position: fixed;
top: 20px; height: 50px;
opacity: 0.3;
border: 5px solid black;
box-sizing: border-box;
}
#fullscreen0 {
left: 50px; width: 50px;
background: #ff0000;
border-color: #800000;
}
#fullscreen1 {
left: 100px; width: 50px;
background: #00ff00;
border-color: #008000;
}
#fullscreen2 {
left: 150px; width: 50px;
background: #0000ff;
border-color: #000080;
}
</style>
</head>
<body>
<script type="application/javascript">
function info(msg) {
opener.info("[selector] " + msg);
}
function ok(condition, msg) {
opener.ok(condition, "[selector] " + msg);
}
function is(a, b, msg) {
opener.is(a, b, "[selector] " + msg);
}
function rectEquals(rect1, rect2) {
return rect1.x == rect2.x && rect1.y == rect2.y &&
rect1.width == rect2.width && rect1.height == rect2.height;
}
function getViewportRect() {
return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
}
var fullscreenElems = [];
function checkFullscreenState(elem, hasState, viewportRect) {
var id = elem.id;
var rect = elem.getBoundingClientRect();
if (hasState) {
ok(elem.matches(":fullscreen"),
`${id} should match selector ":fullscreen"`);
ok(rectEquals(rect, viewportRect),
`The bounding rect of ${id} should match the viewport`);
} else {
ok(!elem.matches(":fullscreen"),
`${id} should not match selector ":fullscreen"`);
// Position might vary because if one of our ancestors is fullscreen it
// contains us.
is(rect.width, elem.initialRect.width,
`The width of ${id} should match its initial state`);
is(rect.height, elem.initialRect.height,
`The height of ${id} should match its initial state`);
}
}
function checkFullscreenStates(states) {
var viewportRect = getViewportRect();
fullscreenElems.forEach((elem, index) => {
checkFullscreenState(elem, states[index], viewportRect);
});
}
function begin() {
fullscreenElems.push(document.getElementById('fullscreen0'));
fullscreenElems.push(document.getElementById('fullscreen1'));
fullscreenElems.push(document.getElementById('fullscreen2'));
var viewportRect = getViewportRect();
for (var elem of fullscreenElems) {
var rect = elem.getBoundingClientRect();
var id = elem.id;
elem.initialRect = rect;
ok(!elem.matches(":fullscreen"),
`${id} should not match selector ":fullscreen"`);
ok(!rectEquals(elem.initialRect, viewportRect),
`The initial bounding rect of ${id} should not match the viewport`);
}
info("Entering fullscreen on fullscreen0");
addFullscreenChangeContinuation("enter", enter0);
fullscreenElems[0].requestFullscreen();
}
function enter0() {
checkFullscreenStates([true, false, false]);
info("Entering fullscreen on fullscreen1");
addFullscreenChangeContinuation("enter", enter1);
fullscreenElems[1].requestFullscreen();
}
function enter1() {
checkFullscreenStates([true, true, false]);
info("Entering fullscreen on fullscreen2");
addFullscreenChangeContinuation("enter", enter2);
fullscreenElems[2].requestFullscreen();
}
function enter2() {
checkFullscreenStates([true, true, true]);
info("Leaving fullscreen on fullscreen2");
addFullscreenChangeContinuation("exit", exit2);
document.exitFullscreen();
}
function exit2() {
checkFullscreenStates([true, true, false]);
info("Leaving fullscreen on fullscreen1");
addFullscreenChangeContinuation("exit", exit1);
document.exitFullscreen();
}
function exit1() {
checkFullscreenStates([true, false, false]);
info("Leaving fullscreen on fullscreen0");
addFullscreenChangeContinuation("exit", exit0);
document.exitFullscreen();
}
function exit0() {
checkFullscreenStates([false, false, false]);
info("Entering fullscreen on all elements");
var count = 0;
function listener() {
if (++count == 3) {
document.removeEventListener("fullscreenchange", listener);
// We bypassed our fullscreenchangeenters count since we didn't
// do our requests with a addFullscreenChangeContinuation, so we
// fix up the expected value now that we're done with this part
// of the test.
setFullscreenChangeEnters(1);
enterAll();
}
}
document.addEventListener("fullscreenchange", listener);
fullscreenElems[0].requestFullscreen();
fullscreenElems[1].requestFullscreen();
fullscreenElems[2].requestFullscreen();
}
function enterAll() {
checkFullscreenStates([true, true, true]);
info("Fully-exiting fullscreen");
addFullscreenChangeContinuation("exit", exitAll);
synthesizeKey("KEY_Escape");
}
function exitAll() {
checkFullscreenStates([false, false, false]);
opener.nextTest();
}
</script>
</pre>
<div id="fullscreen0">
<div id="fullscreen1">
<div id="fullscreen2">
</div>
</div>
</div>
</body>
</html>