b1e791427a6ce9f2d7dc5530db87d423bd3b475e
[WebKit-https.git] / LayoutTests / css3 / flexbox / script-tests / css-properties.js
1 description('Tests being able to set the display to -webkit-flexbox and -webkit-inline-flexbox.');
2
3 var flexbox = document.getElementById("flexbox");
4
5 flexbox.style.display = '-webkit-flexbox';
6 shouldBeEqualToString('flexbox.style.display', '-webkit-flexbox');
7
8 flexbox.style.display = 'inline';
9 shouldBeEqualToString('flexbox.style.display', 'inline');
10
11 flexbox.style.display = '-webkit-inline-flexbox';
12 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flexbox');
13
14 flexbox.style.display = 'junk';
15 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flexbox');
16
17 flexbox.style.display = 'block';
18 shouldBeEqualToString('flexbox.style.display', 'block');
19
20
21 var flexitem = document.getElementById("flexitem");
22 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '');
23
24 flexitem.style.webkitFlexOrder = 2;
25 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '2');
26
27 flexitem.style.webkitFlexOrder = -1;
28 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '-1');
29
30 flexitem.style.webkitFlexOrder = 0;
31 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '0');
32
33 // -webkit-flex-order must be an integer.
34 flexitem.style.webkitFlexOrder = 1.5;
35 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '0');
36
37 flexitem.style.webkitFlexOrder = "test";
38 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '0');
39
40 flexitem.style.webkitFlexOrder = '';
41 shouldBeEqualToString('flexitem.style.webkitFlexOrder', '');
42
43
44 shouldBeEqualToString('flexbox.style.webkitFlexPack', '');
45 // The initial value is 'start'.
46 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'start');
47
48 flexbox.style.webkitFlexPack = 'foo';
49 shouldBeEqualToString('flexbox.style.webkitFlexPack', '');
50
51 flexbox.style.webkitFlexPack = 'start';
52 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'start');
53 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'start');
54
55 flexbox.style.webkitFlexPack = 'end';
56 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'end');
57 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'end');
58
59 flexbox.style.webkitFlexPack = 'center';
60 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'center');
61 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'center');
62
63 flexbox.style.webkitFlexPack = 'justify';
64 shouldBeEqualToString('flexbox.style.webkitFlexPack', 'justify');
65 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'justify');
66
67 flexbox.style.webkitFlexPack = '';
68 shouldBeEqualToString('flexbox.style.webkitFlexPack', '');
69 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexPack', 'start');
70
71
72 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
73 // The initial value is 'stretch'.
74 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
75
76 flexbox.style.webkitFlexItemAlign = 'foo';
77 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
78
79 flexbox.style.webkitFlexItemAlign = 'auto';
80 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'auto');
81 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
82
83 flexbox.style.webkitFlexItemAlign = 'start';
84 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'start');
85 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'start');
86
87 flexbox.style.webkitFlexItemAlign = 'end';
88 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'end');
89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'end');
90
91 flexbox.style.webkitFlexItemAlign = 'center';
92 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'center');
93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'center');
94
95 flexbox.style.webkitFlexItemAlign = 'stretch';
96 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'stretch');
97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
98
99 flexbox.style.webkitFlexItemAlign = 'baseline';
100 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'baseline');
101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'baseline');
102
103 flexbox.style.webkitFlexItemAlign = '';
104 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
105 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
106
107 shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
108 // The initial value is 'stretch'.
109 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
110 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
111
112 flexbox.style.webkitFlexAlign = 'foo';
113 shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
114
115 flexbox.style.webkitFlexAlign = 'auto';
116 shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
117 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
118 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
119
120 flexbox.style.webkitFlexAlign = 'start';
121 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'start');
122 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'start');
123 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'start');
124
125 flexbox.style.webkitFlexAlign = 'end';
126 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'end');
127 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'end');
128 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'end');
129
130 flexbox.style.webkitFlexAlign = 'center';
131 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'center');
132 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'center');
133 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'center');
134
135 flexbox.style.webkitFlexAlign = 'stretch';
136 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'stretch');
137 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
138 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
139
140 flexbox.style.webkitFlexAlign = 'baseline';
141 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'baseline');
142 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'baseline');
143 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'baseline');
144
145 flexbox.style.webkitFlexAlign = '';
146 shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
147 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
148 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
149
150 flexbox.style.display = 'none';
151 shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
152 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
153 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitFlexItemAlign', 'stretch');
154 flexbox.style.display = '';
155
156
157 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.
158 var detachedFlexbox = document.createElement('div');
159 var detachedFlexItem = document.createElement('div');
160 detachedFlexbox.appendChild(detachedFlexItem);
161 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitFlexItemAlign', '');
162 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitFlexItemAlign', '');
163
164
165 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
166 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
167
168 flexbox.style.webkitFlexDirection = 'foo';
169 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
170
171 flexbox.style.webkitFlexDirection = 'row';
172 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');
173 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
174
175 flexbox.style.webkitFlexDirection = 'row-reverse';
176 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');
177 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');
178
179 flexbox.style.webkitFlexDirection = 'column';
180 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');
181 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');
182
183 flexbox.style.webkitFlexDirection = 'column-reverse';
184 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');
185 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');
186
187 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
188 // The initial value is 'stretch'.
189 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
190
191 flexbox.style.webkitFlexWrap = 'foo';
192 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
193
194 flexbox.style.webkitFlexWrap = 'nowrap';
195 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap');
196 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
197
198 flexbox.style.webkitFlexWrap = 'wrap';
199 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');
200 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');
201
202 flexbox.style.webkitFlexWrap = 'wrap-reverse';
203 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');
204 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');
205
206 flexbox.style.webkitFlexFlow = '';
207 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
208 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
209
210 flexbox.style.webkitFlexFlow = 'foo';
211 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
212
213 function testFlexFlowValue(value, expected, expectedComputed)
214 {
215     flexbox.style.webkitFlexFlow = value;
216     shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
217     shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);
218 }
219
220 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
221 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
222 directions.forEach(function(direction) {
223     wraps.forEach(function(wrap) {
224         var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
225         var expected = direction + ' ' + wrap;
226         testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
227         testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
228     });
229 });
230
231 flexbox.style.webkitFlexFlow = '';
232 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
233 flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';
234 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
235 flexbox.style.webkitFlexFlow = 'column row';
236 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
237
238 flexbox.style.webkitFlexFlow = '';
239 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
240 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
241 flexbox.style.webkitFlexDirection = 'column';
242 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
243 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column nowrap');
244 flexbox.style.webkitFlexWrap = 'wrap';
245 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');
246 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');
247 flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';
248 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');
249 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');
250
251
252 successfullyParsed = true;