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
134
|
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/common.js" ></script>
</head>
<body>
<style>
.scroller {
overflow: scroll;
position: relative;
height: 400px;
width: 400px;
border:solid 1px black;
scroll-snap-type: y mandatory;
}
.no-snap { scroll-snap-align: none }
.scroller div:focus {
border: solid 1px red;
}
.large-space {
height: 300vh;
width: 300vw;
}
.target {
scroll-snap-align: start;
position: absolute;
width: 100px;
height: 100px;
border: solid 1px black;
}
.top {
top: 0px;
}
.left {
left: 0px;
}
.right {
left: 200px;
}
.bottom {
top: 200px;
}
</style>
<div id="scroller" class="scroller">
<div class="large-space no-snap" tabindex="1" id="space"></div>
<div id="topleft" tabindex="1" class="top left target">top left</div>
<div id="topright" tabindex="1" class="top right target">top right</div>
<div id="bottomleft" tabindex="1" class="bottom left target">bottom left</div>
<div id="bottomright" tabindex="1" class="bottom right target">bottom right</div>
</div>
<script>
window.onload = () => {
const bottomright = document.getElementById("bottomright");
const bottomleft = document.getElementById("bottomleft");
const scroller = document.getElementById("scroller");
async function commonInitialization() {
await waitForCompositorCommit();
assert_equals(scroller.scrollTop, 0, "snapped to top row");
}
promise_test(async (t) => {
await commonInitialization();
focusAndAssert(bottomright);
await runScrollSnapSelectionVerificationTest(t, scroller,
/*aligned_elements_x=*/[],
/*aligned_elements_y=*/[bottomright, bottomleft],
/*axis=*/"y",
/*expected_target_x=*/null,
/*expected_target_y=*/bottomright);
focusAndAssert(bottomleft);
await runScrollSnapSelectionVerificationTest(t, scroller,
/*aligned_elements_x=*/[],
/*aligned_elements_y=*/[bottomright, bottomleft],
/*axis=*/"y",
/*expected_target_x=*/null,
/*expected_target_y=*/bottomleft);
}, "scroller selects focused target from aligned choices on snap");
promise_test(async (t) => {
t.add_cleanup(() => {
bottomright.style.left = "200px";
})
await commonInitialization();
// Move bottomright out of the snapport.
bottomright.style.left = "500px";
// Set focus on bottomright without scrolling to it.
focusAndAssert(bottomright, true);
await runScrollSnapSelectionVerificationTest(t, scroller,
/*aligned_elements_x=*/[],
/*aligned_elements_y=*/[bottomright, bottomleft],
/*axis=*/"y",
/*expected_target_x=*/null,
/*expected_target_y=*/bottomleft);
}, "out-of-viewport focused element is not the selected snap target.");
promise_test(async(t) => {
t.add_cleanup(() => {
bottomleft.style.top = "200px";
});
await commonInitialization();
// Set focus on bottomright without scrolling to it.
focusAndAssert(bottomright, true);
// Move bottomleft below bottomright.
bottomleft.style.top = "400px";
// Snap to bottomleft.
scroller.scrollTop = bottomleft.offsetTop;
// Test that if bottomright is also shifted so that it is aligned with
// bottomleft, bottomleft remains the selected snap target, despite
// bottomright's having focus.
await runLayoutSnapSeletionVerificationTest(t, scroller, [bottomright],
bottomleft, "y");
}, "scroller follows selected snap target through layout shift," +
"regardless of focus");
}
</script>
</body>
</html>
|
