| 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 |