-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathscroll-snap-nested-snap-area-layout-changed.tentative.html
105 lines (102 loc) · 4.1 KB
/
scroll-snap-nested-snap-area-layout-changed.tentative.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
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
</head>
<body>
<style>
#scroller {
overflow: scroll;
scroll-snap-type: y mandatory;
height: 200px;
width: 200px;
border: solid 1px;
position:absolute;
}
.snap_area {
position: absolute;
width: 100px;
left: calc(50% - 50px);
}
#outer_snap_area {
scroll-snap-align: start;
height: 1000px;
background-color: blue;
}
#inner_snap_area {
scroll-snap-align: start;
height: 100px;
top: 100px;
background-color: yellow;
}
</style>
<div id="scroller">
<div id="outer_snap_area" class="snap_area"></div>
<div id="inner_snap_area" class="snap_area"></div>
</div>
<script>
async function reset() {
inner_snap_area.style.height = "100px";
await waitForCompositorCommit();
}
let scroller = document.getElementById("scroller");
promise_test(async (t) => {
await reset();
await resetTargetScrollState(t, scroller);
assert_equals(scroller.scrollTop, 0, "test precondition: scroller is " +
"not scrolled");
let scrollend_promise = waitForScrollendEventNoTimeout(scroller);
let target_snap_position = inner_snap_area.offsetTop +
inner_snap_area.offsetHeight;
// Scroll to an offset close to the bottom of the inner snap area and
// expect to snap to an offset just below this snap area.
scroller.scrollTo(0, target_snap_position - 10);
await scrollend_promise;
assert_equals(scroller.scrollTop, target_snap_position,
"scroller snaps to just below the inner snap area.");
// We are just below the inner snap area. Increase its height so that it
// is larger than the snapport and straddled by the snapport. Verify
// that we snap to its bottom.
inner_snap_area.style.height =
`${scroller.clientHeight + inner_snap_area.clientHeight - 10}px`;
await waitForCompositorCommit();
target_snap_position = inner_snap_area.offsetTop +
inner_snap_area.offsetHeight - scroller.clientHeight;
assert_equals(scroller.scrollTop, target_snap_position,
"scroller snaps to the bottom of the smaller snap area (which is now " +
"covering).");
}, "newly larger-than-snapport area is snapped to when straddled close " +
"to bottom.");
promise_test(async (t) => {
await reset();
await resetTargetScrollState(t, scroller);
assert_equals(scroller.scrollTop, 0, "test precondition: scroller is " +
"not scrolled");
let scrollend_promise = waitForScrollendEventNoTimeout(scroller);
let target_snap_position = inner_snap_area.offsetTop +
inner_snap_area.offsetHeight;
// Scroll to an offset close to the bottom of the inner snap area and
// expect to snap to an offset just below this snap area.
scroller.scrollTo(0, target_snap_position - 10);
await scrollend_promise;
assert_equals(scroller.scrollTop, target_snap_position,
"scroller snaps to just below the inner snap area.");
// We are just below the inner snap area. Increase its height so that it
// is larger than the snapport and covers the snapport. Verify that we
// remain in the covering position.
inner_snap_area.style.height =
`${scroller.clientHeight + inner_snap_area.clientHeight + 10}px`;
await waitForCompositorCommit();
assert_equals(scroller.scrollTop, target_snap_position,
"scroller snaps to the bottom of the smaller snap area (which is now " +
"covering).");
}, "snapport remains within newly covering snap area when already in " +
"covering position.");
</script>
</body>