mozilla-central/dom/base/test/fullscreen/file_fullscreen-top-layer.html (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test for Bug 1126230</title>
<style>
#back {
position: fixed !important;
z-index: 2147483647 !important;
top: 0 !important; left: 0 !important;
right: 0 !important; bottom: 0 !important;
width: 100% !important; height: 100% !important;
}
#parent {
position: fixed;
z-index: -2147483748;
width: 0; height: 0;
overflow: hidden;
opacity: 0;
mask: url(#mask);
clip: rect(0, 0, 0, 0);
clip-path: url(#clipPath);
filter: opacity(0%);
will-change: transform;
perspective: 10px;
transform: scale(0);
}
/* The following styles are copied from ua.css to ensure that
* no other style change may trigger frame reconstruction */
:root {
overflow: hidden !important;
}
.two #fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 2147483647 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
box-sizing: border-box !important;
}
</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>
</head>
<body>
<div id="parent">
<div id="fullscreen" style="background-color: green"></div>
</div>
<div id="back" style="background-color: red"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clipPath"></clipPath>
<mask id="mask"></mask>
</defs>
</svg>
<script>
const gParentProperties = [
"position", "zIndex", "overflow",
"opacity", "mask", "clip", "clipPath",
"filter", "willChange", "transform"
];
var gInitialVals = {};
const gParent = document.getElementById("parent");
const gFullscreen = document.getElementById("fullscreen");
const gBack = document.getElementById("back");
function is(a, b, msg) {
opener.is(a, b, "[top-layer] " + msg);
}
function isnot(a, b, msg) {
opener.isnot(a, b, "[top-layer] " + msg);
}
function ok(cond, msg) {
opener.ok(cond, "[top-layer] " + msg);
}
function synthesizeMouseAtWindowCenter() {
synthesizeMouseAtPoint(innerWidth / 2, innerHeight / 2, {});
}
var tests = ["one", "two"];
function begin() {
// record initial computed style of #parent
const style = getComputedStyle(gParent);
for (var prop of gParentProperties) {
gInitialVals[prop] = style[prop];
}
nextTest();
}
function nextTest() {
document.body.className = tests.shift();
// trigger a reflow to ensure the state of frames before fullscreen
gFullscreen.getBoundingClientRect();
ok(!document.fullscreenElement, "Shouldn't be in fullscreen");
// check window snapshot
assertWindowPureColor(window, "red");
// simulate click
window.addEventListener("click", firstClick);
synthesizeMouseAtWindowCenter();
}
function firstClick(evt) {
window.removeEventListener("click", firstClick);
is(evt.target, gBack, "Click target should be #back before fullscreen");
addFullscreenChangeContinuation("enter", enterFullscreen);
gFullscreen.requestFullscreen();
}
function enterFullscreen() {
ok(document.fullscreenElement, "Should now be in fullscreen");
// check window snapshot
assertWindowPureColor(window, "green");
// check computed style of #parent
const style = getComputedStyle(gParent);
for (var prop of gParentProperties) {
is(style[prop], gInitialVals[prop],
`Computed style ${prop} of #parent should not be changed`);
}
// simulate click
window.addEventListener("click", secondClick);
synthesizeMouseAtWindowCenter();
}
function secondClick(evt) {
window.removeEventListener("click", secondClick);
is(evt.target, gFullscreen, "Click target should be #fullscreen now");
addFullscreenChangeContinuation("exit", exitFullscreen);
document.exitFullscreen();
}
function exitFullscreen() {
if (tests.length) {
nextTest();
} else {
opener.nextTest();
}
}
</script>
</body>
</html>