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
|
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#principal-flow" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<style>
body {
height: 8000px;
width: 3000px;
margin: 0px;
}
#target {
position: absolute;
background-color: blue;
top: 2000px;
left: 100px;
width: 100vw;
height: 100px;
}
</style>
<div id="target"></div>
<script>
const documentHeight = document.documentElement.clientHeight;
function cleanup() {
document.documentElement.style.scrollSnapType = "none";
target.style.scrollSnapAlign = "";
document.body.style.writingMode = "";
window.scrollTo(0, 0);
}
test(t => {
t.add_cleanup(cleanup);
document.documentElement.style.scrollSnapType = "y mandatory";
target.style.scrollSnapAlign = "end none";
window.scrollTo(0, 1800);
// `target y (2000px)` + `target height (100px)` - document height.
assert_equals(document.scrollingElement.scrollTop, 2100 - documentHeight);
assert_equals(document.scrollingElement.scrollLeft, 0, "x should not snap");
}, "The scroll-snap-type on the root element is applied");
test(t => {
t.add_cleanup(cleanup);
document.documentElement.style.scrollSnapType = "inline mandatory";
document.body.style.writingMode = "vertical-lr";
target.style.scrollSnapAlign = "none end";
window.scrollTo(200, 1800);
// Since inline axis is vertical, scrolling viewport vertically on block
// axis should snap.
assert_equals(document.scrollingElement.scrollTop, 2100 - documentHeight, "inline should snap");
// `target x (100px)`.
assert_equals(document.scrollingElement.scrollLeft, 200, "block should not snap");
}, "The writing-mode (vertical-lr) on the body is used");
test(t => {
t.add_cleanup(cleanup);
document.documentElement.style.scrollSnapType = "inline mandatory";
document.body.style.writingMode = "horizontal-tb"; // inline is horizontal
target.style.scrollSnapAlign = "none start";
window.scrollTo(200, 1800);
// Though the target's width is 100vw, there may be room to scroll the window
// within the target because of the scrollbar width and the browser may snap
// to the right edge (instead of the left edge of the target, since it is
// closer to the offset of 200 and still a valid snap point) within this room.
const scrollbar_width = window.innerWidth - document.documentElement.clientWidth;
assert_approx_equals(document.scrollingElement.scrollLeft, 100, scrollbar_width, "inline should snap");
assert_equals(document.scrollingElement.scrollTop, 1800, "block should not snap");
}, "The writing-mode (horizontal-tb) on the body is used ");
</script>
</body>
|
