9b07e1fc04c54d338fc22fe1464f30fc0b76fd61
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-inherit.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             .topLevel {
6                 width: 400px;
7                 -webkit-scroll-snap-type: proximity;
8                 -webkit-scroll-snap-points-x: repeat(200%);
9                 -webkit-scroll-snap-points-y: repeat(200%);
10                 -webkit-scroll-snap-destination: 25% 25%;
11                 -webkit-scroll-snap-coordinate: 20px 20px;
12             }
13             .horizontalGallery {
14                 width: 400px;
15                 height: 50px;
16                 overflow-y: hidden;
17                 overflow-x: auto;
18             }
19             .horizontalGalleryDrawer {
20                 width: 3000px;
21                 height: 50px;
22             }
23             .colorBox {
24                 height: 50px;
25                 width: 400px;
26                 float: left;
27             }
28
29             .noInherit {
30                 -webkit-scroll-snap-type: mandatory;
31                 -webkit-scroll-snap-points-x: repeat(100%);
32                 -webkit-scroll-snap-points-y: repeat(100%);
33                 -webkit-scroll-snap-destination: 10% 11%;
34                 -webkit-scroll-snap-coordinate: none;
35             }
36
37             .inheritType {
38                 -webkit-scroll-snap-type: inherit;
39                 -webkit-scroll-snap-points-x: repeat(100%);
40                 -webkit-scroll-snap-points-y: repeat(100%);
41                 -webkit-scroll-snap-destination: 0px 0px;
42                 -webkit-scroll-snap-coordinate: 15px 122px;
43             }
44
45             .inheritXPoints {
46                 -webkit-scroll-snap-type: mandatory;
47                 -webkit-scroll-snap-points-x: inherit;
48                 -webkit-scroll-snap-points-y: repeat(100%);
49                 -webkit-scroll-snap-destination: 50% 70%;
50                 -webkit-scroll-snap-coordinate: 100% 50%;
51             }
52
53             .inheritYPoints {
54                 -webkit-scroll-snap-type: mandatory;
55                 -webkit-scroll-snap-points-x: repeat(100%);
56                 -webkit-scroll-snap-points-y: inherit;
57                 -webkit-scroll-snap-destination: 10px 20px;
58                 -webkit-scroll-snap-coordinate: 50% 100%;
59             }
60
61             .inheritDestination {
62                 -webkit-scroll-snap-type: proximity;
63                 -webkit-scroll-snap-points-x: repeat(100%);
64                 -webkit-scroll-snap-points-y: repeat(100%);
65                 -webkit-scroll-snap-destination: inherit;
66                 -webkit-scroll-snap-coordinate: 10px 10px;
67             }
68
69             .inheritSnapCoordinate {
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: 10% 10%;
74                 -webkit-scroll-snap-coordinate: inherit;
75             }
76
77             .inheritAll {
78                 -webkit-scroll-snap-type: inherit;
79                 -webkit-scroll-snap-points-x: inherit;
80                 -webkit-scroll-snap-points-y: inherit;
81                 -webkit-scroll-snap-destination: inherit;
82                 -webkit-scroll-snap-coordinate: inherit
83             }
84
85             .inheritNone {
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 class="topLevel">
99             <div id="noInherit" class="horizontalGallery noInherit">
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="inheritType" class="horizontalGallery inheritType" style="-webkit-scroll-snap-type: inherit;">
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="inheritXPoints" class="horizontalGallery inheritXPoints" style="-webkit-scroll-snap-points-x: inherit;">
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="inheritYPoints" class="horizontalGallery inheritYPoints" style="-webkit-scroll-snap-points-y: inherit;">
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="inheritDestination" class="horizontalGallery inheritDestination" style="-webkit-scroll-snap-destination: inherit;">
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="inheritSnapCoordinate" class="horizontalGallery inheritSnapCoordinate" style="-webkit-scroll-snap-coordinate: inherit;">
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="inheritAll" class="horizontalGallery inheritAll" style="-webkit-scroll-snap-type: inherit; -webkit-scroll-snap-points-x: inherit; -webkit-scroll-snap-points-y: inherit; -webkit-scroll-snap-destination: inherit; -webkit-scroll-snap-coordinate: inherit;">
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="inheritNone" class="horizontalGallery inheritNone">
170                 <div class="horizontalGalleryDrawer">
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 'inherit' on scroll snap properties.");
183
184         var noInherit = document.getElementById('noInherit');
185         shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-type']");
186         shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
187         shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-points-x']");
188         shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
189         shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-points-y']");
190         shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
191         shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-destination']");
192         shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-destination')", "10% 11%");
193         shouldBeEmptyString("noInherit.style['-webkit-scroll-snap-coordinate']");
194         shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
195
196         var inheritType = document.getElementById('inheritType');
197         shouldBeEqualToString("inheritType.style['-webkit-scroll-snap-type']", "inherit");
198         shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
199         shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-points-x']");
200         shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
201         shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-points-y']");
202         shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
203         shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-destination']");
204         shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
205         shouldBeEmptyString("inheritType.style['-webkit-scroll-snap-coordinate']");
206         shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('-webkit-scroll-snap-coordinate')", "15px 122px");
207
208         var inheritXPoints = document.getElementById('inheritXPoints');
209         shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-type']");
210         shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
211         shouldBeEqualToString("inheritXPoints.style['-webkit-scroll-snap-points-x']", "inherit");
212         shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(200%)");
213         shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-points-y']");
214         shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
215         shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-destination']");
216         shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 70%");
217         shouldBeEmptyString("inheritXPoints.style['-webkit-scroll-snap-coordinate']");
218         shouldBeEqualToString("window.getComputedStyle(inheritXPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "100% 50%");
219
220         var inheritYPoints = document.getElementById('inheritYPoints');
221         shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-type']");
222         shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
223         shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-points-x']");
224         shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
225         shouldBeEqualToString("inheritYPoints.style['-webkit-scroll-snap-points-y']", "inherit");
226         shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(200%)");
227         shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-destination']");
228         shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-destination')", "10px 20px");
229         shouldBeEmptyString("inheritYPoints.style['-webkit-scroll-snap-coordinate']");
230         shouldBeEqualToString("window.getComputedStyle(inheritYPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 100%");
231
232         var inheritDestination = document.getElementById('inheritDestination');
233         shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-type']");
234         shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
235         shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-points-x']");
236         shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
237         shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-points-y']");
238         shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
239         shouldBeEqualToString("inheritDestination.style['-webkit-scroll-snap-destination']", "inherit");
240         shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-destination')", "25% 25%");
241         shouldBeEmptyString("inheritDestination.style['-webkit-scroll-snap-coordinate']");
242         shouldBeEqualToString("window.getComputedStyle(inheritDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "10px 10px");
243
244         var inheritSnapCoordinate = document.getElementById('inheritSnapCoordinate');
245         shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-type']");
246         shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
247         shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-points-x']");
248         shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
249         shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-points-y']");
250         shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
251         shouldBeEmptyString("inheritSnapCoordinate.style['-webkit-scroll-snap-destination']");
252         shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "10% 10%");
253         shouldBeEqualToString("inheritSnapCoordinate.style['-webkit-scroll-snap-coordinate']", "inherit");
254         shouldBeEqualToString("window.getComputedStyle(inheritSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "20px 20px");
255
256         var inheritAll = document.getElementById('inheritAll');
257         shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-type']", "inherit");
258         shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-type')", "proximity");
259         shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-points-x']", "inherit");
260         shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(200%)");
261         shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-points-y']", "inherit");
262         shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(200%)");
263         shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-destination']", "inherit");
264         shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-destination')", "25% 25%");
265         shouldBeEqualToString("inheritAll.style['-webkit-scroll-snap-coordinate']", "inherit");
266         shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('-webkit-scroll-snap-coordinate')", "20px 20px");
267
268         var inheritNone = document.getElementById('inheritNone');
269         shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-type']");
270         shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-type')", "none");
271         shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-points-x']");
272         shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-points-x')", "none");
273         shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-points-y']");
274         shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-points-y')", "none");
275         shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-destination']");
276         shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px");
277         shouldBeEmptyString("inheritNone.style['-webkit-scroll-snap-coordinate']");
278         shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('-webkit-scroll-snap-coordinate')", "none");
279         </script>
280         <script src="../../resources/js-test-post.js"></script>
281     </body>
282 </html>
283