[CSS Grid Layout] Upgrade align-self and align-items parsing to CSS 3
[WebKit-https.git] / LayoutTests / css3 / flexbox / css-properties.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <script src="../../resources/js-test-pre.js"></script>
5 </head>
6 <body>
7 <div id="flexbox">
8     <div id="flexitem"></div>
9 </div>
10 <script>
11 description('Tests being able to set the display to -webkit-flex and -webkit-inline-flex.');
12
13 var flexbox = document.getElementById("flexbox");
14
15 flexbox.style.display = '-webkit-flex';
16 shouldBeEqualToString('flexbox.style.display', '-webkit-flex');
17
18 flexbox.style.display = 'inline';
19 shouldBeEqualToString('flexbox.style.display', 'inline');
20
21 flexbox.style.display = '-webkit-inline-flex';
22 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');
23
24 flexbox.style.display = 'junk';
25 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');
26
27 flexbox.style.display = 'block';
28 shouldBeEqualToString('flexbox.style.display', 'block');
29
30
31 var flexitem = document.getElementById("flexitem");
32 shouldBeEqualToString('flexitem.style.webkitOrder', '');
33
34 flexitem.style.webkitOrder = 2;
35 shouldBeEqualToString('flexitem.style.webkitOrder', '2');
36
37 flexitem.style.webkitOrder = -1;
38 shouldBeEqualToString('flexitem.style.webkitOrder', '-1');
39
40 flexitem.style.webkitOrder = 0;
41 shouldBeEqualToString('flexitem.style.webkitOrder', '0');
42
43 // -webkit-order must be an integer.
44 flexitem.style.webkitOrder = 1.5;
45 shouldBeEqualToString('flexitem.style.webkitOrder', '0');
46
47 flexitem.style.webkitOrder = "test";
48 shouldBeEqualToString('flexitem.style.webkitOrder', '0');
49
50 flexitem.style.webkitOrder = '';
51 shouldBeEqualToString('flexitem.style.webkitOrder', '');
52
53
54 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
55 // The initial value is 'flex-start'.
56 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');
57
58 flexbox.style.webkitJustifyContent = 'foo';
59 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
60
61 flexbox.style.webkitJustifyContent = 'flex-start';
62 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-start');
63 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');
64
65 flexbox.style.webkitJustifyContent = 'flex-end';
66 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-end');
67 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-end');
68
69 flexbox.style.webkitJustifyContent = 'center';
70 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'center');
71 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'center');
72
73 flexbox.style.webkitJustifyContent = 'space-between';
74 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between');
75 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'space-between');
76
77 flexbox.style.webkitJustifyContent = '';
78 shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
79 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');
80
81 flexbox.style.display = '-webkit-flex';
82
83 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
84 // The initial value is 'auto', which will be resolved depending on parent's style (except for the 'document' element).
85 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
86 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'start');
87
88 flexbox.style.webkitAlignSelf = 'foo';
89 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
90 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
91
92 flexbox.style.webkitAlignSelf = 'auto';
93 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');
94 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
95
96 flexbox.style.webkitAlignSelf = 'flex-start';
97 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');
98 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start');
99
100 flexbox.style.webkitAlignSelf = 'flex-end';
101 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end');
102 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end');
103
104 flexbox.style.webkitAlignSelf = 'center';
105 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center');
106 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center');
107
108 flexbox.style.webkitAlignSelf = 'stretch';
109 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch');
110 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
111
112 flexbox.style.webkitAlignSelf = 'baseline';
113 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline');
114 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline');
115
116 flexbox.style.webkitAlignSelf = '';
117 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
118 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'start');
119
120 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
121 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
122 // The initial value is 'auto', which will be resolved to 'stretch' in case of flexbox containers.
123 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
124 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
125
126 flexbox.style.webkitAlignItems = 'foo';
127 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
128 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
129 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
130 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
131
132 flexbox.style.webkitAlignItems = 'auto';
133 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto');
134 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
135 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
136 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
137
138 flexbox.style.webkitAlignItems = 'flex-start';
139 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');
140 shouldBeEqualToString('flexitem.style.webkitAlignSelf', '');
141 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start');
142 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start');
143
144 flexbox.style.webkitAlignItems = 'flex-end';
145 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end');
146 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end');
147 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end');
148
149 flexbox.style.webkitAlignItems = 'center';
150 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center');
151 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'center');
152 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'center');
153
154 flexbox.style.webkitAlignItems = 'stretch';
155 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'stretch');
156 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
157 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
158
159 flexbox.style.webkitAlignItems = 'baseline';
160 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'baseline');
161 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline');
162 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline');
163
164 flexbox.style.webkitAlignItems = '';
165 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
166 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
167 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
168
169 flexbox.style.display = 'none';
170 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
171 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'auto');
172 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'auto');
173 flexbox.style.display = '';
174
175
176 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.
177 var detachedFlexbox = document.createElement('div');
178 var detachedFlexItem = document.createElement('div');
179 detachedFlexbox.appendChild(detachedFlexItem);
180 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlignSelf', '');
181 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAlignSelf', '');
182
183
184 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
185 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
186
187 flexbox.style.webkitFlexDirection = 'foo';
188 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
189
190 flexbox.style.webkitFlexDirection = 'row';
191 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');
192 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
193
194 flexbox.style.webkitFlexDirection = 'row-reverse';
195 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');
196 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');
197
198 flexbox.style.webkitFlexDirection = 'column';
199 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');
200 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');
201
202 flexbox.style.webkitFlexDirection = 'column-reverse';
203 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');
204 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');
205
206 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
207 // The initial value is 'nowrap'.
208 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
209
210 flexbox.style.webkitFlexWrap = 'foo';
211 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
212
213 flexbox.style.webkitFlexWrap = 'nowrap';
214 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap');
215 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
216
217 flexbox.style.webkitFlexWrap = 'wrap';
218 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');
219 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');
220
221 flexbox.style.webkitFlexWrap = 'wrap-reverse';
222 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');
223 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');
224
225 flexbox.style.webkitFlexFlow = '';
226 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
227 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
228
229 flexbox.style.webkitFlexFlow = 'foo';
230 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
231
232 function testFlexFlowValue(value, expected, expectedComputed)
233 {
234     flexbox.style.webkitFlexFlow = value;
235     shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
236     shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);
237 }
238
239 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
240 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
241 directions.forEach(function(direction) {
242     wraps.forEach(function(wrap) {
243         var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
244         var expected = direction + ' ' + wrap;
245         testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
246         testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
247     });
248 });
249
250 flexbox.style.webkitFlexFlow = '';
251 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
252 flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';
253 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
254 flexbox.style.webkitFlexFlow = 'column row';
255 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
256
257 flexbox.style.webkitFlexFlow = '';
258 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
259 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
260 flexbox.style.webkitFlexDirection = 'column';
261 flexbox.style.webkitFlexWrap = 'initial';
262 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
263 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column nowrap');
264 flexbox.style.webkitFlexWrap = 'wrap';
265 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');
266 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');
267 flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';
268 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');
269 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');
270
271 // -webkit-flex-flow is a shorthand, so it shouldn't show up as a computed property.
272 var computedStyle = getComputedStyle(flexbox);
273 var foundFlexFlow = false;
274 for (var i = 0; i < computedStyle.length; ++i) {
275     if (computedStyle[i] == 'webkitFlexFlow')
276         foundFlexFlow = true;
277 }
278 shouldBeFalse('foundFlexFlow');
279
280 // The initial value is 'stretch'.
281 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
282 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
283
284 flexbox.style.webkitAlignContent = 'flex-start';
285 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-start');
286 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-start');
287
288 flexbox.style.webkitAlignContent = 'flex-end';
289 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-end');
290 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-end');
291
292 flexbox.style.webkitAlignContent = 'center';
293 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'center');
294 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'center');
295
296 flexbox.style.webkitAlignContent = 'space-between';
297 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-between');
298 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-between');
299
300 flexbox.style.webkitAlignContent = 'space-around';
301 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-around');
302 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-around');
303
304 flexbox.style.webkitAlignContent = 'stretch';
305 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'stretch');
306 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
307
308 flexbox.style.webkitAlignContent = '';
309 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
310 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
311
312 flexbox.style.webkitAlignContent = 'foo';
313 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
314 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
315 </script>
316 <script src="../../resources/js-test-post.js"></script>
317 </body>
318 </html>