2015-10-07 06:04:32 +03:00
|
|
|
<!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;
|
2015-10-22 03:08:35 +03:00
|
|
|
perspective: 10px;
|
2015-10-07 06:04:32 +03:00
|
|
|
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>
|
2019-04-16 06:53:28 +03:00
|
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
|
|
|
|
<script src="/tests/SimpleTest/WindowSnapshot.js"></script>
|
2015-10-07 06:04:32 +03:00
|
|
|
<script type="text/javascript" src="file_fullscreen-utils.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1126230">Mozilla Bug 1126230</a>
|
|
|
|
|
<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();
|
|
|
|
|
|
2016-02-17 03:47:11 +03:00
|
|
|
ok(!document.fullscreenElement, "Shouldn't be in fullscreen");
|
2015-10-07 06:04:32 +03:00
|
|
|
// check window snapshot
|
2016-01-28 02:11:00 +03:00
|
|
|
assertWindowPureColor(window, "red");
|
2015-10-07 06:04:32 +03:00
|
|
|
// 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);
|
2016-02-17 03:47:11 +03:00
|
|
|
gFullscreen.requestFullscreen();
|
2015-10-07 06:04:32 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function enterFullscreen() {
|
2016-02-17 03:47:11 +03:00
|
|
|
ok(document.fullscreenElement, "Should now be in fullscreen");
|
2015-10-07 06:04:32 +03:00
|
|
|
// check window snapshot
|
2016-01-28 02:11:00 +03:00
|
|
|
assertWindowPureColor(window, "green");
|
2015-10-07 06:04:32 +03:00
|
|
|
// 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);
|
2016-02-17 03:47:11 +03:00
|
|
|
document.exitFullscreen();
|
2015-10-07 06:04:32 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function exitFullscreen() {
|
|
|
|
|
if (tests.length > 0) {
|
|
|
|
|
nextTest();
|
|
|
|
|
} else {
|
|
|
|
|
opener.nextTest();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
