blob: 4d16bd80a3a270a6b008df2c45640b7d31494987 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<script src="/css/css-scroll-snap-2/resources/common.js"></script>
<style>
#scroller {
overflow-y: scroll;
scroll-snap-type: y mandatory;
width: 500px;
height: 500px;
background-color: white;
position: relative;
}
.large_space {
position: absolute;
height: 100vh;
width: 100vw;
}
.space_filler {
display: inline-block;
width: 40%;
height: 30%;
background-color: green;
}
.snap_area {
scroll-snap-align: start;
background-color: yellow;
position: absolute;
width: 40%;
height: 30%;
top: 500px;
}
.left {
left: 1px;
}
.right {
left: 41%;
}
</style>
</head>
<body>
<div id="scroller">
<div class="large_space"></div>
<div class="space_filler"></div>
<div class="space_filler"></div>
<div class="space_filler"></div>
<div class="space_filler"></div>
<div class="space_filler"></div>
<div class="space_filler"></div>
<div class="space_filler"></div>
<div class="space_filler"></div>
<div id="left" class="snap_area left"><h1>1</h1></div>
<div id="right" class="snap_area right"><h1>2</h1></div>
</div>
<script>
let unreached_func = null;
promise_test(async (t) => {
checkSnapEventSupport("snapchanged");
await waitForCompositorCommit();
unreached_func = t.unreached_func("snapchanged shouldn't fire " +
"since the scroller is snapped to the same elements.");
scroller.addEventListener("snapchanged", unreached_func);
t.add_cleanup(() => {
scroller.removeEventListener("snapchanged", unreached_func);
});
assert_greater_than(right.offsetLeft, left.offsetLeft,
"boxes have switched positions.");
// Switch the boxes' horizontal positions.
right.style.left = "1px";
left.style.left = "41%";
await waitForCompositorCommit();
assert_less_than(right.offsetLeft, left.offsetLeft,
"boxes have switched positions.");
await waitForCompositorCommit();
}, "snapchanged doesn't fire after layout change if snapped to the same " +
"elements");
promise_test(async (t) => {
checkSnapEventSupport("snapchanged");
await waitForCompositorCommit();
unreached_func = t.unreached_func("snapchanged shouldn't fire " +
"since the scroller is snapped to the same elements.");
scroller.addEventListener("snapchanged", unreached_func);
t.add_cleanup(() => {
scroller.removeEventListener("snapchanged", unreached_func);
});
const scrollend_promise = waitForScrollendEventNoTimeout(scroller);
// Move the boxes to the same vertical level. Both boxes should still be
// considered snapped to so snapchanged should not be triggerred.
right.style.top = `0px`;
left.style.top = `0px`;
await scrollend_promise;
assert_equals(scroller.scrollTop, 0);
await waitForCompositorCommit();
}, "snapchanged doesn't fire after snap to the same targets after scroll. " +
"elements");
</script>
</body>
</html>
|
