OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> |
5 </head> | 5 </head> |
6 <body> | 6 <body> |
7 <div id="flexbox"> | 7 <div id="flexbox"> |
8 <div id="flexitem"></div> | 8 <div id="flexitem"></div> |
9 </div> | 9 </div> |
10 <script> | 10 <script> |
11 description('Tests being able to set the display to -webkit-flex and -webkit-inl
ine-flex.'); | 11 description('Tests being able to set the display to -webkit-flex and -webkit-inl
ine-flex.'); |
12 | 12 |
13 var flexbox = document.getElementById("flexbox"); | 13 var flexbox = document.getElementById("flexbox"); |
14 | 14 |
15 flexbox.style.display = '-webkit-flex'; | 15 flexbox.style.display = '-webkit-flex'; |
16 shouldBeEqualToString('flexbox.style.display', '-webkit-flex'); | 16 shouldBeEqualToString('flexbox.style.display', '-webkit-flex'); |
17 | 17 |
18 flexbox.style.display = 'inline'; | 18 flexbox.style.display = 'inline'; |
19 shouldBeEqualToString('flexbox.style.display', 'inline'); | 19 shouldBeEqualToString('flexbox.style.display', 'inline'); |
20 | 20 |
21 flexbox.style.display = '-webkit-inline-flex'; | 21 flexbox.style.display = '-webkit-inline-flex'; |
22 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex'); | 22 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex'); |
23 | 23 |
24 flexbox.style.display = 'junk'; | 24 flexbox.style.display = 'junk'; |
25 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex'); | 25 shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex'); |
26 | 26 |
27 flexbox.style.display = 'block'; | 27 flexbox.style.display = 'block'; |
28 shouldBeEqualToString('flexbox.style.display', 'block'); | 28 shouldBeEqualToString('flexbox.style.display', 'block'); |
29 | 29 |
| 30 flexbox.style.display = 'flex'; |
30 | 31 |
31 var flexitem = document.getElementById("flexitem"); | 32 var flexitem = document.getElementById("flexitem"); |
32 shouldBeEqualToString('flexitem.style.webkitOrder', ''); | 33 shouldBeEqualToString('flexitem.style.webkitOrder', ''); |
33 | 34 |
34 flexitem.style.webkitOrder = 2; | 35 flexitem.style.webkitOrder = 2; |
35 shouldBeEqualToString('flexitem.style.webkitOrder', '2'); | 36 shouldBeEqualToString('flexitem.style.webkitOrder', '2'); |
36 | 37 |
37 flexitem.style.webkitOrder = -1; | 38 flexitem.style.webkitOrder = -1; |
38 shouldBeEqualToString('flexitem.style.webkitOrder', '-1'); | 39 shouldBeEqualToString('flexitem.style.webkitOrder', '-1'); |
39 | 40 |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
71 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
nt', 'center'); | 72 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
nt', 'center'); |
72 | 73 |
73 flexbox.style.webkitJustifyContent = 'space-between'; | 74 flexbox.style.webkitJustifyContent = 'space-between'; |
74 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between'); | 75 shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between'); |
75 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
nt', 'space-between'); | 76 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
nt', 'space-between'); |
76 | 77 |
77 flexbox.style.webkitJustifyContent = ''; | 78 flexbox.style.webkitJustifyContent = ''; |
78 shouldBeEqualToString('flexbox.style.webkitJustifyContent', ''); | 79 shouldBeEqualToString('flexbox.style.webkitJustifyContent', ''); |
79 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
nt', 'flex-start'); | 80 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyConte
nt', 'flex-start'); |
80 | 81 |
81 | |
82 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); | 82 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); |
83 // The initial value is 'stretch'. | 83 // The initial value is 'auto', which will be resolved depending on parent's sty
le (except for the 'document' element). |
84 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'stretch'); | 84 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start
'); |
85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).w
ebkitAlignSelf', 'stretch'); | 85 shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).a
lignSelf', 'start'); |
86 | 86 |
87 flexbox.style.webkitAlignSelf = 'foo'; | 87 flexbox.style.webkitAlignSelf = 'foo'; |
88 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); | 88 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); |
| 89 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start
'); |
89 | 90 |
90 flexbox.style.webkitAlignSelf = 'auto'; | 91 flexbox.style.webkitAlignSelf = 'auto'; |
91 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto'); | 92 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto'); |
92 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'stretch'); | 93 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start
'); |
93 | 94 |
94 flexbox.style.webkitAlignSelf = 'flex-start'; | 95 flexbox.style.webkitAlignSelf = 'flex-start'; |
95 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start'); | 96 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start'); |
96 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'flex-start'); | 97 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'flex-start'); |
97 | 98 |
98 flexbox.style.webkitAlignSelf = 'flex-end'; | 99 flexbox.style.webkitAlignSelf = 'flex-end'; |
99 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end'); | 100 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end'); |
100 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'flex-end'); | 101 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'flex-end'); |
101 | 102 |
102 flexbox.style.webkitAlignSelf = 'center'; | 103 flexbox.style.webkitAlignSelf = 'center'; |
103 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center'); | 104 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center'); |
104 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'center'); | 105 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'center'); |
105 | 106 |
106 flexbox.style.webkitAlignSelf = 'stretch'; | 107 flexbox.style.webkitAlignSelf = 'stretch'; |
107 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch'); | 108 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch'); |
108 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'stretch'); | 109 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'stretch'); |
109 | 110 |
110 flexbox.style.webkitAlignSelf = 'baseline'; | 111 flexbox.style.webkitAlignSelf = 'baseline'; |
111 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline'); | 112 shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline'); |
112 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'baseline'); | 113 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'baseline'); |
113 | 114 |
114 flexbox.style.webkitAlignSelf = ''; | 115 flexbox.style.webkitAlignSelf = ''; |
115 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); | 116 shouldBeEqualToString('flexbox.style.webkitAlignSelf', ''); |
116 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf',
'stretch'); | 117 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'start
'); |
117 | 118 |
118 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); | 119 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); |
119 // The initial value is 'stretch'. | 120 shouldBeEqualToString('flexitem.style.alignSelf', ''); |
120 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'stretch'); | 121 // The initial value is 'auto', which will be resolved to 'stretch' in case of f
lexbox containers. |
121 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'stretch'); | 122 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre
tch'); |
| 123 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre
tch'); |
122 | 124 |
123 flexbox.style.webkitAlignItems = 'foo'; | 125 flexbox.style.webkitAlignItems = 'foo'; |
124 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); | 126 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); |
| 127 shouldBeEqualToString('flexitem.style.alignSelf', ''); |
| 128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre
tch'); |
| 129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre
tch'); |
125 | 130 |
126 flexbox.style.webkitAlignItems = 'auto'; | 131 flexbox.style.webkitAlignItems = 'auto'; |
127 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto'); | 132 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'auto'); |
128 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'auto'); | 133 shouldBeEqualToString('flexitem.style.alignSelf', ''); |
129 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'auto'); | 134 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stre
tch'); |
| 135 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'stre
tch'); |
130 | 136 |
131 flexbox.style.webkitAlignItems = 'flex-start'; | 137 flexbox.style.webkitAlignItems = 'flex-start'; |
132 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start'); | 138 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start'); |
| 139 shouldBeEqualToString('flexitem.style.webkitAlignSelf', ''); |
133 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'flex-start'); | 140 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'flex-start'); |
134 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'flex-start'); | 141 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'flex-start'); |
135 | 142 |
136 flexbox.style.webkitAlignItems = 'flex-end'; | 143 flexbox.style.webkitAlignItems = 'flex-end'; |
137 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end'); | 144 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end'); |
138 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'flex-end'); | 145 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'flex-end'); |
139 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'flex-end'); | 146 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'flex-end'); |
140 | 147 |
141 flexbox.style.webkitAlignItems = 'center'; | 148 flexbox.style.webkitAlignItems = 'center'; |
142 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center'); | 149 shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center'); |
(...skipping 10 matching lines...) Expand all Loading... |
153 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'baseline'); | 160 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'baseline'); |
154 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'baseline'); | 161 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'baseline'); |
155 | 162 |
156 flexbox.style.webkitAlignItems = ''; | 163 flexbox.style.webkitAlignItems = ''; |
157 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); | 164 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); |
158 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'stretch'); | 165 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'stretch'); |
159 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'stretch'); | 166 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'stretch'); |
160 | 167 |
161 flexbox.style.display = 'none'; | 168 flexbox.style.display = 'none'; |
162 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); | 169 shouldBeEqualToString('flexbox.style.webkitAlignItems', ''); |
163 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems',
'stretch'); | 170 shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'star
t'); |
164 shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf',
'stretch'); | 171 shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'star
t'); |
165 flexbox.style.display = ''; | 172 flexbox.style.display = ''; |
166 | 173 |
167 | 174 |
168 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_
bug.cgi?id=14563. | 175 // FIXME: This should probably return stretch. See https://bugs.webkit.org/show_
bug.cgi?id=14563. |
169 var detachedFlexbox = document.createElement('div'); | 176 var detachedFlexbox = document.createElement('div'); |
170 var detachedFlexItem = document.createElement('div'); | 177 var detachedFlexItem = document.createElement('div'); |
171 detachedFlexbox.appendChild(detachedFlexItem); | 178 detachedFlexbox.appendChild(detachedFlexItem); |
172 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlig
nSelf', ''); | 179 shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).webkitAlig
nSelf', ''); |
173 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAli
gnSelf', ''); | 180 shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAli
gnSelf', ''); |
174 | 181 |
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
300 flexbox.style.webkitAlignContent = ''; | 307 flexbox.style.webkitAlignContent = ''; |
301 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); | 308 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); |
302 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent
', 'stretch'); | 309 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent
', 'stretch'); |
303 | 310 |
304 flexbox.style.webkitAlignContent = 'foo'; | 311 flexbox.style.webkitAlignContent = 'foo'; |
305 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); | 312 shouldBeEqualToString('flexbox.style.webkitAlignContent', ''); |
306 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent
', 'stretch'); | 313 shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent
', 'stretch'); |
307 </script> | 314 </script> |
308 </body> | 315 </body> |
309 </html> | 316 </html> |
OLD | NEW |