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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS Scroll Snap 2 Test: scroll-start-*</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<style>
.spacer {
width: 500px;
height: 500px;
border: solid 1px green;
}
.scroller {
width: 100px;
height: 100px;
border: solid 1px black;
overflow: scroll;
}
</style>
<div id="lengthscroller" class="scroller" style="scroll-start: 100px">
<div class="spacer"></div>
</div>
<div id="percentscroller" class="scroller" style="scroll-start: 25%">
<div class="spacer"></div>
</div>
<div id="calcscroller" class="scroller" style="scroll-start: calc(50px)">
<div class="spacer"></div>
</div>
<div id="startscroller" class="scroller" style="scroll-start: start">
<div class="spacer"></div>
</div>
<div id="centerscroller" class="scroller" style="scroll-start: center">
<div class="spacer"></div>
</div>
<div id="endscroller" class="scroller" style="scroll-start: end">
<div class="spacer"></div>
</div>
<div id="topscroller" class="scroller" style="scroll-start: top">
<div class="spacer"></div>
</div>
<div id="bottomscroller" class="scroller" style="scroll-start: bottom">
<div class="spacer"></div>
</div>
<div id="leftscroller" class="scroller" style="scroll-start: auto left">
<div class="spacer"></div>
</div>
<div id="rightscroller" class="scroller" style="scroll-start: auto right">
<div class="spacer"></div>
</div>
<div id="clampedscroller" class="scroller" style="scroll-start: 1000px 1000px">
<div class="spacer"></div>
</div>
<script>promise_test(async (t) => {
let length_scroller = document.getElementById("lengthscroller");
assert_equals(length_scroller.scrollTop, 100,
"scroll-start: <length> sets initial scroll position");
let percent_scroller = document.getElementById("percentscroller");
const percent_scroll_top = 0.25 * (percent_scroller.scrollHeight -
percent_scroller.clientHeight);
assert_approx_equals(percent_scroller.scrollTop, percent_scroll_top, 1,
"scroll-start: <percent> sets initial scroll position");
let calc_scroller = document.getElementById("calcscroller");
assert_equals(calc_scroller.scrollTop, 50,
"scroll-start: <calc> sets initial scroll position");
let start_scroller = document.getElementById("startscroller");
assert_equals(start_scroller.scrollTop, 0,
"scroll-start: start sets initial scroll position");
let center_scroller = document.getElementById("centerscroller");
const center_scroll_top = 0.5 * (center_scroller.scrollHeight -
center_scroller.clientHeight);
assert_approx_equals(center_scroller.scrollTop, center_scroll_top, 1,
"scroll-start: center sets initial scroll position");
let end_scroller = document.getElementById("endscroller");
const end_scroll_top = end_scroller.scrollHeight -
end_scroller.clientHeight;
assert_equals(end_scroller.scrollTop, end_scroll_top,
"scroll-start: end sets initial scroll position");
let top_scroller = document.getElementById("topscroller");
assert_equals(top_scroller.scrollTop, 0,
"scroll-start: top sets initial scroll position");
let bottom_scroller = document.getElementById("bottomscroller");
const bottom_scroll_top = bottom_scroller.scrollHeight -
bottom_scroller.clientHeight;
assert_equals(bottom_scroller.scrollTop, bottom_scroll_top,
"scroll-start: bottom sets initial scroll position");
let left_scroller = document.getElementById("leftscroller");
assert_equals(left_scroller.scrollLeft, 0,
"scroll-start: left sets initial scroll position");
let right_scroller = document.getElementById("rightscroller");
const right_scroll_top = right_scroller.scrollWidth -
right_scroller.clientWidth;
assert_equals(right_scroller.scrollLeft, right_scroll_top,
"scroll-start: right sets initial scroll position");
let clamped_scroller = document.getElementById("clampedscroller");
const clamped_scroll_top = clamped_scroller.scrollHeight -
clamped_scroller.clientHeight;
const clamped_scroll_left = clamped_scroller.scrollWidth -
clamped_scroller.clientWidth;
assert_equals(clamped_scroller.scrollTop, clamped_scroll_top,
"scroll-start is clamped to max vertical scroll offset");
assert_equals(clamped_scroller.scrollLeft, clamped_scroll_left,
"scroll-start is clamped to max horizontal scroll offset");
});
</script>
</body>
|
