OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #alignItemsBaseline { | 5 #alignItemsBaseline { |
6 align-items: baseline; | 6 align-items: baseline; |
7 } | 7 } |
8 | 8 |
9 #alignItemsLastBaseline { | 9 #alignItemsLastBaseline { |
10 align-items: last-baseline; | 10 align-items: last-baseline; |
(...skipping 158 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
169 var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsa
fe"); | 169 var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsa
fe"); |
170 shouldBe("getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('alig
n-items')", "'flex-start unsafe'"); | 170 shouldBe("getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('alig
n-items')", "'flex-start unsafe'"); |
171 | 171 |
172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe"); | 172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe"); |
173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-it
ems')", "'flex-end safe'"); | 173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-it
ems')", "'flex-end safe'"); |
174 | 174 |
175 debug(""); | 175 debug(""); |
176 debug("Test initial value of align-items through JS"); | 176 debug("Test initial value of align-items through JS"); |
177 element = document.createElement("div"); | 177 element = document.createElement("div"); |
178 document.body.appendChild(element); | 178 document.body.appendChild(element); |
179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'star
t'"); | 179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'norm
al'"); |
180 | 180 |
181 debug(""); | 181 debug(""); |
182 debug("Test getting and setting align-items through JS"); | 182 debug("Test getting and setting align-items through JS"); |
183 element = document.createElement("div"); | 183 element = document.createElement("div"); |
184 document.body.appendChild(element); | 184 document.body.appendChild(element); |
185 element.style.alignItems = "center"; | 185 element.style.alignItems = "center"; |
186 checkValues(element, "alignItems", "align-items", "center", "center"); | 186 checkValues(element, "alignItems", "align-items", "center", "center"); |
187 | 187 |
188 element.style.alignItems = "unsafe start"; | 188 element.style.alignItems = "unsafe start"; |
189 checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe
"); | 189 checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe
"); |
190 | 190 |
191 element.style.alignItems = "flex-end safe"; | 191 element.style.alignItems = "flex-end safe"; |
192 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end sa
fe"); | 192 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end sa
fe"); |
193 | 193 |
194 element.style.alignItems = "right"; | 194 element.style.alignItems = "right"; |
195 checkValues(element, "alignItems", "align-items", "right", "right"); | 195 checkValues(element, "alignItems", "align-items", "right", "right"); |
196 | 196 |
197 element.style.alignItems = "center"; | 197 element.style.alignItems = "center"; |
198 checkValues(element, "alignItems", "align-items", "center", "center"); | 198 checkValues(element, "alignItems", "align-items", "center", "center"); |
199 | 199 |
200 element.style.alignItems = "self-start"; | 200 element.style.alignItems = "self-start"; |
201 checkValues(element, "alignItems", "align-items", "self-start", "self-start"); | 201 checkValues(element, "alignItems", "align-items", "self-start", "self-start"); |
202 | 202 |
| 203 // The 'auto' value is not valid for the align-items property. |
| 204 element.style.alignItems = ""; |
203 element.style.alignItems = "auto"; | 205 element.style.alignItems = "auto"; |
204 checkValues(element, "alignItems", "align-items", "auto", "start"); | 206 checkValues(element, "alignItems", "align-items", "", "normal"); |
205 | 207 |
206 element.style.display = "flex"; | 208 element.style.display = "flex"; |
207 element.style.alignItems = "auto"; | 209 element.style.alignItems = "auto"; |
208 checkValues(element, "alignItems", "align-items", "auto", "stretch"); | 210 checkValues(element, "alignItems", "align-items", "", "normal"); |
209 | 211 |
210 element.style.display = "grid"; | 212 element.style.display = "grid"; |
211 element.style.alignItems = "auto"; | 213 element.style.alignItems = "auto"; |
212 checkValues(element, "alignItems", "align-items", "auto", "stretch"); | 214 checkValues(element, "alignItems", "align-items", "", "normal"); |
213 | 215 |
214 element.style.alignItems = "self-end"; | 216 element.style.alignItems = "self-end"; |
215 checkValues(element, "alignItems", "align-items", "self-end", "self-end"); | 217 checkValues(element, "alignItems", "align-items", "self-end", "self-end"); |
216 | 218 |
217 debug(""); | 219 debug(""); |
218 debug("Test bad combinations of align-items"); | 220 debug("Test bad combinations of align-items"); |
219 element = document.createElement("div"); | 221 element = document.createElement("div"); |
220 document.body.appendChild(element); | 222 document.body.appendChild(element); |
221 | 223 |
| 224 checkBadValues(element, "alignItems", "align-items", "auto"); |
222 checkBadValues(element, "alignItems", "align-items", "unsafe auto"); | 225 checkBadValues(element, "alignItems", "align-items", "unsafe auto"); |
223 checkBadValues(element, "alignItems", "align-items", "auto safe"); | 226 checkBadValues(element, "alignItems", "align-items", "auto safe"); |
224 checkBadValues(element, "alignItems", "align-items", "auto left"); | 227 checkBadValues(element, "alignItems", "align-items", "auto left"); |
225 checkBadValues(element, "alignItems", "align-items", "baseline safe"); | 228 checkBadValues(element, "alignItems", "align-items", "baseline safe"); |
226 checkBadValues(element, "alignItems", "align-items", "baseline center"); | 229 checkBadValues(element, "alignItems", "align-items", "baseline center"); |
227 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); | 230 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
228 checkBadValues(element, "alignItems", "align-items", "stretch right"); | 231 checkBadValues(element, "alignItems", "align-items", "stretch right"); |
229 checkBadValues(element, "alignItems", "align-items", "unsafe unsafe"); | 232 checkBadValues(element, "alignItems", "align-items", "unsafe unsafe"); |
230 checkBadValues(element, "alignItems", "align-items", "unsafe safe"); | 233 checkBadValues(element, "alignItems", "align-items", "unsafe safe"); |
231 checkBadValues(element, "alignItems", "align-items", "center start"); | 234 checkBadValues(element, "alignItems", "align-items", "center start"); |
232 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); | 235 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
233 checkBadValues(element, "alignItems", "align-items", "safe stretch"); | 236 checkBadValues(element, "alignItems", "align-items", "safe stretch"); |
234 checkBadValues(element, "alignItems", "align-items", "baseline safe"); | 237 checkBadValues(element, "alignItems", "align-items", "baseline safe"); |
235 checkBadValues(element, "alignItems", "align-items", "unsafe baseline"); | 238 checkBadValues(element, "alignItems", "align-items", "unsafe baseline"); |
236 checkBadValues(element, "alignItems", "align-items", "unsafe safe left"); | 239 checkBadValues(element, "alignItems", "align-items", "unsafe safe left"); |
237 checkBadValues(element, "alignItems", "align-items", "unsafe left safe"); | 240 checkBadValues(element, "alignItems", "align-items", "unsafe left safe"); |
238 checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe"); | 241 checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe"); |
239 checkBadValues(element, "alignItems", "align-items", "legacy start"); | 242 checkBadValues(element, "alignItems", "align-items", "legacy start"); |
240 checkBadValues(element, "alignItems", "align-items", "legacy end"); | 243 checkBadValues(element, "alignItems", "align-items", "legacy end"); |
241 checkBadValues(element, "alignItems", "align-items", "legacy right unsafe"); | 244 checkBadValues(element, "alignItems", "align-items", "legacy right unsafe"); |
242 checkBadValues(element, "alignItems", "align-items", "legacy auto"); | 245 checkBadValues(element, "alignItems", "align-items", "legacy auto"); |
243 checkBadValues(element, "alignItems", "align-items", "legacy stretch"); | 246 checkBadValues(element, "alignItems", "align-items", "legacy stretch"); |
244 checkBadValues(element, "alignItems", "align-items", "legacy"); | 247 checkBadValues(element, "alignItems", "align-items", "legacy"); |
245 checkBadValues(element, "alignItems", "align-items", "legacy left right"); | 248 checkBadValues(element, "alignItems", "align-items", "legacy left right"); |
246 | 249 |
247 debug(""); | 250 debug(""); |
248 debug("Test the value 'initial'"); | 251 debug("Test the value 'initial'"); |
249 element.style.display = ""; | 252 element.style.display = ""; |
250 checkInitialValues(element, "alignItems", "align-items", "center", "start"); | 253 checkInitialValues(element, "alignItems", "align-items", "center", "normal"); |
251 | 254 |
252 debug(""); | 255 debug(""); |
253 debug("Test the value 'initial' for grid containers"); | 256 debug("Test the value 'initial' for grid containers"); |
254 element.style.display = "grid"; | 257 element.style.display = "grid"; |
255 checkInitialValues(element, "alignItems", "align-items", "left safe", "stretch")
; | 258 checkInitialValues(element, "alignItems", "align-items", "left safe", "normal"); |
256 | 259 |
257 debug(""); | 260 debug(""); |
258 debug("Test the value 'initial' for flex containers"); | 261 debug("Test the value 'initial' for flex containers"); |
259 element.style.display = "flex"; | 262 element.style.display = "flex"; |
260 checkInitialValues(element, "alignItems", "align-items", "right unsafe", "stretc
h"); | 263 checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal
"); |
261 | 264 |
262 debug(""); | 265 debug(""); |
263 debug("Test the value 'inherit'"); | 266 debug("Test the value 'inherit'"); |
264 checkInheritValues("alignItems", "align-items", "end"); | 267 checkInheritValues("alignItems", "align-items", "end"); |
265 checkInheritValues("alignItems", "align-items", "left safe"); | 268 checkInheritValues("alignItems", "align-items", "left safe"); |
266 checkInheritValues("alignItems", "align-items", "center unsafe"); | 269 checkInheritValues("alignItems", "align-items", "center unsafe"); |
267 | 270 |
268 </script> | 271 </script> |
269 </body> | 272 </body> |
270 </html> | 273 </html> |
OLD | NEW |