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
|
<!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;
writing-mode: vertical-lr;
}
</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: 100px top">
<div class="spacer"></div>
</div>
<div id="bottomscroller" class="scroller" style="scroll-start: 100px bottom">
<div class="spacer"></div>
</div>
<div id="leftscroller" class="scroller" style="scroll-start: left 100px">
<div class="spacer"></div>
</div>
<div id="rightscroller" class="scroller" style="scroll-start: right 100px">
<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.scrollLeft, 100,
"scroll-start: <length> sets initial scroll position");
let percent_scroller = document.getElementById("percentscroller");
const percent_scroll_left = 0.25 * (percent_scroller.scrollWidth -
percent_scroller.clientWidth);
assert_approx_equals(percent_scroller.scrollLeft, percent_scroll_left, 1,
"scroll-start: <percent> sets initial scroll position");
let calc_scroller = document.getElementById("calcscroller");
assert_equals(calc_scroller.scrollLeft, 50,
"scroll-start: <calc> sets initial scroll position");
let start_scroller = document.getElementById("startscroller");
assert_equals(start_scroller.scrollLeft, 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.scrollLeft, center_scroll_top, 1,
"scroll-start: center sets initial scroll position");
let end_scroller = document.getElementById("endscroller");
const end_scroll_top = end_scroller.scrollWidth -
end_scroller.clientWidth;
assert_equals(end_scroller.scrollLeft, end_scroll_top,
"scroll-start: end sets initial scroll position");
let top_scroller = document.getElementById("topscroller");
assert_equals(top_scroller.scrollLeft, 100,
"scroll-start: top sets initial scroll position");
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.scrollLeft, 100,
"scroll-start: bottom sets initial scroll position");
assert_equals(bottom_scroller.scrollTop, bottom_scroll_top,
"scroll-start: top sets initial scroll position");
let left_scroller = document.getElementById("leftscroller");
assert_equals(left_scroller.scrollTop, 100,
"scroll-start: left sets initial scroll position");
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.scrollTop, 100,
"scroll-start: right sets initial scroll position");
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.scrollWidth -
clamped_scroller.clientWidth;
const clamped_scroll_left = clamped_scroller.scrollHeight -
clamped_scroller.clientHeight;
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");
}, "scroll-start sets initial scroll offset correctly in vertical " +
"writing modes");
</script>
</body>
|
