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