| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 #alignContentAuto { | 5 #alignContentAuto { |
| 6 align-content: auto; | 6 align-content: auto; |
| 7 } | 7 } |
| 8 | 8 |
| 9 #alignContentBaseline { | 9 #alignContentBaseline { |
| 10 align-content: baseline; | 10 align-content: baseline; |
| (...skipping 155 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 166 <div id="alignContentSafe"></div> | 166 <div id="alignContentSafe"></div> |
| 167 <div id="alignContentRightSafeUnsafe"></div> | 167 <div id="alignContentRightSafeUnsafe"></div> |
| 168 <div id="alignContentCenterLeft"></div> | 168 <div id="alignContentCenterLeft"></div> |
| 169 | 169 |
| 170 <script src="resources/alignment-parsing-utils.js"></script> | 170 <script src="resources/alignment-parsing-utils.js"></script> |
| 171 <script> | 171 <script> |
| 172 description('Test that setting and getting align-content works as expected'); | 172 description('Test that setting and getting align-content works as expected'); |
| 173 | 173 |
| 174 debug("Test getting align-content set through CSS"); | 174 debug("Test getting align-content set through CSS"); |
| 175 var alignContentAuto = document.getElementById("alignContentAuto"); | 175 var alignContentAuto = document.getElementById("alignContentAuto"); |
| 176 shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('
align-content')", "start"); | 176 shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('
align-content')", "normal"); |
| 177 | 177 |
| 178 var alignContentBaseline = document.getElementById("alignContentBaseline"); | 178 var alignContentBaseline = document.getElementById("alignContentBaseline"); |
| 179 shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyVal
ue('align-content')", "baseline"); | 179 shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyVal
ue('align-content')", "baseline"); |
| 180 | 180 |
| 181 var alignContentLastBaseline = document.getElementById("alignContentLastBaseline
"); | 181 var alignContentLastBaseline = document.getElementById("alignContentLastBaseline
"); |
| 182 shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropert
yValue('align-content')", "last-baseline"); | 182 shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropert
yValue('align-content')", "last-baseline"); |
| 183 | 183 |
| 184 var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween
"); | 184 var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween
"); |
| 185 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropert
yValue('align-content')", "space-between"); | 185 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropert
yValue('align-content')", "space-between"); |
| 186 | 186 |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 244 var alignContentStretchStartSafe = document.getElementById("alignContentStretchS
tartSafe"); | 244 var alignContentStretchStartSafe = document.getElementById("alignContentStretchS
tartSafe"); |
| 245 shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPro
pertyValue('align-content')", "stretch start safe"); | 245 shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPro
pertyValue('align-content')", "stretch start safe"); |
| 246 | 246 |
| 247 var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpac
eAroundEndUnsafe"); | 247 var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpac
eAroundEndUnsafe"); |
| 248 shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndUnsafe, '').ge
tPropertyValue('align-content')", "space-around end unsafe"); | 248 shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndUnsafe, '').ge
tPropertyValue('align-content')", "space-around end unsafe"); |
| 249 | 249 |
| 250 var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContent
SpaceEvenlyFlexStartSafe"); | 250 var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContent
SpaceEvenlyFlexStartSafe"); |
| 251 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, ''
).getPropertyValue('align-content')", "space-evenly flex-start safe"); | 251 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, ''
).getPropertyValue('align-content')", "space-evenly flex-start safe"); |
| 252 | 252 |
| 253 var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBet
weenSafe"); | 253 var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBet
weenSafe"); |
| 254 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPro
pertyValue('align-content')", "start"); | 254 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPro
pertyValue('align-content')", "normal"); |
| 255 | 255 |
| 256 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBe
tweenStretch"); | 256 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBe
tweenStretch"); |
| 257 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').get
PropertyValue('align-content')", "start"); | 257 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').get
PropertyValue('align-content')", "normal"); |
| 258 | 258 |
| 259 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe"); | 259 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe"); |
| 260 shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('
align-content')", "start"); | 260 shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('
align-content')", "normal"); |
| 261 | 261 |
| 262 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSa
feUnsafe"); | 262 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSa
feUnsafe"); |
| 263 shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getProp
ertyValue('align-content')", "start"); | 263 shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getProp
ertyValue('align-content')", "normal"); |
| 264 | 264 |
| 265 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterL
eft"); | 265 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterL
eft"); |
| 266 shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyV
alue('align-content')", "start"); | 266 shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyV
alue('align-content')", "normal"); |
| 267 | 267 |
| 268 debug(""); | 268 debug(""); |
| 269 debug("Test initial value of align-content through JS"); | 269 debug("Test initial value of align-content through JS"); |
| 270 element = document.createElement("div"); | 270 element = document.createElement("div"); |
| 271 document.body.appendChild(element); | 271 document.body.appendChild(element); |
| 272 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-con
tent')", "start"); | 272 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-con
tent')", "normal"); |
| 273 | 273 |
| 274 debug(""); | 274 debug(""); |
| 275 debug("Test getting and setting align-content through JS"); | 275 debug("Test getting and setting align-content through JS"); |
| 276 element = document.createElement("div"); | 276 element = document.createElement("div"); |
| 277 document.body.appendChild(element); | 277 document.body.appendChild(element); |
| 278 element.style.alignContent = "center"; | 278 element.style.alignContent = "center"; |
| 279 checkValues(element, "alignContent", "align-content", "center", "center"); | 279 checkValues(element, "alignContent", "align-content", "center", "center"); |
| 280 | 280 |
| 281 element.style.alignContent = "unsafe start"; | 281 element.style.alignContent = "unsafe start"; |
| 282 checkValues(element, "alignContent", "align-content", "start unsafe", "start un
safe"); | 282 checkValues(element, "alignContent", "align-content", "start unsafe", "start un
safe"); |
| 283 | 283 |
| 284 element.style.alignContent = "flex-end safe"; | 284 element.style.alignContent = "flex-end safe"; |
| 285 checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-en
d safe"); | 285 checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-en
d safe"); |
| 286 | 286 |
| 287 element.style.alignContent = "space-between right safe"; | 287 element.style.alignContent = "space-between right safe"; |
| 288 checkValues(element, "alignContent", "align-content", "space-between right safe
", "space-between right safe"); | 288 checkValues(element, "alignContent", "align-content", "space-between right safe
", "space-between right safe"); |
| 289 | 289 |
| 290 element.style.alignContent = "stretch center"; | 290 element.style.alignContent = "stretch center"; |
| 291 checkValues(element, "alignContent", "align-content", "stretch center", "stretc
h center"); | 291 checkValues(element, "alignContent", "align-content", "stretch center", "stretc
h center"); |
| 292 | 292 |
| 293 element.style.alignContent = "right unsafe"; | 293 element.style.alignContent = "right unsafe"; |
| 294 checkValues(element, "alignContent", "align-content", "right unsafe", "right un
safe"); | 294 checkValues(element, "alignContent", "align-content", "right unsafe", "right un
safe"); |
| 295 | 295 |
| 296 element.style.alignContent = "auto"; | 296 element.style.alignContent = "normal"; |
| 297 checkValues(element, "alignContent", "align-content", "auto", "start"); | 297 checkValues(element, "alignContent", "align-content", "normal", "normal"); |
| 298 | 298 |
| 299 element.style.display = "flex"; | 299 element.style.display = "flex"; |
| 300 element.style.alignContent = "auto"; | 300 element.style.alignContent = "normal"; |
| 301 checkValues(element, "alignContent", "align-content", "auto", "stretch"); | 301 checkValues(element, "alignContent", "align-content", "normal", "normal"); |
| 302 | 302 |
| 303 element.style.display = "grid"; | 303 element.style.display = "grid"; |
| 304 element.style.alignContent = "auto"; | 304 element.style.alignContent = "normal"; |
| 305 checkValues(element, "alignContent", "align-content", "auto", "start"); | 305 checkValues(element, "alignContent", "align-content", "normal", "normal"); |
| 306 | 306 |
| 307 element.style.alignContent = "flex-end"; | 307 element.style.alignContent = "flex-end"; |
| 308 checkValues(element, "alignContent", "align-content", "flex-end", "flex-end"); | 308 checkValues(element, "alignContent", "align-content", "flex-end", "flex-end"); |
| 309 | 309 |
| 310 debug(""); | 310 debug(""); |
| 311 debug("Test bad combinations of align-content"); | 311 debug("Test bad combinations of align-content"); |
| 312 element = document.createElement("div"); | 312 element = document.createElement("div"); |
| 313 document.body.appendChild(element); | 313 document.body.appendChild(element); |
| 314 | 314 |
| 315 checkBadValues(element, "alignContent", "align-content", ""); | 315 checkBadValues(element, "alignContent", "align-content", ""); |
| 316 checkBadValues(element, "alignContent", "align-content", "auto"); |
| 316 checkBadValues(element, "alignContent", "align-content", "unsafe auto"); | 317 checkBadValues(element, "alignContent", "align-content", "unsafe auto"); |
| 317 checkBadValues(element, "alignContent", "align-content", "auto safe"); | 318 checkBadValues(element, "alignContent", "align-content", "auto safe"); |
| 318 checkBadValues(element, "alignContent", "align-content", "auto left"); | 319 checkBadValues(element, "alignContent", "align-content", "auto left"); |
| 319 checkBadValues(element, "alignContent", "align-content", "baseline safe"); | 320 checkBadValues(element, "alignContent", "align-content", "baseline safe"); |
| 320 checkBadValues(element, "alignContent", "align-content", "last baseline center"
); | 321 checkBadValues(element, "alignContent", "align-content", "last baseline center"
); |
| 321 checkBadValues(element, "alignContent", "align-content", "unsafe unsafe"); | 322 checkBadValues(element, "alignContent", "align-content", "unsafe unsafe"); |
| 322 checkBadValues(element, "alignContent", "align-content", "unsafe safe"); | 323 checkBadValues(element, "alignContent", "align-content", "unsafe safe"); |
| 323 checkBadValues(element, "alignContent", "align-content", "center start"); | 324 checkBadValues(element, "alignContent", "align-content", "center start"); |
| 324 checkBadValues(element, "alignContent", "align-content", "baseline safe"); | 325 checkBadValues(element, "alignContent", "align-content", "baseline safe"); |
| 325 checkBadValues(element, "alignContent", "align-content", "unsafe baseline"); | 326 checkBadValues(element, "alignContent", "align-content", "unsafe baseline"); |
| 326 checkBadValues(element, "alignContent", "align-content", "unsafe safe left"); | 327 checkBadValues(element, "alignContent", "align-content", "unsafe safe left"); |
| 327 checkBadValues(element, "alignContent", "align-content", "unsafe left safe"); | 328 checkBadValues(element, "alignContent", "align-content", "unsafe left safe"); |
| 328 checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe
"); | 329 checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe
"); |
| 329 checkBadValues(element, "alignContent", "align-content", "start right space-bet
ween"); | 330 checkBadValues(element, "alignContent", "align-content", "start right space-bet
ween"); |
| 330 checkBadValues(element, "alignContent", "align-content", "safe stretch"); | 331 checkBadValues(element, "alignContent", "align-content", "safe stretch"); |
| 331 checkBadValues(element, "alignContent", "align-content", "space-around stretch"
); | 332 checkBadValues(element, "alignContent", "align-content", "space-around stretch"
); |
| 332 checkBadValues(element, "alignContent", "align-content", "end space-between sta
rt"); | 333 checkBadValues(element, "alignContent", "align-content", "end space-between sta
rt"); |
| 333 checkBadValues(element, "alignContent", "align-content", "right safe left"); | 334 checkBadValues(element, "alignContent", "align-content", "right safe left"); |
| 334 checkBadValues(element, "alignContent", "align-content", "unsafe"); | 335 checkBadValues(element, "alignContent", "align-content", "unsafe"); |
| 335 checkBadValues(element, "alignContent", "align-content", "safe"); | 336 checkBadValues(element, "alignContent", "align-content", "safe"); |
| 336 | 337 |
| 337 debug(""); | 338 debug(""); |
| 338 debug("Test the value 'initial'"); | 339 debug("Test the value 'initial'"); |
| 339 element.style.display = ""; | 340 element.style.display = ""; |
| 340 checkInitialValues(element, "alignContent", "align-content", "stretch center", "
start"); | 341 checkInitialValues(element, "alignContent", "align-content", "stretch center", "
normal"); |
| 341 | 342 |
| 342 debug(""); | 343 debug(""); |
| 343 debug("Test the value 'initial' for grid containers"); | 344 debug("Test the value 'initial' for grid containers"); |
| 344 element.style.display = "grid"; | 345 element.style.display = "grid"; |
| 345 checkInitialValues(element, "alignContent", "align-content", "space-between left
", "start"); | 346 checkInitialValues(element, "alignContent", "align-content", "space-between left
", "normal"); |
| 346 | 347 |
| 347 debug(""); | 348 debug(""); |
| 348 debug("Test the value 'initial' for flex containers"); | 349 debug("Test the value 'initial' for flex containers"); |
| 349 element.style.display = "flex"; | 350 element.style.display = "flex"; |
| 350 checkInitialValues(element, "alignContent", "align-content", "right unsafe", "st
retch"); | 351 checkInitialValues(element, "alignContent", "align-content", "right unsafe", "no
rmal"); |
| 351 | 352 |
| 352 debug(""); | 353 debug(""); |
| 353 debug("Test the value 'inherit'"); | 354 debug("Test the value 'inherit'"); |
| 354 checkInheritValues("alignContent", "align-content", "end"); | 355 checkInheritValues("alignContent", "align-content", "end"); |
| 355 checkInheritValues("alignContent", "align-content", "left safe"); | 356 checkInheritValues("alignContent", "align-content", "left safe"); |
| 356 checkInheritValues("alignContent", "align-content", "stretch center"); | 357 checkInheritValues("alignContent", "align-content", "stretch center"); |
| 357 | 358 |
| 358 </script> | 359 </script> |
| 359 </body> | 360 </body> |
| 360 </html> | 361 </html> |
| OLD | NEW |