| 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 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 43 } | 43 } |
| 44 | 44 |
| 45 #justifyItemsFlexStart { | 45 #justifyItemsFlexStart { |
| 46 justify-items: flex-start; | 46 justify-items: flex-start; |
| 47 } | 47 } |
| 48 | 48 |
| 49 #justifyItemsFlexEnd { | 49 #justifyItemsFlexEnd { |
| 50 justify-items: flex-end; | 50 justify-items: flex-end; |
| 51 } | 51 } |
| 52 | 52 |
| 53 #justifyItemsEndTrue { | 53 #justifyItemsEndUnsafe { |
| 54 justify-items: end true; | 54 justify-items: end unsafe; |
| 55 } | 55 } |
| 56 | 56 |
| 57 #justifyItemsCenterTrue { | 57 #justifyItemsCenterUnsafe { |
| 58 justify-items: center true; | 58 justify-items: center unsafe; |
| 59 } | 59 } |
| 60 | 60 |
| 61 #justifyItemsSelfEndSafe { | 61 #justifyItemsSelfEndSafe { |
| 62 justify-items: self-end safe; | 62 justify-items: self-end safe; |
| 63 } | 63 } |
| 64 | 64 |
| 65 #justifyItemsSelfStartSafe { | 65 #justifyItemsSelfStartSafe { |
| 66 justify-items: self-start safe; | 66 justify-items: self-start safe; |
| 67 } | 67 } |
| 68 | 68 |
| 69 #justifyItemsRightSafe { | 69 #justifyItemsRightSafe { |
| 70 justify-items: right safe; | 70 justify-items: right safe; |
| 71 } | 71 } |
| 72 | 72 |
| 73 #justifyItemsLeftTrue { | 73 #justifyItemsLeftUnsafe { |
| 74 justify-items: left true; | 74 justify-items: left unsafe; |
| 75 } | 75 } |
| 76 | 76 |
| 77 #justifyItemsFlexStartTrue { | 77 #justifyItemsFlexStartUnsafe { |
| 78 justify-items: flex-start true; | 78 justify-items: flex-start unsafe; |
| 79 } | 79 } |
| 80 | 80 |
| 81 #justifyItemsFlexEndSafe { | 81 #justifyItemsFlexEndSafe { |
| 82 justify-items: flex-end safe; | 82 justify-items: flex-end safe; |
| 83 } | 83 } |
| 84 | 84 |
| 85 #justifyItemsLegacyLeft { | 85 #justifyItemsLegacyLeft { |
| 86 justify-items: legacy left; | 86 justify-items: legacy left; |
| 87 } | 87 } |
| 88 | 88 |
| (...skipping 26 matching lines...) Expand all Loading... |
| 115 <div id="justifyItemsStart"></div> | 115 <div id="justifyItemsStart"></div> |
| 116 <div id="justifyItemsEnd"></div> | 116 <div id="justifyItemsEnd"></div> |
| 117 <div id="justifyItemsCenter"></div> | 117 <div id="justifyItemsCenter"></div> |
| 118 <div id="justifyItemsSelfStart"></div> | 118 <div id="justifyItemsSelfStart"></div> |
| 119 <div id="justifyItemsSelfEnd"></div> | 119 <div id="justifyItemsSelfEnd"></div> |
| 120 <div id="justifyItemsLeft"></div> | 120 <div id="justifyItemsLeft"></div> |
| 121 <div id="justifyItemsRight"></div> | 121 <div id="justifyItemsRight"></div> |
| 122 <div id="justifyItemsFlexStart"></div> | 122 <div id="justifyItemsFlexStart"></div> |
| 123 <div id="justifyItemsFlexEnd"></div> | 123 <div id="justifyItemsFlexEnd"></div> |
| 124 | 124 |
| 125 <div id="justifyItemsEndTrue"></div> | 125 <div id="justifyItemsEndUnsafe"></div> |
| 126 <div id="justifyItemsCenterTrue"></div> | 126 <div id="justifyItemsCenterUnsafe"></div> |
| 127 <div id="justifyItemsSelfEndSafe"></div> | 127 <div id="justifyItemsSelfEndSafe"></div> |
| 128 <div id="justifyItemsSelfStartSafe"></div> | 128 <div id="justifyItemsSelfStartSafe"></div> |
| 129 <div id="justifyItemsRightSafe"></div> | 129 <div id="justifyItemsRightSafe"></div> |
| 130 <div id="justifyItemsLeftTrue"></div> | 130 <div id="justifyItemsLeftUnsafe"></div> |
| 131 <div id="justifyItemsFlexStartTrue"></div> | 131 <div id="justifyItemsFlexStartUnsafe"></div> |
| 132 <div id="justifyItemsFlexEndSafe"></div> | 132 <div id="justifyItemsFlexEndSafe"></div> |
| 133 <div id="justifyItemsLegacyLeft"></div> | 133 <div id="justifyItemsLegacyLeft"></div> |
| 134 <div id="justifyItemsLegacyCenter"></div> | 134 <div id="justifyItemsLegacyCenter"></div> |
| 135 <div id="justifyItemsLegacyRight"></div> | 135 <div id="justifyItemsLegacyRight"></div> |
| 136 <div id="justifyItemsLeftLegacy"></div> | 136 <div id="justifyItemsLeftLegacy"></div> |
| 137 <div id="justifyItemsCenterLegacy"></div> | 137 <div id="justifyItemsCenterLegacy"></div> |
| 138 <div id="justifyItemsRightLegacy"></div> | 138 <div id="justifyItemsRightLegacy"></div> |
| 139 <script src="resources/alignment-parsing-utils.js"></script> | 139 <script src="resources/alignment-parsing-utils.js"></script> |
| 140 <script> | 140 <script> |
| 141 description('Test that setting and getting justify-items works as expected'); | 141 description('Test that setting and getting justify-items works as expected'); |
| (...skipping 28 matching lines...) Expand all Loading... |
| 170 | 170 |
| 171 var justifyItemsRight = document.getElementById("justifyItemsRight"); | 171 var justifyItemsRight = document.getElementById("justifyItemsRight"); |
| 172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item
s')", "'right'"); | 172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item
s')", "'right'"); |
| 173 | 173 |
| 174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); | 174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); |
| 175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-
items')", "'flex-start'"); | 175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-
items')", "'flex-start'"); |
| 176 | 176 |
| 177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); | 177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); |
| 178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-it
ems')", "'flex-end'"); | 178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-it
ems')", "'flex-end'"); |
| 179 | 179 |
| 180 var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue"); | 180 var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe"); |
| 181 shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-it
ems')", "'end true'"); | 181 shouldBe("getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-
items')", "'end unsafe'"); |
| 182 | 182 |
| 183 var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue"); | 183 var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe
"); |
| 184 shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify
-items')", "'center true'"); | 184 shouldBe("getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justi
fy-items')", "'center unsafe'"); |
| 185 | 185 |
| 186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe")
; | 186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe")
; |
| 187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justif
y-items')", "'self-end safe'"); | 187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justif
y-items')", "'self-end safe'"); |
| 188 | 188 |
| 189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSa
fe"); | 189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSa
fe"); |
| 190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('just
ify-items')", "'self-start safe'"); | 190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('just
ify-items')", "'self-start safe'"); |
| 191 | 191 |
| 192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe"); | 192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe"); |
| 193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-
items')", "'right safe'"); | 193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-
items')", "'right safe'"); |
| 194 | 194 |
| 195 var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue"); | 195 var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe"); |
| 196 shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-i
tems')", "'left true'"); | 196 shouldBe("getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify
-items')", "'left unsafe'"); |
| 197 | 197 |
| 198 var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTr
ue"); | 198 var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStart
Unsafe"); |
| 199 shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('just
ify-items')", "'flex-start true'"); | 199 shouldBe("getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('ju
stify-items')", "'flex-start unsafe'"); |
| 200 | 200 |
| 201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe")
; | 201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe")
; |
| 202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justif
y-items')", "'flex-end safe'"); | 202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justif
y-items')", "'flex-end safe'"); |
| 203 | 203 |
| 204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); | 204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); |
| 205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify
-items')", "'legacy left'"); | 205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify
-items')", "'legacy left'"); |
| 206 | 206 |
| 207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter
"); | 207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter
"); |
| 208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi
fy-items')", "'legacy center'"); | 208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi
fy-items')", "'legacy center'"); |
| 209 | 209 |
| (...skipping 15 matching lines...) Expand all Loading... |
| 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')", "'st
art'"); |
| 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 = "true start"; | 235 element.style.justifyItems = "unsafe start"; |
| 236 checkValues(element, "justifyItems", "justify-items", "start true", "start true
"); | 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 |
| (...skipping 12 matching lines...) Expand all Loading... |
| 259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); | 259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); |
| 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 bad combinations of justify-items"); | 265 debug("Test bad combinations of justify-items"); |
| 266 element = document.createElement("div"); | 266 element = document.createElement("div"); |
| 267 document.body.appendChild(element); | 267 document.body.appendChild(element); |
| 268 | 268 |
| 269 checkBadValues(element, "justifyItems", "justify-items", "true auto"); | 269 checkBadValues(element, "justifyItems", "justify-items", "unsafe auto"); |
| 270 checkBadValues(element, "justifyItems", "justify-items", "auto safe"); | 270 checkBadValues(element, "justifyItems", "justify-items", "auto safe"); |
| 271 checkBadValues(element, "justifyItems", "justify-items", "auto left"); | 271 checkBadValues(element, "justifyItems", "justify-items", "auto left"); |
| 272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); | 272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
| 273 checkBadValues(element, "justifyItems", "justify-items", "baseline center"); | 273 checkBadValues(element, "justifyItems", "justify-items", "baseline center"); |
| 274 checkBadValues(element, "justifyItems", "justify-items", "stretch true"); | 274 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
| 275 checkBadValues(element, "justifyItems", "justify-items", "stretch right"); | 275 checkBadValues(element, "justifyItems", "justify-items", "stretch right"); |
| 276 checkBadValues(element, "justifyItems", "justify-items", "true true"); | 276 checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe"); |
| 277 checkBadValues(element, "justifyItems", "justify-items", "true safe"); | 277 checkBadValues(element, "justifyItems", "justify-items", "unsafe safe"); |
| 278 checkBadValues(element, "justifyItems", "justify-items", "center start"); | 278 checkBadValues(element, "justifyItems", "justify-items", "center start"); |
| 279 checkBadValues(element, "justifyItems", "justify-items", "stretch true"); | 279 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
| 280 checkBadValues(element, "justifyItems", "justify-items", "safe stretch"); | 280 checkBadValues(element, "justifyItems", "justify-items", "safe stretch"); |
| 281 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); | 281 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
| 282 checkBadValues(element, "justifyItems", "justify-items", "true baseline"); | 282 checkBadValues(element, "justifyItems", "justify-items", "unsafe baseline"); |
| 283 checkBadValues(element, "justifyItems", "justify-items", "true safe left"); | 283 checkBadValues(element, "justifyItems", "justify-items", "unsafe safe left"); |
| 284 checkBadValues(element, "justifyItems", "justify-items", "true left safe"); | 284 checkBadValues(element, "justifyItems", "justify-items", "unsafe left safe"); |
| 285 checkBadValues(element, "justifyItems", "justify-items", "left safe true safe")
; | 285 checkBadValues(element, "justifyItems", "justify-items", "left safe unsafe safe
"); |
| 286 checkBadValues(element, "justifyItems", "justify-items", "legacy start"); | 286 checkBadValues(element, "justifyItems", "justify-items", "legacy start"); |
| 287 checkBadValues(element, "justifyItems", "justify-items", "legacy end"); | 287 checkBadValues(element, "justifyItems", "justify-items", "legacy end"); |
| 288 checkBadValues(element, "justifyItems", "justify-items", "legacy right true"); | 288 checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe")
; |
| 289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); | 289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); |
| 290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); | 290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); |
| 291 checkBadValues(element, "justifyItems", "justify-items", "legacy"); | 291 checkBadValues(element, "justifyItems", "justify-items", "legacy"); |
| 292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); | 292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); |
| 293 | 293 |
| 294 debug(""); | 294 debug(""); |
| 295 debug("Test the value 'initial'"); | 295 debug("Test the value 'initial'"); |
| 296 element.style.display = ""; | 296 element.style.display = ""; |
| 297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "s
tart"); | 297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "s
tart"); |
| 298 | 298 |
| 299 debug(""); | 299 debug(""); |
| 300 debug("Test the value 'initial' for grid containers"); | 300 debug("Test the value 'initial' for grid containers"); |
| 301 element.style.display = "grid"; | 301 element.style.display = "grid"; |
| 302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stret
ch"); | 302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stret
ch"); |
| 303 | 303 |
| 304 debug(""); | 304 debug(""); |
| 305 debug("Test the value 'initial' for flex containers"); | 305 debug("Test the value 'initial' for flex containers"); |
| 306 element.style.display = "flex"; | 306 element.style.display = "flex"; |
| 307 checkInitialValues(element, "justifyItems", "justify-items", "right true", "stre
tch"); | 307 checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "st
retch"); |
| 308 | 308 |
| 309 debug(""); | 309 debug(""); |
| 310 debug("Test the value 'inherit'"); | 310 debug("Test the value 'inherit'"); |
| 311 checkInheritValues("justifyItems", "justify-items", "end"); | 311 checkInheritValues("justifyItems", "justify-items", "end"); |
| 312 checkInheritValues("justifyItems", "justify-items", "left safe"); | 312 checkInheritValues("justifyItems", "justify-items", "left safe"); |
| 313 checkInheritValues("justifyItems", "justify-items", "legacy center"); | 313 checkInheritValues("justifyItems", "justify-items", "legacy center"); |
| 314 | 314 |
| 315 debug(""); | 315 debug(""); |
| 316 debug("Test the value 'legacy'"); | 316 debug("Test the value 'legacy'"); |
| 317 checkLegacyValues("justifyItems", "justify-items", "legacy left"); | 317 checkLegacyValues("justifyItems", "justify-items", "legacy left"); |
| 318 checkLegacyValues("justifyItems", "justify-items", "legacy center"); | 318 checkLegacyValues("justifyItems", "justify-items", "legacy center"); |
| 319 checkLegacyValues("justifyItems", "justify-items", "legacy right"); | 319 checkLegacyValues("justifyItems", "justify-items", "legacy right"); |
| 320 | 320 |
| 321 </script> | 321 </script> |
| 322 </body> | 322 </body> |
| 323 </html> | 323 </html> |
| OLD | NEW |