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
|
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
<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>
<script src="support/common.js"></script>
</head>
<body>
<style>
.scroller {
border: solid 1px black;
overflow-y: scroll;
height: 200px;
width: 200px;
display: inline-block;
background-color: yellow;
position: relative;
}
.snapcontainer {
scroll-snap-type: y mandatory;
}
.snaparea {
scroll-snap-align: start;
margin-bottom: 120%;
height: 40px;
width: 50px;
background-color: green;
}
.space {
height: 500vh;
width: 500vw;
position: absolute;
}
</style>
<div>
<div id="plaincontainer" class="scroller">
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
</div>
<div id="snapcontainer1" class="scroller snapcontainer">
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
</div>
<div id="snapcontainer2" class="scroller snapcontainer">
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
<div class="snaparea"></div>
</div>
</div>
<script>
const plaincontainer = document.getElementById("plaincontainer");
const snapcontainer1 = document.getElementById("snapcontainer1");
const snapcontainer2 = document.getElementById("snapcontainer2");
async function test_unrelated_gesture_during_snap(t,
snapcontainer,
other_container,
inputs,
expectations) {
await waitForScrollReset(t, snapcontainer);
await waitForScrollReset(t, other_container);
await waitForCompositorCommit();
assert_equals(snapcontainer.scrollTop, 0, "snapcontainer is reset.");
assert_equals(other_container.scrollTop, 0, `${other_container.id} is ` +
`reset.`);
const scrollend_promises = [
waitForScrollendEventNoTimeout(snapcontainer),
waitForScrollendEventNoTimeout(other_container)
];
let last_scroll_top = snapcontainer.scrollTop;
async function scroll_listener() {
// If we are scrolling back to 0, we are snapping.
if (snapcontainer.scrollTop < last_scroll_top) {
snapcontainer.removeEventListener("scroll", scroll_listener);
await new test_driver.Actions().scroll(0, 0, 0, inputs.scroll_amt,
{ origin: other_container }).send();
}
last_scroll_top = snapcontainer.scrollTop;
}
snapcontainer.addEventListener("scroll", scroll_listener);
// The snap areas are separated by margin-bottom: 120%. Scrolling to
// almost halfway should snap back to 0.
const snap_scroll_amt = snapcontainer.clientHeight / 2;
await new test_driver.Actions().scroll(0, 0, 0, snap_scroll_amt,
{ origin: snapcontainer })
.send();
await Promise.all(scrollend_promises);
assert_equals(snapcontainer.scrollTop, 0,
"snapcontainer snaps back to 0");
assert_equals(other_container.scrollTop, expectations.expectedScrollTop,
`${other_container.id} is at expected scroll offset.`);
}
promise_test(async (t) => {
await test_unrelated_gesture_during_snap(t, snapcontainer1,
plaincontainer,
{ scroll_amt: 100 },
{ expectedScrollTop: 100 });
}, "gesture on separate scroll container works while another container "+
"snaps");
promise_test(async (t) => {
// scrolling the full clientHeight of snapcontainer2 should result in
// snapping to its second snap area.
const scroll_amt = snapcontainer2.clientHeight;
const expectedScrollTop = snapcontainer2.querySelectorAll(".snaparea")[1].offsetTop;
await test_unrelated_gesture_during_snap(t, snapcontainer1,
snapcontainer2,
{ scroll_amt: scroll_amt },
{ expectedScrollTop: expectedScrollTop});
}, "gesture on separate snap container works while another container "+
"snaps");
</script>
</body>
</html>
|
