Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[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                 scroll-snap-type: both;
34                 scroll-snap-align: center;
35                 scroll-padding: 20px;
36                 scroll-snap-margin: 1px;
37             }
38
39             .initialType {
40                 scroll-snap-type: initial;
41                 scroll-snap-align: center;
42                 scroll-padding: 20px;
43                 scroll-snap-margin: 1px;
44             }
45
46             .initialPadding {
47                 scroll-snap-type: both;
48                 scroll-snap-align: center;
49                 scroll-padding: initial;
50                 scroll-snap-margin: 1px;
51             }
52
53             .initialMargin {
54                 scroll-snap-type: both;
55                 scroll-snap-align: center;
56                 scroll-padding: 20px;
57                 scroll-snap-margin: initial;
58             }
59
60             .initialAlign {
61                 scroll-snap-type: both;
62                 scroll-snap-align: initial;
63                 scroll-padding: 20px;
64                 scroll-snap-margin: 1px;
65             }
66
67             .allInitial {
68                 scroll-snap-type: initial;
69                 scroll-snap-align: initial;
70                 scroll-padding: initial;
71                 scroll-snap-margin: initial;
72             }
73
74             #item0 { background-color: red; }
75             #item1 { background-color: green; }
76             #item2 { background-color: blue; }
77             #item3 { background-color: aqua; }
78             #item4 { background-color: yellow; }
79             #item5 { background-color: fuchsia; }
80         </style>
81         <script src="../../resources/js-test-pre.js"></script>
82     </head>
83     <body>
84         <div style="width: 400px">
85             <div id="noInitial" class="horizontalGallery noInitial">
86                 <div class="horizontalGalleryDrawer">
87                     <div id="item0" class="colorBox"></div>
88                     <div id="item1" class="colorBox"></div>
89                     <div id="item2" class="colorBox"></div>
90                     <div id="item3" class="colorBox"></div>
91                     <div id="item4" class="colorBox"></div>
92                     <div id="item5" class="colorBox"></div>
93                 </div>
94             </div>
95             <div id="initialType" class="horizontalGallery initialType" style="scroll-snap-type: initial">
96                 <div class="horizontalGalleryDrawer">
97                     <div id="item0" class="colorBox"></div>
98                     <div id="item1" class="colorBox"></div>
99                     <div id="item2" class="colorBox"></div>
100                     <div id="item3" class="colorBox"></div>
101                     <div id="item4" class="colorBox"></div>
102                     <div id="item5" class="colorBox"></div>
103                 </div>
104             </div>
105             <div id="initialPadding" class="horizontalGallery initialPadding" style="scroll-padding: initial">
106                 <div class="horizontalGalleryDrawer">
107                     <div id="item0" class="colorBox"></div>
108                     <div id="item1" class="colorBox"></div>
109                     <div id="item2" class="colorBox"></div>
110                     <div id="item3" class="colorBox"></div>
111                     <div id="item4" class="colorBox"></div>
112                     <div id="item5" class="colorBox"></div>
113                 </div>
114             </div>
115             <div id="initialMargin" class="horizontalGallery initialMargin" style="scroll-snap-margin: initial">
116                 <div class="horizontalGalleryDrawer">
117                     <div id="item0" class="colorBox"></div>
118                     <div id="item1" class="colorBox"></div>
119                     <div id="item2" class="colorBox"></div>
120                     <div id="item3" class="colorBox"></div>
121                     <div id="item4" class="colorBox"></div>
122                     <div id="item5" class="colorBox"></div>
123                 </div>
124             </div>
125             <div id="initialAlign" class="horizontalGallery initialAlign" style="scroll-snap-align: initial">
126                 <div class="horizontalGalleryDrawer">
127                     <div id="item0" class="colorBox"></div>
128                     <div id="item1" class="colorBox"></div>
129                     <div id="item2" class="colorBox"></div>
130                     <div id="item3" class="colorBox"></div>
131                     <div id="item4" class="colorBox"></div>
132                     <div id="item5" class="colorBox"></div>
133                 </div>
134             </div>
135             <div id="allInitial" class="horizontalGallery allInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
136                 <div class="horizontalGalleryDrawer">
137                     <div id="item0" class="colorBox"></div>
138                     <div id="item1" class="colorBox"></div>
139                     <div id="item2" class="colorBox"></div>
140                     <div id="item3" class="colorBox"></div>
141                     <div id="item4" class="colorBox"></div>
142                     <div id="item5" class="colorBox"></div>
143                 </div>
144             </div>
145             <div id="allInitialY" class="verticalGallery noInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
146                 <div class="verticalGalleryDrawer">
147                     <div id="item0" class="colorBox"></div>
148                     <div id="item1" class="colorBox"></div>
149                     <div id="item2" class="colorBox"></div>
150                     <div id="item3" class="colorBox"></div>
151                     <div id="item4" class="colorBox"></div>
152                     <div id="item5" class="colorBox"></div>
153                 </div>
154             </div>
155         </div>
156         <div id="console"></div>
157         <script>
158         description("Tests 'initial' on scroll snap properties.");
159
160         var noInitial = document.getElementById('noInitial');
161         shouldBeEmptyString("noInitial.style['scroll-snap-type']");
162         shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-type')", "both proximity");
163         shouldBeEmptyString("noInitial.style['scroll-padding']");
164         shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-padding')", "20px");
165         shouldBeEmptyString("noInitial.style['scroll-snap-margin']");
166         shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-margin')", "1px");
167         shouldBeEmptyString("noInitial.style['scroll-snap-align']");
168         shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-align')", "center center");
169
170         var initialType = document.getElementById('initialType');
171         shouldBeEqualToString("initialType.style['scroll-snap-type']", "initial");
172         shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-type')", "none");
173         shouldBeEmptyString("initialType.style['scroll-padding']");
174         shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-padding')", "20px");
175         shouldBeEmptyString("initialType.style['scroll-snap-margin']");
176         shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-margin')", "1px");
177         shouldBeEmptyString("initialType.style['scroll-snap-align']");
178         shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-align')", "center center");
179
180         var initialPadding = document.getElementById('initialPadding');
181         shouldBeEmptyString("initialPadding.style['scroll-snap-type']");
182         shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-type')", "both proximity");
183         shouldBeEqualToString("initialPadding.style['scroll-padding']", "initial");
184         shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-padding')", "0px");
185         shouldBeEmptyString("initialPadding.style['scroll-snap-margin']");
186         shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-margin')", "1px");
187         shouldBeEmptyString("initialPadding.style['scroll-snap-align']");
188         shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-align')", "center center");
189
190         var initialMargin = document.getElementById('initialMargin');
191         shouldBeEmptyString("initialMargin.style['scroll-snap-type']");
192         shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-type')", "both proximity");
193         shouldBeEmptyString("initialMargin.style['scroll-padding']");
194         shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-padding')", "20px");
195         shouldBeEqualToString("initialMargin.style['scroll-snap-margin']", "initial");
196         shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-margin')", "0px");
197         shouldBeEmptyString("initialMargin.style['scroll-snap-align']");
198         shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-align')", "center center");
199
200         var initialAlign = document.getElementById('initialAlign');
201         shouldBeEmptyString("initialAlign.style['scroll-snap-type']");
202         shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-type')", "both proximity");
203         shouldBeEmptyString("initialAlign.style['scroll-padding']");
204         shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-padding')", "20px");
205         shouldBeEmptyString("initialAlign.style['scroll-snap-margin']");
206         shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-margin')", "1px");
207         shouldBeEqualToString("initialAlign.style['scroll-snap-align']", "initial");
208         shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-align')", "none none");
209
210         var allInitial = document.getElementById('allInitial');
211         shouldBeEqualToString("allInitial.style['scroll-snap-type']", "initial");
212         shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-type')", "none");
213         shouldBeEqualToString("allInitial.style['scroll-padding']", "initial");
214         shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-padding')", "0px");
215         shouldBeEqualToString("allInitial.style['scroll-snap-margin']", "initial");
216         shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-margin')", "0px");
217         shouldBeEqualToString("allInitial.style['scroll-snap-align']", "initial");
218         shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-align')", "none none");
219         </script>
220         <script src="../../resources/js-test-post.js"></script>
221     </body>
222 </html>
223