1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!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.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>
|
