Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-property-computed-style-expected.txt
1 Test the computed style of the scroll-snap-* properties.
2
3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
4
5
6
7 invalid snap type: `potato`
8 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
9
10 empty string for snap type: ``
11 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
12
13 too many values: `block mandatory proximity`
14 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
15
16 none following axis: `both none`
17 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
18
19 two axis values: `block inline`
20 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
21
22 two strictness values: `proximity mandatory`
23 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
24
25 axis following strictness: `mandatory inline`
26 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
27
28 initial value: `initial`
29 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
30
31 only strictness: `mandatory`
32 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'both mandatory'
33
34 only axis: `both`
35 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'both proximity'
36
37 none: `none`
38 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'
39
40 strictness following axis: `inline mandatory`
41 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'inline mandatory'
42
43 invalid snap align: `potato`
44 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
45
46 empty string: ``
47 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
48
49 too many values: `start center end`
50 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
51
52 invalid second value: `start wut`
53 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
54
55 invalid first value: `wat center`
56 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
57
58 one length: `10px`
59 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
60
61 two lengths: `10px 50px`
62 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
63
64 initial value: `initial`
65 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none none'
66
67 single value: `start`
68 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start start'
69
70 two values: `start end`
71 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start end'
72
73 invalid scroll padding: `potato`
74 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
75 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
76 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
77 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
78 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
79
80 empty string: ``
81 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
82 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
83 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
84 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
85 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
86
87 too many values: `1px 2px 3px 4px 5px`
88 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
89 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
90 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
91 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
92 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
93
94 attempt to use auto: `auto auto`
95 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '0px'
96 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '0px'
97 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '0px'
98 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '0px'
99 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '0px'
100
101 single length: `10px`
102 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10px'
103 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10px'
104 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '10px'
105 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '10px'
106 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10px'
107
108 two percentages: `10% 20%`
109 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10% 20%'
110 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10%'
111 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '20%'
112 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '20%'
113 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10%'
114
115 three lengths: `1px 2px 3px`
116 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '1px 2px 3px'
117 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '1px'
118 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '2px'
119 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '2px'
120 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '3px'
121
122 four values: `50px 10% 20% 50px`
123 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '50px 10% 20% 50px'
124 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '50px'
125 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '50px'
126 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '10%'
127 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '20%'
128
129 calc expression: `calc(50px + 10%) 20px`
130 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is 'calc(50px + 10%) 20px'
131 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is 'calc(50px + 10%)'
132 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '20px'
133 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '20px'
134 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is 'calc(50px + 10%)'
135
136 various units: `1em 5mm 2in 4cm`
137 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '16px 18.89763832092285px 192px 151.1811065673828px'
138 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '16px'
139 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '151.1811065673828px'
140 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '18.89763832092285px'
141 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '192px'
142
143 subpixel values: `10.4375px 6.5px`
144 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10.4375px 6.5px'
145 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10.4375px'
146 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '6.5px'
147 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '6.5px'
148 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10.4375px'
149
150 invalid scroll padding: `potato`
151 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
152 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
153 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
154 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
155 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
156
157 empty string: ``
158 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
159 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
160 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
161 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
162 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
163
164 too many values: `1px 2px 3px 4px 5px`
165 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
166 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
167 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
168 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
169 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
170
171 attempt to use auto: `auto auto`
172 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
173 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
174 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
175 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
176 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
177
178 attempt to use percentage: `25% 25%`
179 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
180 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
181 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
182 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
183 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
184
185 attempt to use calc: `calc(25% + 10px)`
186 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
187 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
188 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
189 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
190 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'
191
192 single length: `10px`
193 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10px'
194 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10px'
195 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '10px'
196 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '10px'
197 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10px'
198
199 two lengths: `10px 20px`
200 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10px 20px'
201 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10px'
202 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '20px'
203 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '20px'
204 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10px'
205
206 three lengths: `1px 2px 3px`
207 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '1px 2px 3px'
208 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '1px'
209 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '2px'
210 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '2px'
211 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '3px'
212
213 four lengths: `50px 10px 20px 50px`
214 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '50px 10px 20px 50px'
215 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '50px'
216 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '50px'
217 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '10px'
218 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '20px'
219
220 various units: `1em 5mm 2in 4cm`
221 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '16px 18.89763832092285px 192px 151.1811065673828px'
222 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '16px'
223 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '151.1811065673828px'
224 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '18.89763832092285px'
225 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '192px'
226
227 subpixel values: `10.4375px 6.5px`
228 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10.4375px 6.5px'
229 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10.4375px'
230 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '6.5px'
231 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '6.5px'
232 PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10.4375px'
233 PASS successfullyParsed is true
234
235 TEST COMPLETE
236