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
|
<html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<style type="text/css">
body {
border:1px solid black;
width:200px;
height:40px;
padding-bottom:50px;
padding-right:40px;
}
#elemSimple {
background:yellow;
width:60px;
height:30px;
}
#elemOverflow {
background:yellow;
width:250px;
height:150px;
}
</style>
<body id="thebody">
<div id="thediv"></div>
</body>
<script>
// Testing for html body element's scroll- x, y, width, height behaviour in quirks mode
// https://drafts.csswg.org/cssom-view/#potentially-scrollable
// https://drafts.csswg.org/cssom-view/#dom-element-scrollheight
test(function() {
// can i get the div element?
var thediv = document.getElementById("thediv");
assert_equals(thediv.id, "thediv");
// can i get the body element?
var thebody = document.getElementById("thebody");
assert_equals(thebody.id, "thebody");
}, "Ensure that body element is loaded.")
test(function() {
document.body.style.overflowY = "hidden";
assert_equals(document.body.style.overflowY, "hidden", "Could not set document.body.style.overflowY to 'hidden'.");
document.body.style.overflowY = "scroll";
assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'.");
document.documentElement.style.overflowY = "scroll";
assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflow to 'scroll'.");
document.documentElement.style.overflowY = "";
document.body.style.overflowY = "";
}, "Ensure that style.overflowY can be set properly.")
test(function() {
assert_equals(document.compatMode, "BackCompat", "Should be in quirks mode.");
}, "document.compatMode should be BackCompat in quirks.")
test(function() {
var thebody = document.getElementById("thebody");
assert_equals(thebody.id, "thebody");
assert_equals(document.scrollingElement, thebody,
"scrollingElement in quirks mode should default to body element.");
}, "document.scrollingElement should be body element in quirks.")
test(function() {
document.documentElement.style.overflowY = "scroll";
assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflowY to 'scroll'.");
var thebody = document.getElementById("thebody");
assert_equals(thebody.id, "thebody");
thebody.style.overflowY="scroll";
assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'.");
// Body and document now both have overflow != visible
// => body `potentially scrollable`
// In quirks, when body is not `potentially scrollable`
// document.scrollingElment returns the body, otherwise null
// https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement
assert_equals(document.scrollingElement, null,
"In quirks, we would expect null here (because of potentially scrollable body)");
}, "scrollingElement in quirks should be null when body is potentially scrollable.")
test(function() {
document.documentElement.style.overflowY = "visible";
assert_equals(document.documentElement.style.overflowY, "visible");
assert_equals(document.scrollingElement, document.body);
document.documentElement.style.overflowY = "scroll";
assert_equals(document.documentElement.style.overflowY, "scroll");
document.body.style.overflowY = "visible";
assert_equals(document.body.style.overflowY, "visible");
assert_equals(document.scrollingElement, document.body);
document.documentElement.style.overflowY = "visible";
assert_equals(document.documentElement.style.overflowY, "visible");
assert_equals(document.scrollingElement, document.body);
}, "scrollingElement in quirks should be body if any of document and body has a visible overflow.")
// no overflow property set to `visible` => pot. scrollable
test(function() {
document.body.style.overflowY = "scroll";
assert_equals(document.body.style.overflowY, "scroll");
document.documentElement.style.overflowY = "scroll";
assert_equals(document.documentElement.style.overflowY, "scroll");
assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run.");
assert_not_equals(document.body.scrollHeight, window.innerHeight);
var elem = document.getElementById("thediv");
elem.style.height = "170px";
assert_equals(elem.style.height, "170px");
oldScrollHeight = document.body.scrollHeight;
elem.style.height = "190px";
assert_equals(elem.style.height, "190px");
assert_equals(document.body.scrollHeight, oldScrollHeight+20);
}, "When body potentially scrollable, document.body.scrollHeight changes when changing the height of the body content in quirks.")
// any use of `visible` => not potentially scrollable
function testNotPotScrollable (document_overflow, body_overflow) {
document.body.style.overflowY = body_overflow;
assert_equals(document.body.style.overflowY, body_overflow);
document.documentElement.style.overflowY = document_overflow;
assert_equals(document.documentElement.style.overflowY, document_overflow);
assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run.");
assert_equals(document.body.scrollHeight, window.innerHeight);
var elem = document.getElementById("thediv");
elem.style.height = "170px";
assert_equals(elem.style.height, "170px");
assert_equals(window.innerHeight, document.body.scrollHeight);
oldScrollHeight = document.body.scrollHeight;
elem.style.height = "190px";
assert_equals(elem.style.height, "190px");
assert_equals(window.innerHeight, document.body.scrollHeight);
assert_equals(document.body.scrollHeight, oldScrollHeight);
}
tests = [["visible", "scroll"], ["scroll", "visible"], ["visible", "visible"]];
for (var i = 0; i < tests.length; i++) {
test( function () {
testNotPotScrollable (tests[i][0], tests[i][1]);
}, "When body not potentially scrollable, document.body.scrollHeight always equals window.innerHeight in quirks. (cond. "+tests[i][0]+", "+tests[i][1]+")")
}
</script>
</html>
|
