-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathsnap-area-capturing-add-scroll-container.html
154 lines (132 loc) · 4.36 KB
/
snap-area-capturing-add-scroll-container.html
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<title>
Adding a scrollable element should make it start capturing snap points.
</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"/>
<meta name="viewport" content="user-scalable=no">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
position: absolute;
margin: 0px;
}
html {
scroll-snap-type: y mandatory;
}
body {
margin: 0px;
}
#middle-scroller {
top: 100px;
height: 500px;
width: 500px;
overflow: visible;
background-color: rgb(12, 61, 2);
scroll-snap-type: none;
}
#inner-scroller {
top: 200px;
height: 400px;
width: 400px;
overflow: visible;
background-color: rgb(65, 139, 50);
scroll-snap-type: y mandatory;
}
.space {
width: 2000px;
height: 2000px;
}
#inner-snap-area {
top: 300px;
width: 200px;
height: 200px;
background-color: blue;
scroll-snap-align: start;
}
#document-snap-area {
top: 500px;
width: 200px;
height: 200px;
background-color: lightblue;
scroll-snap-align: start;
}
#inserted-snap-container {
top: 400px;
height: 600px;
width: 400px;
overflow: scroll;
scroll-snap-type: y mandatory;
}
</style>
<div class="space"></div>
<div id="middle-scroller">
<div class="space"></div>
<div id="inner-scroller">
<div class="space"></div>
<div id="inner-snap-area"></div>
</div>
</div>
</div>
<div id="document-snap-area"></div>
<script>
const inner_scroller = document.getElementById("inner-scroller");
const middle_scroller = document.getElementById("middle-scroller");
const document_scroller = document.scrollingElement;
// This tests that making an element scrollable will reassign the correct snap
// areas to itself, per spec [1].
// [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions
test(() => {
// Confirm that the document-level scroller is the snap container for all of
// the snap areas.
document_scroller.scrollTo(0, 10);
assert_equals(document_scroller.scrollTop, 500);
// Snaps to the inner snap area.
document_scroller.scrollBy(0, 75);
assert_equals(document_scroller.scrollTop, 600);
// The middle scroller should now have the inner snap area assigned to it.
// Per spec, even if the snap-type is 'none', it should still capture snap
// points.
middle_scroller.style.setProperty("overflow", "scroll");
// The middle scroller has snap-type 'none' so it should not snap.
middle_scroller.scrollBy(0, 10);
assert_equals(middle_scroller.scrollTop, 10);
// The document scroller should only snap to the document-level snap area.
document_scroller.scrollTo(0, 600);
assert_equals(document_scroller.scrollTop, 500);
// The inner scroller should now have the innermost snap area assigned to it.
inner_scroller.style.setProperty("overflow", "scroll");
inner_scroller.scrollBy(0, 10);
assert_equals(inner_scroller.scrollTop, 300);
document_scroller.scrollTo(0, 600);
assert_equals(document_scroller.scrollTop, 500);
}, "Making an element scrollable should make it capture the correct descendant\
snap areas' snap points.");
// Test that attaching a new snap container also properly assigns snap areas.
test(() => {
// All containers should capture snap areas.
middle_scroller.style.setProperty("overflow", "scroll");
inner_scroller.style.setProperty("overflow", "scroll");
// Sanity check that the scrollers still snap to the snap areas.
document_scroller.scrollTo(0, 10);
inner_scroller.scrollTo(0,10);
assert_equals(inner_scroller.scrollTop, 300);
assert_equals(document_scroller.scrollTop, 500);
// Create new snap container and append thedocument-level snap area as its
// child.
const inserted_scroller = document.createElement("div");
inserted_scroller.id = "inserted-snap-container";
const space = document.createElement("div");
space.classList.add("space");
inserted_scroller.appendChild(space);
inserted_scroller.appendChild(document.getElementById("document-snap-area"));
document_scroller.appendChild(inserted_scroller);
// Document scroller no longer snaps.
document_scroller.scrollTo(0, 400);
assert_equals(document_scroller.scrollTop, 400);
// Inserted scroller snaps.
inserted_scroller.scrollTo(0, 10);
assert_equals(inserted_scroller.scrollTop, 500);
}, "Attaching a new element that is scrollable should assign the correct snap\
areas to it.");
</script>