Rename flex-align to flex-item-align.
[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 = 'start';
80 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'start');
81 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'start');
82
83 flexbox.style.webkitFlexItemAlign = 'end';
84 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'end');
85 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'end');
86
87 flexbox.style.webkitFlexItemAlign = 'center';
88 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'center');
89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'center');
90
91 flexbox.style.webkitFlexItemAlign = 'stretch';
92 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'stretch');
93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
94
95 flexbox.style.webkitFlexItemAlign = 'baseline';
96 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', 'baseline');
97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'baseline');
98
99 flexbox.style.webkitFlexItemAlign = '';
100 shouldBeEqualToString('flexbox.style.webkitFlexItemAlign', '');
101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexItemAlign', 'stretch');
102
103 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
104 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
105
106 flexbox.style.webkitFlexDirection = 'foo';
107 shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
108
109 flexbox.style.webkitFlexDirection = 'row';
110 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');
111 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
112
113 flexbox.style.webkitFlexDirection = 'row-reverse';
114 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');
115 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');
116
117 flexbox.style.webkitFlexDirection = 'column';
118 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');
119 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');
120
121 flexbox.style.webkitFlexDirection = 'column-reverse';
122 shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');
123 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');
124
125 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
126 // The initial value is 'stretch'.
127 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
128
129 flexbox.style.webkitFlexWrap = 'foo';
130 shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
131
132 flexbox.style.webkitFlexWrap = 'nowrap';
133 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap');
134 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
135
136 flexbox.style.webkitFlexWrap = 'wrap';
137 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');
138 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');
139
140 flexbox.style.webkitFlexWrap = 'wrap-reverse';
141 shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');
142 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');
143
144 flexbox.style.webkitFlexFlow = '';
145 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
146 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
147
148 flexbox.style.webkitFlexFlow = 'foo';
149 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
150
151 function testFlexFlowValue(value, expected, expectedComputed)
152 {
153     flexbox.style.webkitFlexFlow = value;
154     shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
155     shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);
156 }
157
158 var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
159 var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
160 directions.forEach(function(direction) {
161     wraps.forEach(function(wrap) {
162         var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
163         var expected = direction + ' ' + wrap;
164         testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
165         testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
166     });
167 });
168
169 flexbox.style.webkitFlexFlow = '';
170 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
171 flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';
172 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
173 flexbox.style.webkitFlexFlow = 'column row';
174 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
175
176 flexbox.style.webkitFlexFlow = '';
177 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
178 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
179 flexbox.style.webkitFlexDirection = 'column';
180 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
181 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column nowrap');
182 flexbox.style.webkitFlexWrap = 'wrap';
183 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');
184 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');
185 flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';
186 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');
187 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');
188
189
190 successfullyParsed = true;