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
|
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
<title>Arrow key scroll snapping</title>
<meta name="flags" content="should">
<meta name="assert"
content="Test passes if keyboard scrolling correctly snaps on a snap
container">
<link rel="stylesheet" href="../support/common.css">
<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">
<div id="space"></div>
<div class="snap left top" id="top-left"></div>
<div class="snap right top" id="top-right"></div>
<div class="snap left bottom" id="bottom-left"></div>
</div>
<script>
const scroller = document.getElementById("scroller");
const topLeft = document.getElementById("top-left");
const topRight = document.getElementById("top-right");
scrollLeft = () => scroller.scrollLeft;
scrollTop = () => scroller.scrollTop;
promise_test(async t => {
scroller.scrollTo(0, 0);
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
await keyPress(scroller, "ArrowDown");
await waitForAnimationEnd(scrollTop);
assert_equals(scroller.scrollTop, 400);
}, "Snaps to bottom-left after pressing ArrowDown");
promise_test(async t => {
scroller.scrollTo(0, 400);
assert_equals(scroller.scrollTop, 400, "verify test pre-condition");
await keyPress(scroller, "ArrowUp");
await waitForAnimationEnd(scrollTop);
assert_equals(scroller.scrollTop, 0);
}, "Snaps to top-left after pressing ArrowUp");
promise_test(async t => {
scroller.scrollTo(0, 0);
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
await keyPress(scroller, "ArrowRight");
await waitForAnimationEnd(scrollLeft);
assert_equals(scroller.scrollLeft, 400);
}, "Snaps to top-right after pressing ArrowRight");
promise_test(async t => {
scroller.scrollTo(400, 0);
assert_equals(scroller.scrollLeft, 400, "verify test pre-condition");
await keyPress(scroller, "ArrowLeft");
await waitForAnimationEnd(scrollLeft);
assert_equals(scroller.scrollLeft, 0);
}, "Snaps to top-left after pressing ArrowLeft");
promise_test(async t => {
t.add_cleanup(function() {
topLeft.style.width = "";
topRight.style.left = "400px";
});
// Make the snap area cover the snapport.
topLeft.style.width = "800px";
// Make the distance between the previous and the next snap position larger
// than snapport.
topRight.style.left = "500px";
scroller.scrollTo(0, 0);
assert_equals(scroller.scrollLeft, 0, "verify test pre-condition");
await keyPress(scroller, "ArrowRight");
await waitForAnimationEnd(scrollLeft);
assert_between_exclusive(scroller.scrollLeft, 0, 500);
}, "If the original intended offset is valid as making a snap area cover the"
+ "snapport, and there's no other snap offset in between, use the original"
+ "intended offset");
promise_test(async t => {
t.add_cleanup(function() {
topLeft.style.width = "";
topRight.style.left = "400px";
});
// Make the snap area cover the snapport.
topLeft.style.width = "800px";
// Make the next snap offset closer than the original intended offset.
topRight.style.left = "20px";
scroller.scrollTo(0, 0);
assert_equals(scroller.scrollLeft, 0, "verify test pre-condition");
await keyPress(scroller, "ArrowRight");
await waitForAnimationEnd(scrollLeft);
assert_equals(scroller.scrollLeft, 20);
}, "If the original intended offset is valid as making a snap area cover the "
+ "snapport, but there's a defined snap offset in between, use the defined snap"
+ " offset.");
promise_test(async t => {
scroller.scrollTo(400, 0);
await keyPress(scroller, "ArrowRight");
await waitForAnimationEnd(scrollLeft);
assert_equals(scroller.scrollLeft, 400);
}, "If there is no valid snap offset on the arrow key's direction other than "
+ "the current offset, and the scroll-snap-type is mandatory, stay at the "
+ "current offset.");
promise_test(async t => {
t.add_cleanup(function() {
scroller.style.scrollSnapType = "both mandatory";
});
scroller.style.scrollSnapType = "both proximity";
scroller.scrollTo(400, 0);
assert_equals(scroller.scrollLeft, 400, "verify test pre-condition");
await keyPress(scroller, "ArrowRight");
await waitForAnimationEnd(scrollLeft);
assert_greater_than(scroller.scrollLeft, 400);
}, "If there is no valid snap offset on the arrow key's direction other than "
+ "the current offset, and the scroll-snap-type is proximity, go to the "
+ "original intended offset");
</script>
|
