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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>cssom-view - elementScroll</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#section {
width: 300px;
height: 500px;
/*position: absolute;*/
top: 16px;
left: 16px;
border: inset gray 3px;
overflow: hidden;
background: white;
}
#scrollable {
width: 400px;
height: 700px;
background: linear-gradient(135deg, red, blue);
}
</style>
<section id="section">
<div id="scrollable"></div>
<div id="unrelated"></div>
</section>
<script>
setup({explicit_done:true});
window.onload = function () {
var section = document.getElementById("section");
var unrelated = document.getElementById("unrelated");
test(function () {
assert_equals(section.scrollTop, 0, "initial scrollTop should be 0");
assert_equals(section.scrollLeft, 0, "initial scrollLeft should be 0");
section.scrollTop = 30;
section.scrollLeft = 40;
assert_equals(section.scrollTop, 30, "changed scrollTop should be 40");
assert_equals(section.scrollLeft, 40, "changed scrollLeft should be 40");
assert_equals(unrelated.scrollTop, 0, "unrelated element should not scroll");
assert_equals(unrelated.scrollLeft, 0, "unrelated element should not scroll");
}, "Element scrollTop/Left getter/setter test");
test(function () {
section.scroll(50, 60);
assert_equals(section.scrollLeft, 50, "changed scrollLeft should be 50");
assert_equals(section.scrollTop, 60, "changed scrollTop should be 60");
}, "Element scroll test (two arguments)");
test(function () {
section.scroll({left: 55, top: 65});
assert_equals(section.scrollLeft, 55, "changed scrollLeft should be 55");
assert_equals(section.scrollTop, 65, "changed scrollTop should be 65");
section.scroll({left: 85});
assert_equals(section.scrollLeft, 85, "changed scrollLeft should be 85");
assert_equals(section.scrollTop, 65, "scrollTop should stay at 65");
section.scroll({top: 75});
assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
assert_equals(section.scrollTop, 75, "changed scrollTop should be 75");
section.scroll({});
assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");
section.scroll();
assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");
}, "Element scroll test (one argument)");
test(function () {
section.scrollTo(80, 70);
assert_equals(section.scrollLeft, 80, "changed scrollLeft should be 70");
assert_equals(section.scrollTop, 70, "changed scrollTop should be 80");
}, "Element scrollTo test (two arguments)");
test(function () {
section.scrollTo({left: 75, top: 85});
assert_equals(section.scrollLeft, 75, "changed scrollLeft should be 75");
assert_equals(section.scrollTop, 85, "changed scrollTop should be 85");
section.scrollTo({left: 65});
assert_equals(section.scrollLeft, 65, "changed scrollLeft should be 65");
assert_equals(section.scrollTop, 85, "scrollTop should stay at 85");
section.scrollTo({top: 55});
assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
assert_equals(section.scrollTop, 55, "changed scrollTop should be 55");
section.scrollTo({});
assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");
section.scrollTo();
assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 55");
assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");
}, "Element scrollTo test (one argument)");
test(function () {
var left = section.scrollLeft;
var top = section.scrollTop;
section.scrollBy(10, 20);
assert_equals(section.scrollLeft, left + 10, "increment of scrollLeft should be 10")
assert_equals(section.scrollTop, top + 20, "increment of scrollTop should be 20")
}, "Element scrollBy test (two arguments)");
test(function () {
var left = section.scrollLeft;
var top = section.scrollTop;
section.scrollBy({left: 5, top: 15});
left += 5
top += 15
assert_equals(section.scrollLeft, left, "increment of scrollLeft should be 5")
assert_equals(section.scrollTop, top, "increment of scrollTop should be 15")
section.scrollBy({left: -15});
left -= 15
assert_equals(section.scrollLeft, left, "decrement of scrollLeft should be 15")
assert_equals(section.scrollTop, top, "scrollTop should not be modified")
section.scrollBy({top: -5});
top -= 5;
assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
assert_equals(section.scrollTop, top, "decrement of scrollTop should be 5")
section.scrollBy({});
assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
assert_equals(section.scrollTop, top, "scrollTop should not be modified")
section.scrollBy();
assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
assert_equals(section.scrollTop, top, "scrollTop should not be modified")
}, "Element scrollBy test (one argument)");
test(function () {
section.scrollTop = 1000;
section.scrollLeft = 1000;
assert_equals(section.scrollTop, 700 - 500, "changed scrollTop should be 200");
assert_equals(section.scrollLeft, 400 - 300, "changed scrollLeft should be 100");
}, "Element scroll maximum test");
done();
};
</script>
|
