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>
<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="/css/css-scroll-snap-2/resources/common.js"></script>
<script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script>
<script src="/web-animations/testcommon.js"></script>
</head>
<body>
<style>
#scroller {
height: 400px;
width: 400px;
position: relative;
overflow: scroll;
scroll-snap-type: y mandatory;
border: solid 1px black;
}
.box {
position: absolute;
left: 150px;
height: 350px;
width: 100px;
border: solid 1px white;
}
.snap {
scroll-snap-align: start;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
#snap_area_1 {
top: 0px;
}
#snap_area_2 {
top: 352px;
}
#snap_area_3 {
top: 704px;
}
.large_space {
height: 400vh;
width: 400vw;
position: absolute;
}
</style>
<div id="scroller">
<div class="large_space"></div>
<div id="snap_area_1" class="blue snap box"></div>
<div id="snap_area_2" class="green snap box"></div>
<div id="snap_area_3" class="yellow snap box"></div>
</div>
<script>
const scroller = document.getElementById("scroller");
const snap_area_2 = document.getElementById("snap_area_2");
promise_test(async (t) => {
await waitForCompositorCommit();
const test_data = {
scroller: scroller,
scrolling_function: async () => {
scroller.scrollTo(0, snap_area_2.offsetTop);
},
expected_snap_targets: { block: snap_area_2, inline: null },
expected_scroll_offsets: {
x: 0,
y: snap_area_2.offsetTop
}
};
await test_snap_event(t, test_data, "snapchanging");
}, "snapchanging fires on programmatic scrolls that changes a scroller's" +
" snap targets.");
promise_test(async (t) => {
await waitForCompositorCommit();
const test_data = {
scroller: scroller,
scrolling_function: async () => {
scroller.scrollTo(0, snap_area_2.offsetTop);
},
expected_snap_targets: { block: snap_area_2, inline: null },
expected_scroll_offsets: {
x: 0,
y: snap_area_2.offsetTop
}
};
await test_snap_event(t, test_data, "snapchanging",
/*use_onsnap_member*/true);
}, "Element.onsnapchanging fires on programmatic scrolls that changes a " +
"scroller's snap targets.");
promise_test(async (t) => {
checkSnapEventSupport("snapchanging");
await waitForScrollReset(t, scroller);
await waitForCompositorCommit();
let snap_event_promise = waitForSnapEvent(scroller, "snapchanging", false);
// The snap areas are far apart enough that 10px is not enough to trigger
// a change in snap targets.
const small_scroll_offset = 10;
// Set the scroll destination to just a little off (0, 0) top so we snap
// back to the top box.
scroller.scrollTo(0, small_scroll_offset);
let evt = await snap_event_promise;
assert_equals(evt, null, "no snap event since scroller is back to top");
assert_equals(scroller.scrollTop, 0, "scroller snaps back to the top");
assert_equals(scroller.scrollLeft, 0, "scroller snaps back to the left");
}, "snapchanging should not fire since the snap target doesn't change.");
</script>
</body>
</html>
|
