Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
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.width: ${screen.width}, screen.height: ${screen.height}`);
info(`rect.width: ${rect.width}, rect.height: ${rect.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.width: ${screen.width}, screen.height: ${screen.height}`);
info(`rect.width: ${rect.width}, rect.height: ${rect.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>