diff options
Diffstat (limited to '')
-rw-r--r-- | dom/base/test/fullscreen/file_fullscreen-scrollbar.html | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/dom/base/test/fullscreen/file_fullscreen-scrollbar.html b/dom/base/test/fullscreen/file_fullscreen-scrollbar.html new file mode 100644 index 0000000000..3736c5566a --- /dev/null +++ b/dom/base/test/fullscreen/file_fullscreen-scrollbar.html @@ -0,0 +1,132 @@ +<!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%; + } + #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.width: ${screen.width}, screen.height: ${screen.height}`); + info(`rect.width: ${rect.width}, rect.height: ${rect.height}`); + is(rect.width, screen.width - gVerticalScrollbarWidth, + `Should have vertical scrollbar when ${elem} is in fullscreen`); + is(rect.height, screen.height - gHorizontalScrollbarWidth, + `Should have horizontal scrollbar when ${elem} is in fullscreen`); +} + +function assertHasNoScrollbars(elem) { + var rect = getMeasureRect(); + 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(elem, document.fullscreenElement, + "Should only check the current fullscreen element"); + var assertFunc = shouldHaveScrollbars ? + assertHasScrollbars : assertHasNoScrollbars; + assertFunc(elem); + triggerFrameReconstruction(); + assertFunc(elem); +} + +function begin() { + if (window.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; + } + + var rectOuter = document.getElementById("ref-outer").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}`); + + 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> |