d721efc872a3d13a0f75087113079d0a40fcf619
[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
82 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
83 // The initial value is 'stretch'.
84 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'stretch');
86
87 flexbox.style.webkitAlignSelf = 'foo';
88 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
89
90 flexbox.style.webkitAlignSelf = 'auto';
91 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');
92 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
93
94 flexbox.style.webkitAlignSelf = 'flex-start';
95 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');
96 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start');
97
98 flexbox.style.webkitAlignSelf = 'flex-end';
99 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end');
100 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end');
101
102 flexbox.style.webkitAlignSelf = 'center';
103 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center');
104 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center');
105
106 flexbox.style.webkitAlignSelf = 'stretch';
107 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch');
108 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
109
110 flexbox.style.webkitAlignSelf = 'baseline';
111 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline');
112 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline');
113
114 flexbox.style.webkitAlignSelf = '';
115 shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
116 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
117
118 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
119 // The initial value is 'stretch'.
120 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
121 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
122
123 flexbox.style.webkitAlignItems = 'foo';
124 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
125
126 flexbox.style.webkitAlignItems = 'auto';
127 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
130
131 flexbox.style.webkitAlignItems = 'flex-start';
132 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');
133 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start');
134 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start');
135
136 flexbox.style.webkitAlignItems = 'flex-end';
137 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end');
138 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end');
139 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end');
140
141 flexbox.style.webkitAlignItems = 'center';
142 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center');
143 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'center');
144 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'center');
145
146 flexbox.style.webkitAlignItems = 'stretch';
147 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'stretch');
148 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
149 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
150
151 flexbox.style.webkitAlignItems = 'baseline';
152 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'baseline');
153 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline');
154 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline');
155
156 flexbox.style.webkitAlignItems = '';
157 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
158 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
159 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
160
161 flexbox.style.display = 'none';
162 shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
163 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
164 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
165 flexbox.style.display = '';
166
167
168 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.
169 var detachedFlexbox = document.createElement('div');
170 var detachedFlexItem = document.createElement('div');
171 detachedFlexbox.appendChild(detachedFlexItem);
172 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlignSelf', '');
173 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAlignSelf', '');
174
175
176 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
177 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
178
179 flexbox.style.webkitFlexDirection = 'foo';
180 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
181
182 flexbox.style.webkitFlexDirection = 'row';
183 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');
184 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
185
186 flexbox.style.webkitFlexDirection = 'row-reverse';
187 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');
188 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');
189
190 flexbox.style.webkitFlexDirection = 'column';
191 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');
192 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');
193
194 flexbox.style.webkitFlexDirection = 'column-reverse';
195 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');
196 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');
197
198 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
199 // The initial value is 'nowrap'.
200 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
201
202 flexbox.style.webkitFlexWrap = 'foo';
203 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
204
205 flexbox.style.webkitFlexWrap = 'nowrap';
206 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap');
207 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
208
209 flexbox.style.webkitFlexWrap = 'wrap';
210 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');
211 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');
212
213 flexbox.style.webkitFlexWrap = 'wrap-reverse';
214 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');
215 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');
216
217 flexbox.style.webkitFlexFlow = '';
218 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
219 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
220
221 flexbox.style.webkitFlexFlow = 'foo';
222 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
223
224 function testFlexFlowValue(value, expected, expectedComputed)
225 {
226     flexbox.style.webkitFlexFlow = value;
227     shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
228     shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);
229 }
230
231 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
232 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
233 directions.forEach(function(direction) {
234     wraps.forEach(function(wrap) {
235         var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
236         var expected = direction + ' ' + wrap;
237         testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
238         testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
239     });
240 });
241
242 flexbox.style.webkitFlexFlow = '';
243 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
244 flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';
245 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
246 flexbox.style.webkitFlexFlow = 'column row';
247 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
248
249 flexbox.style.webkitFlexFlow = '';
250 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
251 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
252 flexbox.style.webkitFlexDirection = 'column';
253 flexbox.style.webkitFlexWrap = 'initial';
254 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
255 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column nowrap');
256 flexbox.style.webkitFlexWrap = 'wrap';
257 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');
258 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');
259 flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';
260 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');
261 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');
262
263 // -webkit-flex-flow is a shorthand, so it shouldn't show up as a computed property.
264 var computedStyle = getComputedStyle(flexbox);
265 var foundFlexFlow = false;
266 for (var i = 0; i < computedStyle.length; ++i) {
267     if (computedStyle[i] == 'webkitFlexFlow')
268         foundFlexFlow = true;
269 }
270 shouldBeFalse('foundFlexFlow');
271
272 // The initial value is 'stretch'.
273 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
274 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
275
276 flexbox.style.webkitAlignContent = 'flex-start';
277 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-start');
278 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-start');
279
280 flexbox.style.webkitAlignContent = 'flex-end';
281 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-end');
282 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-end');
283
284 flexbox.style.webkitAlignContent = 'center';
285 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'center');
286 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'center');
287
288 flexbox.style.webkitAlignContent = 'space-between';
289 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-between');
290 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-between');
291
292 flexbox.style.webkitAlignContent = 'space-around';
293 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-around');
294 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-around');
295
296 flexbox.style.webkitAlignContent = 'stretch';
297 shouldBeEqualToString('flexbox.style.webkitAlignContent', 'stretch');
298 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
299
300 flexbox.style.webkitAlignContent = '';
301 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
302 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
303
304 flexbox.style.webkitAlignContent = 'foo';
305 shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
306 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
307 </script>
308 <script src="../../resources/js-test-post.js"></script>
309 </body>
310 </html>