| 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 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 43 } | 43 } |
| 44 | 44 |
| 45 #alignItemsFlexStart { | 45 #alignItemsFlexStart { |
| 46 align-items: flex-start; | 46 align-items: flex-start; |
| 47 } | 47 } |
| 48 | 48 |
| 49 #alignItemsFlexEnd { | 49 #alignItemsFlexEnd { |
| 50 align-items: flex-end; | 50 align-items: flex-end; |
| 51 } | 51 } |
| 52 | 52 |
| 53 #alignItemsEndTrue { | 53 #alignItemsEndUnsafe { |
| 54 align-items: end true; | 54 align-items: end unsafe; |
| 55 } | 55 } |
| 56 | 56 |
| 57 #alignItemsCenterTrue { | 57 #alignItemsCenterUnsafe { |
| 58 align-items: center true; | 58 align-items: center unsafe; |
| 59 } | 59 } |
| 60 | 60 |
| 61 #alignItemsSelfEndSafe { | 61 #alignItemsSelfEndSafe { |
| 62 align-items: self-end safe; | 62 align-items: self-end safe; |
| 63 } | 63 } |
| 64 | 64 |
| 65 #alignItemsSelfStartSafe { | 65 #alignItemsSelfStartSafe { |
| 66 align-items: self-start safe; | 66 align-items: self-start safe; |
| 67 } | 67 } |
| 68 | 68 |
| 69 #alignItemsRightSafe { | 69 #alignItemsRightSafe { |
| 70 align-items: right safe; | 70 align-items: right safe; |
| 71 } | 71 } |
| 72 | 72 |
| 73 #alignItemsLeftTrue { | 73 #alignItemsLeftUnsafe { |
| 74 align-items: left true; | 74 align-items: left unsafe; |
| 75 } | 75 } |
| 76 | 76 |
| 77 #alignItemsFlexStartTrue { | 77 #alignItemsFlexStartUnsafe { |
| 78 align-items: flex-start true; | 78 align-items: flex-start unsafe; |
| 79 } | 79 } |
| 80 | 80 |
| 81 #alignItemsFlexEndSafe { | 81 #alignItemsFlexEndSafe { |
| 82 align-items: flex-end safe; | 82 align-items: flex-end safe; |
| 83 } | 83 } |
| 84 | 84 |
| 85 </style> | 85 </style> |
| 86 <script src="../../resources/js-test.js"></script> | 86 <script src="../../resources/js-test.js"></script> |
| 87 </head> | 87 </head> |
| 88 <body> | 88 <body> |
| 89 <div id="alignItemsBaseline"></div> | 89 <div id="alignItemsBaseline"></div> |
| 90 <div id="alignItemsLastBaseline"></div> | 90 <div id="alignItemsLastBaseline"></div> |
| 91 <div id="alignItemsStretch"></div> | 91 <div id="alignItemsStretch"></div> |
| 92 <div id="alignItemsStart"></div> | 92 <div id="alignItemsStart"></div> |
| 93 <div id="alignItemsEnd"></div> | 93 <div id="alignItemsEnd"></div> |
| 94 <div id="alignItemsCenter"></div> | 94 <div id="alignItemsCenter"></div> |
| 95 <div id="alignItemsSelfStart"></div> | 95 <div id="alignItemsSelfStart"></div> |
| 96 <div id="alignItemsSelfEnd"></div> | 96 <div id="alignItemsSelfEnd"></div> |
| 97 <div id="alignItemsLeft"></div> | 97 <div id="alignItemsLeft"></div> |
| 98 <div id="alignItemsRight"></div> | 98 <div id="alignItemsRight"></div> |
| 99 <div id="alignItemsFlexStart"></div> | 99 <div id="alignItemsFlexStart"></div> |
| 100 <div id="alignItemsFlexEnd"></div> | 100 <div id="alignItemsFlexEnd"></div> |
| 101 | 101 |
| 102 <div id="alignItemsEndTrue"></div> | 102 <div id="alignItemsEndUnsafe"></div> |
| 103 <div id="alignItemsCenterTrue"></div> | 103 <div id="alignItemsCenterUnsafe"></div> |
| 104 <div id="alignItemsSelfEndSafe"></div> | 104 <div id="alignItemsSelfEndSafe"></div> |
| 105 <div id="alignItemsSelfStartSafe"></div> | 105 <div id="alignItemsSelfStartSafe"></div> |
| 106 <div id="alignItemsRightSafe"></div> | 106 <div id="alignItemsRightSafe"></div> |
| 107 <div id="alignItemsLeftTrue"></div> | 107 <div id="alignItemsLeftUnsafe"></div> |
| 108 <div id="alignItemsFlexStartTrue"></div> | 108 <div id="alignItemsFlexStartUnsafe"></div> |
| 109 <div id="alignItemsFlexEndSafe"></div> | 109 <div id="alignItemsFlexEndSafe"></div> |
| 110 <script src="resources/alignment-parsing-utils.js"></script> | 110 <script src="resources/alignment-parsing-utils.js"></script> |
| 111 <script> | 111 <script> |
| 112 description('Test that setting and getting align-items works as expected'); | 112 description('Test that setting and getting align-items works as expected'); |
| 113 | 113 |
| 114 debug("Test getting align-items set through CSS"); | 114 debug("Test getting align-items set through CSS"); |
| 115 var alignItemsBaseline = document.getElementById("alignItemsBaseline"); | 115 var alignItemsBaseline = document.getElementById("alignItemsBaseline"); |
| 116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items
')", "'baseline'"); | 116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items
')", "'baseline'"); |
| 117 | 117 |
| 118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline"); | 118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline"); |
| (...skipping 22 matching lines...) Expand all Loading... |
| 141 | 141 |
| 142 var alignItemsRight = document.getElementById("alignItemsRight"); | 142 var alignItemsRight = document.getElementById("alignItemsRight"); |
| 143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')"
, "'right'"); | 143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')"
, "'right'"); |
| 144 | 144 |
| 145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart"); | 145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart"); |
| 146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-item
s')", "'flex-start'"); | 146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-item
s')", "'flex-start'"); |
| 147 | 147 |
| 148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd"); | 148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd"); |
| 149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items'
)", "'flex-end'"); | 149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items'
)", "'flex-end'"); |
| 150 | 150 |
| 151 var alignItemsEndTrue = document.getElementById("alignItemsEndTrue"); | 151 var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe"); |
| 152 shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('align-items'
)", "'end true'"); | 152 shouldBe("getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('align-item
s')", "'end unsafe'"); |
| 153 | 153 |
| 154 var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue"); | 154 var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe"); |
| 155 shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('align-ite
ms')", "'center true'"); | 155 shouldBe("getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('align-i
tems')", "'center unsafe'"); |
| 156 | 156 |
| 157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe"); | 157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe"); |
| 158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-it
ems')", "'self-end safe'"); | 158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-it
ems')", "'self-end safe'"); |
| 159 | 159 |
| 160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe")
; | 160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe")
; |
| 161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align-
items')", "'self-start safe'"); | 161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align-
items')", "'self-start safe'"); |
| 162 | 162 |
| 163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe"); | 163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe"); |
| 164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item
s')", "'right safe'"); | 164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item
s')", "'right safe'"); |
| 165 | 165 |
| 166 var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue"); | 166 var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe"); |
| 167 shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('align-items
')", "'left true'"); | 167 shouldBe("getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('align-ite
ms')", "'left unsafe'"); |
| 168 | 168 |
| 169 var alignItemsFlexStartTrue = document.getElementById("alignItemsFlexStartTrue")
; | 169 var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsa
fe"); |
| 170 shouldBe("getComputedStyle(alignItemsFlexStartTrue, '').getPropertyValue('align-
items')", "'flex-start true'"); | 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')", "'star
t'"); |
| 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 = "true start"; | 188 element.style.alignItems = "unsafe start"; |
| 189 checkValues(element, "alignItems", "align-items", "start true", "start true"); | 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 |
| (...skipping 12 matching lines...) Expand all Loading... |
| 212 checkValues(element, "alignItems", "align-items", "auto", "stretch"); | 212 checkValues(element, "alignItems", "align-items", "auto", "stretch"); |
| 213 | 213 |
| 214 element.style.alignItems = "self-end"; | 214 element.style.alignItems = "self-end"; |
| 215 checkValues(element, "alignItems", "align-items", "self-end", "self-end"); | 215 checkValues(element, "alignItems", "align-items", "self-end", "self-end"); |
| 216 | 216 |
| 217 debug(""); | 217 debug(""); |
| 218 debug("Test bad combinations of align-items"); | 218 debug("Test bad combinations of align-items"); |
| 219 element = document.createElement("div"); | 219 element = document.createElement("div"); |
| 220 document.body.appendChild(element); | 220 document.body.appendChild(element); |
| 221 | 221 |
| 222 checkBadValues(element, "alignItems", "align-items", "true auto"); | 222 checkBadValues(element, "alignItems", "align-items", "unsafe auto"); |
| 223 checkBadValues(element, "alignItems", "align-items", "auto safe"); | 223 checkBadValues(element, "alignItems", "align-items", "auto safe"); |
| 224 checkBadValues(element, "alignItems", "align-items", "auto left"); | 224 checkBadValues(element, "alignItems", "align-items", "auto left"); |
| 225 checkBadValues(element, "alignItems", "align-items", "baseline safe"); | 225 checkBadValues(element, "alignItems", "align-items", "baseline safe"); |
| 226 checkBadValues(element, "alignItems", "align-items", "baseline center"); | 226 checkBadValues(element, "alignItems", "align-items", "baseline center"); |
| 227 checkBadValues(element, "alignItems", "align-items", "stretch true"); | 227 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
| 228 checkBadValues(element, "alignItems", "align-items", "stretch right"); | 228 checkBadValues(element, "alignItems", "align-items", "stretch right"); |
| 229 checkBadValues(element, "alignItems", "align-items", "true true"); | 229 checkBadValues(element, "alignItems", "align-items", "unsafe unsafe"); |
| 230 checkBadValues(element, "alignItems", "align-items", "true safe"); | 230 checkBadValues(element, "alignItems", "align-items", "unsafe safe"); |
| 231 checkBadValues(element, "alignItems", "align-items", "center start"); | 231 checkBadValues(element, "alignItems", "align-items", "center start"); |
| 232 checkBadValues(element, "alignItems", "align-items", "stretch true"); | 232 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
| 233 checkBadValues(element, "alignItems", "align-items", "safe stretch"); | 233 checkBadValues(element, "alignItems", "align-items", "safe stretch"); |
| 234 checkBadValues(element, "alignItems", "align-items", "baseline safe"); | 234 checkBadValues(element, "alignItems", "align-items", "baseline safe"); |
| 235 checkBadValues(element, "alignItems", "align-items", "true baseline"); | 235 checkBadValues(element, "alignItems", "align-items", "unsafe baseline"); |
| 236 checkBadValues(element, "alignItems", "align-items", "true safe left"); | 236 checkBadValues(element, "alignItems", "align-items", "unsafe safe left"); |
| 237 checkBadValues(element, "alignItems", "align-items", "true left safe"); | 237 checkBadValues(element, "alignItems", "align-items", "unsafe left safe"); |
| 238 checkBadValues(element, "alignItems", "align-items", "left safe true safe"); | 238 checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe"); |
| 239 checkBadValues(element, "alignItems", "align-items", "legacy start"); | 239 checkBadValues(element, "alignItems", "align-items", "legacy start"); |
| 240 checkBadValues(element, "alignItems", "align-items", "legacy end"); | 240 checkBadValues(element, "alignItems", "align-items", "legacy end"); |
| 241 checkBadValues(element, "alignItems", "align-items", "legacy right true"); | 241 checkBadValues(element, "alignItems", "align-items", "legacy right unsafe"); |
| 242 checkBadValues(element, "alignItems", "align-items", "legacy auto"); | 242 checkBadValues(element, "alignItems", "align-items", "legacy auto"); |
| 243 checkBadValues(element, "alignItems", "align-items", "legacy stretch"); | 243 checkBadValues(element, "alignItems", "align-items", "legacy stretch"); |
| 244 checkBadValues(element, "alignItems", "align-items", "legacy"); | 244 checkBadValues(element, "alignItems", "align-items", "legacy"); |
| 245 checkBadValues(element, "alignItems", "align-items", "legacy left right"); | 245 checkBadValues(element, "alignItems", "align-items", "legacy left right"); |
| 246 | 246 |
| 247 debug(""); | 247 debug(""); |
| 248 debug("Test the value 'initial'"); | 248 debug("Test the value 'initial'"); |
| 249 element.style.display = ""; | 249 element.style.display = ""; |
| 250 checkInitialValues(element, "alignItems", "align-items", "center", "start"); | 250 checkInitialValues(element, "alignItems", "align-items", "center", "start"); |
| 251 | 251 |
| 252 debug(""); | 252 debug(""); |
| 253 debug("Test the value 'initial' for grid containers"); | 253 debug("Test the value 'initial' for grid containers"); |
| 254 element.style.display = "grid"; | 254 element.style.display = "grid"; |
| 255 checkInitialValues(element, "alignItems", "align-items", "left safe", "stretch")
; | 255 checkInitialValues(element, "alignItems", "align-items", "left safe", "stretch")
; |
| 256 | 256 |
| 257 debug(""); | 257 debug(""); |
| 258 debug("Test the value 'initial' for flex containers"); | 258 debug("Test the value 'initial' for flex containers"); |
| 259 element.style.display = "flex"; | 259 element.style.display = "flex"; |
| 260 checkInitialValues(element, "alignItems", "align-items", "right true", "stretch"
); | 260 checkInitialValues(element, "alignItems", "align-items", "right unsafe", "stretc
h"); |
| 261 | 261 |
| 262 debug(""); | 262 debug(""); |
| 263 debug("Test the value 'inherit'"); | 263 debug("Test the value 'inherit'"); |
| 264 checkInheritValues("alignItems", "align-items", "end"); | 264 checkInheritValues("alignItems", "align-items", "end"); |
| 265 checkInheritValues("alignItems", "align-items", "left safe"); | 265 checkInheritValues("alignItems", "align-items", "left safe"); |
| 266 checkInheritValues("alignItems", "align-items", "center true"); | 266 checkInheritValues("alignItems", "align-items", "center unsafe"); |
| 267 | 267 |
| 268 </script> | 268 </script> |
| 269 </body> | 269 </body> |
| 270 </html> | 270 </html> |
| OLD | NEW |