1<!DOCTYPE html>
2<html>
3 <head>
4 <style>
5 .horizontalGallery {
6 width: 400px;
7 height: 50px;
8 overflow-y: hidden;
9 overflow-x: auto;
10 }
11 .verticalGallery {
12 width: 400px;
13 height: 50px;
14 display: inline-block;
15 overflow-x: hidden;
16 overflow-y: auto;
17 }
18 .horizontalGalleryDrawer {
19 width: 3000px;
20 height: 50px;
21 }
22 .verticalGalleryDrawer {
23 width: 400px;
24 height: 300px;
25 }
26 .colorBox {
27 height: 50px;
28 width: 400px;
29 float: left;
30 }
31
32 .noInitial {
33 -webkit-scroll-snap-type: mandatory;
34 -webkit-scroll-snap-points-x: repeat(100%);
35 -webkit-scroll-snap-points-y: repeat(100%);
36 -webkit-scroll-snap-destination: 10% 11%;
37 -webkit-scroll-snap-coordinate: none;
38 }
39
40 .initialType {
41 -webkit-scroll-snap-type: initial;
42 -webkit-scroll-snap-points-x: repeat(100%);
43 -webkit-scroll-snap-points-y: repeat(100%);
44 -webkit-scroll-snap-destination: 0px 0px;
45 -webkit-scroll-snap-coordinate: 15px 122px;
46 }
47
48 .initialXPoints {
49 -webkit-scroll-snap-type: mandatory;
50 -webkit-scroll-snap-points-x: initial;
51 -webkit-scroll-snap-points-y: repeat(100%);
52 -webkit-scroll-snap-destination: 50% 70%;
53 -webkit-scroll-snap-coordinate: 100% 50%;
54 }
55
56 .initialYPoints {
57 -webkit-scroll-snap-type: mandatory;
58 -webkit-scroll-snap-points-x: repeat(100%);
59 -webkit-scroll-snap-points-y: initial;
60 -webkit-scroll-snap-destination: 10px 20px;
61 -webkit-scroll-snap-coordinate: 50% 100%;
62 }
63
64 .initialDestination {
65 -webkit-scroll-snap-type: proximity;
66 -webkit-scroll-snap-points-x: repeat(100%);
67 -webkit-scroll-snap-points-y: repeat(100%);
68 -webkit-scroll-snap-destination: initial;
69 -webkit-scroll-snap-coordinate: 10px 10px;
70 }
71
72 .initialSnapCoordinate {
73 -webkit-scroll-snap-type: mandatory;
74 -webkit-scroll-snap-points-x: repeat(100%);
75 -webkit-scroll-snap-points-y: repeat(100%);
76 -webkit-scroll-snap-destination: 10% 10%;
77 -webkit-scroll-snap-coordinate: initial;
78 }
79
80 .allInitial {
81 -webkit-scroll-snap-type: initial;
82 -webkit-scroll-snap-points-x: initial;
83 -webkit-scroll-snap-points-y: initial;
84 -webkit-scroll-snap-destination: initial;
85 -webkit-scroll-snap-coordinate: initial
86 }
87
88 #item0 { background-color: red; }
89 #item1 { background-color: green; }
90 #item2 { background-color: blue; }
91 #item3 { background-color: aqua; }
92 #item4 { background-color: yellow; }
93 #item5 { background-color: fuchsia; }
94 </style>
95 <script src="../../resources/js-test-pre.js"></script>
96 </head>
97 <body>
98 <div style="width: 400px">
99 <div id="noInitial" class="horizontalGallery noInitial">
100 <div class="horizontalGalleryDrawer">
101 <div id="item0" class="colorBox"></div>
102 <div id="item1" class="colorBox"></div>
103 <div id="item2" class="colorBox"></div>
104 <div id="item3" class="colorBox"></div>
105 <div id="item4" class="colorBox"></div>
106 <div id="item5" class="colorBox"></div>
107 </div>
108 </div>
109 <div id="initialType" class="horizontalGallery initialType" style="-webkit-scroll-snap-type: initial">
110 <div class="horizontalGalleryDrawer">
111 <div id="item0" class="colorBox"></div>
112 <div id="item1" class="colorBox"></div>
113 <div id="item2" class="colorBox"></div>
114 <div id="item3" class="colorBox"></div>
115 <div id="item4" class="colorBox"></div>
116 <div id="item5" class="colorBox"></div>
117 </div>
118 </div>
119 <div id="initialXPoints" class="horizontalGallery initialXPoints" style="-webkit-scroll-snap-points-x: initial">
120 <div class="horizontalGalleryDrawer">
121 <div id="item0" class="colorBox"></div>
122 <div id="item1" class="colorBox"></div>
123 <div id="item2" class="colorBox"></div>
124 <div id="item3" class="colorBox"></div>
125 <div id="item4" class="colorBox"></div>
126 <div id="item5" class="colorBox"></div>
127 </div>
128 </div>
129 <div id="initialYPoints" class="horizontalGallery initialYPoints" style="-webkit-scroll-snap-points-y: initial">
130 <div class="horizontalGalleryDrawer">
131 <div id="item0" class="colorBox"></div>
132 <div id="item1" class="colorBox"></div>
133 <div id="item2" class="colorBox"></div>
134 <div id="item3" class="colorBox"></div>
135 <div id="item4" class="colorBox"></div>
136 <div id="item5" class="colorBox"></div>
137 </div>
138 </div>
139 <div id="initialDestination" class="horizontalGallery initialDestination" style="-webkit-scroll-snap-destination: initial">
140 <div class="horizontalGalleryDrawer">
141 <div id="item0" class="colorBox"></div>
142 <div id="item1" class="colorBox"></div>
143 <div id="item2" class="colorBox"></div>
144 <div id="item3" class="colorBox"></div>
145 <div id="item4" class="colorBox"></div>
146 <div id="item5" class="colorBox"></div>
147 </div>
148 </div>
149 <div id="initialSnapCoordinate" class="horizontalGallery initialSnapCoordinate" style="-webkit-scroll-snap-coordinate: initial">
150 <div class="horizontalGalleryDrawer">
151 <div id="item0" class="colorBox"></div>
152 <div id="item1" class="colorBox"></div>
153 <div id="item2" class="colorBox"></div>
154 <div id="item3" class="colorBox"></div>
155 <div id="item4" class="colorBox"></div>
156 <div id="item5" class="colorBox"></div>
157 </div>
158 </div>
159 <div id="allInitial" class="horizontalGallery allInitial" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: initial">
160 <div class="horizontalGalleryDrawer">
161 <div id="item0" class="colorBox"></div>
162 <div id="item1" class="colorBox"></div>
163 <div id="item2" class="colorBox"></div>
164 <div id="item3" class="colorBox"></div>
165 <div id="item4" class="colorBox"></div>
166 <div id="item5" class="colorBox"></div>
167 </div>
168 </div>
169 <div id="allInitialY" class="verticalGallery noInitial" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: initial">
170 <div class="verticalGalleryDrawer">
171 <div id="item0" class="colorBox"></div>
172 <div id="item1" class="colorBox"></div>
173 <div id="item2" class="colorBox"></div>
174 <div id="item3" class="colorBox"></div>
175 <div id="item4" class="colorBox"></div>
176 <div id="item5" class="colorBox"></div>
177 </div>
178 </div>
179 </div>
180 <div id="console"></div>
181 <script>
182 description("Tests 'initial' on scroll snap properties.");
183
184 var noInitial = document.getElementById('noInitial');
185 shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-type']");
186 shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
187 shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-x']");
188 shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
189 shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-y']");
190 shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
191 shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-destination']");
192 shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-destination')", "10% 11%");
193 shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-coordinate']");
194 shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
195
196 var initialType = document.getElementById('initialType');
197 shouldBeEqualToString("initialType.style['-webkit-scroll-snap-type']", "initial");
198 shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-type')", "none");
199 shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-x']");
200 shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
201 shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-y']");
202 shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
203 shouldBeEmptyString("initialType.style['-webkit-scroll-snap-destination']");
204 shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
205 shouldBeEmptyString("initialType.style['-webkit-scroll-snap-coordinate']");
206 shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-coordinate')", "15px 122px");
207
208 var initialXPoints = document.getElementById('initialXPoints');
209 shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-type']");
210 shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
211 shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-points-x']", "initial");
212 shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
213 shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-points-y']");
214 shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
215 shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-destination']");
216 shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 70%");
217 shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-coordinate']");
218 shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "100% 50%");
219
220 var initialYPoints = document.getElementById('initialYPoints');
221 shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-type']");
222 shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
223 shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-points-x']");
224 shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
225 shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-points-y']", "initial");
226 shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
227 shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-destination']");
228 shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-destination')", "10px 20px");
229 shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-coordinate']");
230 shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 100%");
231
232 var initialDestination = document.getElementById('initialDestination');
233 shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-type']");
234 shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
235 shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-x']");
236 shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
237 shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-y']");
238 shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
239 shouldBeEqualToString("initialDestination.style['-webkit-scroll-snap-destination']", "initial");
240 shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
241 shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-coordinate']");
242 shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "10px 10px");
243
244 var initialSnapCoordinate = document.getElementById('initialSnapCoordinate');
245 shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-type']");
246 shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
247 shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-x']");
248 shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
249 shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-y']");
250 shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
251 shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-destination']");
252 shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "10% 10%");
253 shouldBeEqualToString("initialSnapCoordinate.style['-webkit-scroll-snap-coordinate']", "initial");
254 shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
255
256 var allInitial = document.getElementById('allInitial');
257 shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-type']", "initial");
258 shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-type')", "none");
259 shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-x']", "initial");
260 shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
261 shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-y']", "initial");
262 shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
263 shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-destination']", "initial");
264 shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
265 shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-coordinate']", "initial");
266 shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
267
268 var allInitialY = document.getElementById('allInitialY');
269 shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-type']", "initial");
270 shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-type')", "none");
271 shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-points-x']", "initial");
272 shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
273 shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-points-y']", "initial");
274 shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
275 shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-destination']", "initial");
276 shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
277 shouldBeEqualToString("allInitialY.style['-webkit-scroll-snap-coordinate']", "initial");
278 shouldBeEqualToString("window.getComputedStyle(allInitialY).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
279 </script>
280 <script src="../../resources/js-test-post.js"></script>
281 </body>
282</html>
283