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
|
<!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;
}
legend {
background-color: #000;
color: #fff;
padding: 0px 0px;
}
input {
margin: 0rem;
}
.scroller {
width: 100px;
height: 100px;
border: solid 1px black;
overflow: scroll;
padding-block-start: 0px;
padding-block-end: 0px;
}
</style>
<fieldset id="scroller" class="scroller">
<div class="spacer"></div>
</fieldset>
<script>
let scroller = document.getElementById("scroller");
// fieldsets' clientHeight and scrollHeight can be affected by the presence of
// a scrollbar which has been anecdotally measured to be 15 on several
// platforms.
const scrollbar_width = 15;
const max_vertical_scroll_offset = scroller.scrollHeight -
scroller.clientHeight;
// The fieldset's width is set based on the size of its contents:
// https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element
// "For the purpose of calculating the min-content inline size, use the
// greater of the min-content inline size of the rendered legend and the
// min-content inline size of the anonymous fieldset content box."
// So only bother checking vertical scrolling as the adjusted width might
// not permit horizontal scrolling.
let test_cases = [
{
scroll_start: "100px 200px",
expectation: {
scrollTop: 100,
msg: "scroll-start: <length> sets initial scroll position",
}
},
{
scroll_start: "25% 75%",
expectation: {
scrollTop: 0.25 * max_vertical_scroll_offset,
msg: "scroll-start: <percent> sets initial scroll position",
}
},
{
scroll_start: "calc(50px) calc(75px)",
expectation: {
scrollTop: 50,
msg: "scroll-start: <calc> sets initial scroll position",
}
},
{
scroll_start: "start",
expectation: {
scrollTop: 0,
msg: "scroll-start: start sets initial scroll position",
}
},
{
scroll_start: "center center",
expectation: {
scrollTop: 0.5 * max_vertical_scroll_offset,
msg: "scroll-start: center sets initial scroll position",
}
},
{
scroll_start: "end end",
expectation: {
scrollTop: max_vertical_scroll_offset,
msg: "scroll-start: end sets initial scroll position",
}
},
{
scroll_start: "top top",
expectation: {
scrollTop: 0,
msg: "scroll-start: top sets initial scroll position",
}
},
{
scroll_start: "bottom bottom",
expectation: {
scrollTop: max_vertical_scroll_offset,
msg: "scroll-start: bottom sets initial scroll position",
}
},
{
scroll_start: "1000px 2000px",
expectation: {
scrollTop: max_vertical_scroll_offset,
msg: "scroll-start is clamped",
}
}
];
async function resetScroller(scroll_start) {
scroller.style.display = "none";
assert_equals(getComputedStyle(scroller)["display"], "none");
scroller.style["scroll-start"] = scroll_start;
scroller.style.display = "block";
assert_equals(getComputedStyle(scroller)["display"], "block");
assert_equals(scroller.style.scrollStart, scroll_start);
}
async function test_scroll_start(scroll_start, expectation) {
await resetScroller(scroll_start);
assert_approx_equals(scroller.scrollTop, expectation.scrollTop,
scrollbar_width, expectation.msg);
}
promise_test(async () => {
for (let test_case of test_cases) {
await test_scroll_start(test_case.scroll_start,
test_case.expectation);
}
}, "scroll-start sets default position of fieldset element");
</script>
</body>
|
