-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
snap-area-overflow-boundary.html
155 lines (141 loc) · 5.26 KB
/
snap-area-overflow-boundary.html
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
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-scroll-snap-1/#snap-overflow" />
<title></title>
<meta name="assert" content="Test passes if snap is to the nearest edge">
<style>
body {
margin: 0px;
}
#scroller {
scroll-snap-type: block mandatory;
overflow-y: scroll;
height: 400px;
width: 400px
}
#space {
width: 200px;
height: 4000px;
}
.box {
scroll-snap-align: start;
background: #ccccff;
margin-bottom: 10px;
width: 300px;
height: 500px;
position: relative;
}
.header {
top: 0;
position: absolute;
}
.footer {
bottom: 0;
position: absolute;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="../support/common.js"></script>
<div id="scroller" tabindex="0">
<div id="target" class="box">
<div class="header">Header 1</div>
<div class="footer">Footer 1</div>
</div>
<div id="next" class="box">
<div class="header">Header 2</div>
<div class="footer">Footer 2</div>
</div>
<div id="space"></div>
</div>
<script>
// If all of the following conditions are met:
// 1. the snap area is larger than the snapport along the scroll axis, and
// 2. the distance between the previous and subsequent snap positions along
// the axis is greater then the snapport size.
//
// Then any scroll position in which the snap area covers the snapport is
// valid snap position. This rule facilitates scrolling around in oversized
// elements.
//
// These test covers edge cases with snap-areas that overflow the snapport.
// It should be possible to scroll to the end of an oversized snap-area.
const scroller = document.getElementById("scroller");
const target = document.getElementById("target");
const next = document.getElementById("next");
const scrollTop = () => {
return scroller.scrollTop;
};
const cleanup = () => {
target.style.height = '500px';
};
promise_test(async t => {
t.add_cleanup(cleanup);
scroller.scrollTo(0, 0);
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
// Ensure we can freely scroll in an oversized element.
const scrollPromise = waitForScrollEvent(scroller);
await keyPress(scroller, "ArrowDown");
await scrollPromise;
await waitForAnimationEnd(scrollTop);
assert_greater_than(scroller.scrollTop, 0,
'Arrowkey scroll moved scroll position');
assert_less_than_equal(scroller.scrollTop, target.clientHeight,
'Scroll within snap-area overflow');
// Resize the element so it is oversized by less than the line scroll amount.
// The next keyboard-triggered scroll should stop at the end of the snap-area.
// Otherwise it is not possible to scroll to the last line of the snap-area
// via keyboard.
const scrollAmount = scroller.scrollTop;
target.style.height = `${scroller.clientHeight + scrollAmount - 1}px`;
assert_equals(scroller.scrollTop, 0, "Verify snap on relayout");
await keyPress(scroller, "ArrowDown");
await waitForAnimationEnd(scrollTop);
assert_equals(scroller.scrollTop,
target.clientHeight - scroller.clientHeight,
'End boundary of snap-area is valid snap target');
// Must not get stuck at a snap position. Since already at the end of the
// snap area, we should advance to the next.
await keyPress(scroller, "ArrowDown");
await waitForAnimationEnd(scrollTop);
assert_equals(scroller.scrollTop,
next.offsetTop,
'Advance to next snap-area');
}, "Keyboard scrolling with vertical snap-area overflow");
promise_test(async t => {
scroller.scrollTo(0, 0);
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
// Ensure we can freely scroll in an oversized element.
const scrollPromise = waitForScrollEvent(scroller);
await new test_driver.Actions()
.scroll(50, 50, 0, 50, {origin: scroller})
.send();
await scrollPromise;
await waitForAnimationEnd(scrollTop);
assert_equals(scroller.scrollTop, 50,
'Wheel-scroll moved scroll position');
// Target position for wheel scroll overshoots the boundary of the snap-area.
// Ensure that we stop at the boundary.
let scrollAmount =
target.clientHeight - scroller.clientHeight - scroller.scrollTop + 1;
await new test_driver.Actions()
.scroll(50, 50, 0, scrollAmount, {origin: scroller})
.send();
await waitForAnimationEnd(scrollTop);
assert_equals(scroller.scrollTop, 100,
'End boundary of snap-area is valid snap target');
// Must not get stuck at a snap position. Since already at the end of the
// snap area, we should advance to the next. scrollAmount must be enough to
// advance to next snap position.
scrollAmount = next.clientHeight / 2 + 10 /* margin-bottom */;
await new test_driver.Actions()
.scroll(50, 50, 0, scrollAmount, {origin: scroller})
.send();
await waitForAnimationEnd(scrollTop);
assert_equals(scroller.scrollTop,
next.offsetTop,
'Advance to next snap-area');
}, "Mouse-wheel scrolling with vertical snap-area overflow");
</script>