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
|
<!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>
|
