OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #justifyItemsBaseline { | 5 #justifyItemsBaseline { |
6 justify-items: baseline; | 6 justify-items: baseline; |
7 } | 7 } |
8 | 8 |
9 #justifyItemsLastBaseline { | 9 #justifyItemsLastBaseline { |
10 justify-items: last-baseline; | 10 justify-items: last-baseline; |
(...skipping 205 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
216 var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy
"); | 216 var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy
"); |
217 shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justi
fy-items')", "'legacy center'"); | 217 shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justi
fy-items')", "'legacy center'"); |
218 | 218 |
219 var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy")
; | 219 var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy")
; |
220 shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justif
y-items')", "'legacy right'"); | 220 shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justif
y-items')", "'legacy right'"); |
221 | 221 |
222 debug(""); | 222 debug(""); |
223 debug("Test initial value of justify-items through JS"); | 223 debug("Test initial value of justify-items through JS"); |
224 element = document.createElement("div"); | 224 element = document.createElement("div"); |
225 document.body.appendChild(element); | 225 document.body.appendChild(element); |
226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st
art'"); | 226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'no
rmal'"); |
227 | 227 |
228 debug(""); | 228 debug(""); |
229 debug("Test getting and setting justify-items through JS"); | 229 debug("Test getting and setting justify-items through JS"); |
230 element = document.createElement("div"); | 230 element = document.createElement("div"); |
231 document.body.appendChild(element); | 231 document.body.appendChild(element); |
232 element.style.justifyItems = "center"; | 232 element.style.justifyItems = "center"; |
233 checkValues(element, "justifyItems", "justify-items", "center", "center"); | 233 checkValues(element, "justifyItems", "justify-items", "center", "center"); |
234 | 234 |
235 element.style.justifyItems = "unsafe start"; | 235 element.style.justifyItems = "unsafe start"; |
236 checkValues(element, "justifyItems", "justify-items", "start unsafe", "start un
safe"); | 236 checkValues(element, "justifyItems", "justify-items", "start unsafe", "start un
safe"); |
237 | 237 |
238 element.style.justifyItems = "flex-end safe"; | 238 element.style.justifyItems = "flex-end safe"; |
239 checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-en
d safe"); | 239 checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-en
d safe"); |
240 | 240 |
241 element.style.justifyItems = "right legacy"; | 241 element.style.justifyItems = "right legacy"; |
242 checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy r
ight"); | 242 checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy r
ight"); |
243 | 243 |
244 element.style.justifyItems = "center legacy"; | 244 element.style.justifyItems = "center legacy"; |
245 checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy
center"); | 245 checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy
center"); |
246 | 246 |
247 element.style.justifyItems = "left legacy"; | 247 element.style.justifyItems = "left legacy"; |
248 checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy le
ft"); | 248 checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy le
ft"); |
249 | 249 |
250 element.style.justifyItems = "auto"; | 250 element.style.justifyItems = "auto"; |
251 checkValues(element, "justifyItems", "justify-items", "auto", "start"); | 251 checkValues(element, "justifyItems", "justify-items", "auto", "normal"); |
252 | 252 |
253 element.style.display = "flex"; | 253 element.style.display = "flex"; |
254 element.style.justifyItems = "auto"; | 254 element.style.justifyItems = "auto"; |
255 checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); | 255 checkValues(element, "justifyItems", "justify-items", "auto", "normal"); |
256 | 256 |
257 element.style.display = "grid"; | 257 element.style.display = "grid"; |
258 element.style.justifyItems = "auto"; | 258 element.style.justifyItems = "auto"; |
259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); | 259 checkValues(element, "justifyItems", "justify-items", "auto", "normal"); |
260 | 260 |
261 element.style.justifyItems = "self-end"; | 261 element.style.justifyItems = "self-end"; |
262 checkValues(element, "justifyItems", "justify-items", "self-end", "self-end"); | 262 checkValues(element, "justifyItems", "justify-items", "self-end", "self-end"); |
263 | 263 |
264 debug(""); | 264 debug(""); |
| 265 debug("Test 'auto' value resolution for the root node"); |
| 266 document.documentElement.style.justifyItems = "auto"; |
| 267 checkValues(document.documentElement, "justifyItems", "justify-items", "auto",
"normal"); |
| 268 |
| 269 debug(""); |
265 debug("Test bad combinations of justify-items"); | 270 debug("Test bad combinations of justify-items"); |
266 element = document.createElement("div"); | 271 element = document.createElement("div"); |
267 document.body.appendChild(element); | 272 document.body.appendChild(element); |
268 | 273 |
269 checkBadValues(element, "justifyItems", "justify-items", "unsafe auto"); | 274 checkBadValues(element, "justifyItems", "justify-items", "unsafe auto"); |
270 checkBadValues(element, "justifyItems", "justify-items", "auto safe"); | 275 checkBadValues(element, "justifyItems", "justify-items", "auto safe"); |
271 checkBadValues(element, "justifyItems", "justify-items", "auto left"); | 276 checkBadValues(element, "justifyItems", "justify-items", "auto left"); |
272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); | 277 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
273 checkBadValues(element, "justifyItems", "justify-items", "baseline center"); | 278 checkBadValues(element, "justifyItems", "justify-items", "baseline center"); |
274 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); | 279 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
(...skipping 12 matching lines...) Expand all Loading... |
287 checkBadValues(element, "justifyItems", "justify-items", "legacy end"); | 292 checkBadValues(element, "justifyItems", "justify-items", "legacy end"); |
288 checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe")
; | 293 checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe")
; |
289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); | 294 checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); |
290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); | 295 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); |
291 checkBadValues(element, "justifyItems", "justify-items", "legacy"); | 296 checkBadValues(element, "justifyItems", "justify-items", "legacy"); |
292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); | 297 checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); |
293 | 298 |
294 debug(""); | 299 debug(""); |
295 debug("Test the value 'initial'"); | 300 debug("Test the value 'initial'"); |
296 element.style.display = ""; | 301 element.style.display = ""; |
297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "s
tart"); | 302 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "n
ormal"); |
298 | 303 |
299 debug(""); | 304 debug(""); |
300 debug("Test the value 'initial' for grid containers"); | 305 debug("Test the value 'initial' for grid containers"); |
301 element.style.display = "grid"; | 306 element.style.display = "grid"; |
302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stret
ch"); | 307 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "norma
l"); |
303 | 308 |
304 debug(""); | 309 debug(""); |
305 debug("Test the value 'initial' for flex containers"); | 310 debug("Test the value 'initial' for flex containers"); |
306 element.style.display = "flex"; | 311 element.style.display = "flex"; |
307 checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "st
retch"); | 312 checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "no
rmal"); |
308 | 313 |
309 debug(""); | 314 debug(""); |
310 debug("Test the value 'inherit'"); | 315 debug("Test the value 'inherit'"); |
311 checkInheritValues("justifyItems", "justify-items", "end"); | 316 checkInheritValues("justifyItems", "justify-items", "end"); |
312 checkInheritValues("justifyItems", "justify-items", "left safe"); | 317 checkInheritValues("justifyItems", "justify-items", "left safe"); |
313 checkInheritValues("justifyItems", "justify-items", "legacy center"); | 318 checkInheritValues("justifyItems", "justify-items", "legacy center"); |
314 | 319 |
315 debug(""); | 320 debug(""); |
316 debug("Test the value 'legacy'"); | 321 debug("Test the value 'legacy'"); |
317 checkLegacyValues("justifyItems", "justify-items", "legacy left"); | 322 checkLegacyValues("justifyItems", "justify-items", "legacy left"); |
318 checkLegacyValues("justifyItems", "justify-items", "legacy center"); | 323 checkLegacyValues("justifyItems", "justify-items", "legacy center"); |
319 checkLegacyValues("justifyItems", "justify-items", "legacy right"); | 324 checkLegacyValues("justifyItems", "justify-items", "legacy right"); |
320 | 325 |
321 </script> | 326 </script> |
322 </body> | 327 </body> |
323 </html> | 328 </html> |
OLD | NEW |