8f568894f190c16801557ac26c6a00be043f6eab
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-initial.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             .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