149 lines
5.3 KiB
HTML
149 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Test for Bug 1201798</title>
|
|
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="text/javascript" src="file_fullscreen-utils.js"></script>
|
|
<style>
|
|
html, body, #measure {
|
|
width: 100%; height: 100%;
|
|
margin: 0px; border: 0px;
|
|
}
|
|
div {
|
|
margin: 0px; border: 0px;
|
|
}
|
|
#ref-outer { width: 100px; height: 100px; overflow: scroll; }
|
|
#ref-inner { width: 100%; height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="measure"></div>
|
|
<div style="height: 1000vh; width: 1000vw;"></div>
|
|
<div id="ref-outer">
|
|
<div id="ref-inner"></div>
|
|
</div>
|
|
<div id="fullscreen"></div>
|
|
<script type="text/javascript">
|
|
|
|
/** Test for Bug 1201798 */
|
|
|
|
var info = msg => opener.info("[scrollbar] " + msg);
|
|
var ok = (cond, msg) => opener.ok(cond, "[scrollbar] " + msg);
|
|
var is = (a, b, msg) => opener.is(a, b, "[scrollbar] " + msg);
|
|
|
|
var gVerticalScrollbarWidth, gHorizontalScrollbarWidth;
|
|
var gMeasureDiv = document.getElementById("measure");
|
|
var gFullscreenDiv = document.getElementById("fullscreen");
|
|
|
|
function getMeasureRect() {
|
|
return gMeasureDiv.getBoundingClientRect();
|
|
}
|
|
|
|
function triggerFrameReconstruction() {
|
|
info("Triggering a force frame reconstruction");
|
|
var docElem = document.documentElement;
|
|
var wm = window.getComputedStyle(docElem).writingMode;
|
|
if (wm == "horizontal-tb") {
|
|
docElem.style.writingMode = "vertical-rl";
|
|
} else {
|
|
docElem.style.writingMode = "horizontal-tb";
|
|
}
|
|
docElem.getBoundingClientRect();
|
|
}
|
|
|
|
function assertHasScrollbars(elem) {
|
|
var rect = getMeasureRect();
|
|
info(`screen size: ${screen.width}x${screen.height}`);
|
|
info(`window inner size: ${window.innerWidth}x${window.innerHeight}`);
|
|
info(`rect size: ${rect.width}x${rect.height.height}`);
|
|
ok(rect.width <= screen.width - gVerticalScrollbarWidth,
|
|
`Should have width less than or equal to ${screen.width - gVerticalScrollbarWidth} indicating vertical scrollbar when ${elem} is in fullscreen`);
|
|
ok(rect.height <= screen.height - gHorizontalScrollbarWidth,
|
|
`Should have height less than or equal to ${screen.height - gHorizontalScrollbarWidth} indicating horizontal scrollbar when ${elem} is in fullscreen`);
|
|
}
|
|
|
|
function assertHasNoScrollbars(elem) {
|
|
var rect = getMeasureRect();
|
|
info(`screen size: ${screen.width}x${screen.height}`);
|
|
info(`window inner size: ${window.innerWidth}x${window.innerHeight}`);
|
|
info(`rect size: ${rect.width}x${rect.height.height}`);
|
|
is(rect.width, screen.width,
|
|
`Should not have vertical scrollbar when ${elem} is in fullscreen`);
|
|
is(rect.height, screen.height,
|
|
`Should not have horizontal scrollbar when ${elem} is in fullscreen`);
|
|
}
|
|
|
|
function checkScrollbars(elem, shouldHaveScrollbars) {
|
|
is(document.fullscreenElement, elem,
|
|
"Should only check the current fullscreen element");
|
|
var assertFunc = shouldHaveScrollbars ?
|
|
assertHasScrollbars : assertHasNoScrollbars;
|
|
assertFunc(elem);
|
|
triggerFrameReconstruction();
|
|
assertFunc(elem);
|
|
}
|
|
|
|
function begin() {
|
|
// Check for the use of overlay scrollbars. We can only get an accurate
|
|
// answer to our media query if we are Chrome-privileged. Otherwise, the
|
|
// media query will never match.
|
|
let wrappedWindow = SpecialPowers.wrap(window);
|
|
if (wrappedWindow.matchMedia("(-moz-overlay-scrollbars)").matches) {
|
|
// If overlay scrollbar is enabled, the scrollbar is not measurable,
|
|
// so we skip this test in that case.
|
|
info("Skip this test because of overlay scrollbar");
|
|
opener.nextTest();
|
|
return;
|
|
}
|
|
|
|
const outerElement = document.getElementById("ref-outer");
|
|
var rectOuter = outerElement.getBoundingClientRect();
|
|
var rectInner = document.getElementById("ref-inner").getBoundingClientRect();
|
|
info(`rectOuter: ${rectOuter.width} x ${rectOuter.height}`);
|
|
info(`rectInner: ${rectInner.width} x ${rectInner.height}`);
|
|
gVerticalScrollbarWidth = rectOuter.width - rectInner.width;
|
|
gHorizontalScrollbarWidth = rectOuter.height - rectInner.height;
|
|
ok(gVerticalScrollbarWidth != 0, "Should have vertical scrollbar");
|
|
ok(gHorizontalScrollbarWidth != 0, "Should have horizontal scrollbar");
|
|
info(`gVerticalScrollbarWidth: ${gVerticalScrollbarWidth}`);
|
|
info(`gHorizontalScrollbarWidth: ${gHorizontalScrollbarWidth}`);
|
|
|
|
// Remove the display of outerElement to simplify layout when window goes
|
|
// to fullscreen.
|
|
outerElement.style.display = "none";
|
|
|
|
info("Entering fullscreen on root");
|
|
addFullscreenChangeContinuation("enter", enteredFullscreenOnRoot);
|
|
document.documentElement.requestFullscreen();
|
|
}
|
|
|
|
function enteredFullscreenOnRoot() {
|
|
checkScrollbars(document.documentElement, true);
|
|
info("Entering fullscreen on div");
|
|
addFullscreenChangeContinuation("enter", enteredFullscreenOnDiv);
|
|
gFullscreenDiv.requestFullscreen();
|
|
}
|
|
|
|
function enteredFullscreenOnDiv() {
|
|
checkScrollbars(gFullscreenDiv, false);
|
|
info("Exiting fullscreen on div");
|
|
addFullscreenChangeContinuation("exit", exitedFullscreenOnDiv);
|
|
document.exitFullscreen();
|
|
}
|
|
|
|
function exitedFullscreenOnDiv() {
|
|
checkScrollbars(document.documentElement, true);
|
|
info("Exiting fullscreen on root");
|
|
addFullscreenChangeContinuation("exit", exitedFullscreenOnRoot);
|
|
document.exitFullscreen();
|
|
}
|
|
|
|
function exitedFullscreenOnRoot() {
|
|
opener.nextTest();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|