CSS parsing for -webkit-flex-flow
[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.webkitFlexAlign', '');
73 // The initial value is 'stretch'.
74 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
75
76 flexbox.style.webkitFlexAlign = 'foo';
77 shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
78
79 flexbox.style.webkitFlexAlign = 'before';
80 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'before');
81 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'before');
82
83 flexbox.style.webkitFlexAlign = 'after';
84 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'after');
85 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'after');
86
87 flexbox.style.webkitFlexAlign = 'middle';
88 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'middle');
89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'middle');
90
91 flexbox.style.webkitFlexAlign = 'stretch';
92 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'stretch');
93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
94
95 flexbox.style.webkitFlexAlign = 'baseline';
96 shouldBeEqualToString('flexbox.style.webkitFlexAlign', 'baseline');
97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'baseline');
98
99 flexbox.style.webkitFlexAlign = '';
100 shouldBeEqualToString('flexbox.style.webkitFlexAlign', '');
101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
102
103 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
104 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row');
105
106 flexbox.style.webkitFlexFlow = 'foo';
107 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
108
109 flexbox.style.webkitFlexFlow = 'row';
110 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row');
111 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row');
112
113 flexbox.style.webkitFlexFlow = 'row-reverse';
114 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse');
115 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse');
116
117 flexbox.style.webkitFlexFlow = 'column';
118 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
119 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column');
120
121 flexbox.style.webkitFlexFlow = 'column-reverse';
122 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column-reverse');
123 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column-reverse');
124
125 flexbox.style.webkitFlexFlow = 'horizontal';
126 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'horizontal');
127 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'horizontal');
128
129 flexbox.style.webkitFlexFlow = 'horizontal-reverse';
130 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'horizontal-reverse');
131 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'horizontal-reverse');
132
133 flexbox.style.webkitFlexFlow = 'horizontal-ltr';
134 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'horizontal-ltr');
135 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'horizontal-ltr');
136
137 flexbox.style.webkitFlexFlow = 'horizontal-rtl';
138 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'horizontal-rtl');
139 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'horizontal-rtl');
140
141 flexbox.style.webkitFlexFlow = 'vertical';
142 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'vertical');
143 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'vertical');
144
145 flexbox.style.webkitFlexFlow = 'vertical-reverse';
146 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'vertical-reverse');
147 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'vertical-reverse');
148
149 flexbox.style.webkitFlexFlow = 'vertical-ttb';
150 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'vertical-ttb');
151 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'vertical-ttb');
152
153 flexbox.style.webkitFlexFlow = 'vertical-btt';
154 shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'vertical-btt');
155 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'vertical-btt');
156
157 successfullyParsed = true;