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