| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 #justifyContentAuto { | 5 #justifyContentAuto { |
| 6 justify-content: auto; | 6 justify-content: auto; |
| 7 } | 7 } |
| 8 | 8 |
| 9 #justifyContentBaseline { | 9 #justifyContentBaseline { |
| 10 justify-content: baseline; | 10 justify-content: baseline; |
| (...skipping 151 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 162 <div id="justifyContentSafe"></div> | 162 <div id="justifyContentSafe"></div> |
| 163 <div id="justifyContentRightSafeUnsafe"></div> | 163 <div id="justifyContentRightSafeUnsafe"></div> |
| 164 <div id="justifyContentCenterLeft"></div> | 164 <div id="justifyContentCenterLeft"></div> |
| 165 | 165 |
| 166 <script src="resources/alignment-parsing-utils.js"></script> | 166 <script src="resources/alignment-parsing-utils.js"></script> |
| 167 <script> | 167 <script> |
| 168 description('Test that setting and getting justify-content works as expected'); | 168 description('Test that setting and getting justify-content works as expected'); |
| 169 | 169 |
| 170 debug("Test getting justify-content set through CSS"); | 170 debug("Test getting justify-content set through CSS"); |
| 171 var justifyContentAuto = document.getElementById("justifyContentAuto"); | 171 var justifyContentAuto = document.getElementById("justifyContentAuto"); |
| 172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue
('justify-content')", "start"); | 172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue
('justify-content')", "normal"); |
| 173 | 173 |
| 174 var justifyContentBaseline = document.getElementById("justifyContentBaseline"); | 174 var justifyContentBaseline = document.getElementById("justifyContentBaseline"); |
| 175 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyV
alue('justify-content')", "baseline"); | 175 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyV
alue('justify-content')", "baseline"); |
| 176 | 176 |
| 177 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase
line"); | 177 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase
line"); |
| 178 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPrope
rtyValue('justify-content')", "last-baseline"); | 178 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPrope
rtyValue('justify-content')", "last-baseline"); |
| 179 | 179 |
| 180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet
ween"); | 180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet
ween"); |
| 181 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPrope
rtyValue('justify-content')", "space-between"); | 181 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPrope
rtyValue('justify-content')", "space-between"); |
| 182 | 182 |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 240 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre
tchStartSafe"); | 240 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre
tchStartSafe"); |
| 241 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getP
ropertyValue('justify-content')", "stretch start safe"); | 241 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getP
ropertyValue('justify-content')", "stretch start safe"); |
| 242 | 242 |
| 243 var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContent
SpaceAroundEndUnsafe"); | 243 var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContent
SpaceAroundEndUnsafe"); |
| 244 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').
getPropertyValue('justify-content')", "space-around end unsafe"); | 244 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').
getPropertyValue('justify-content')", "space-around end unsafe"); |
| 245 | 245 |
| 246 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon
tentSpaceEvenlyFlexStartSafe"); | 246 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon
tentSpaceEvenlyFlexStartSafe"); |
| 247 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe,
'').getPropertyValue('justify-content')", "space-evenly flex-start safe"); | 247 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe,
'').getPropertyValue('justify-content')", "space-evenly flex-start safe"); |
| 248 | 248 |
| 249 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac
eBetweenSafe"); | 249 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac
eBetweenSafe"); |
| 250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getP
ropertyValue('justify-content')", "start"); | 250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getP
ropertyValue('justify-content')", "normal"); |
| 251 | 251 |
| 252 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpa
ceBetweenStretch"); | 252 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpa
ceBetweenStretch"); |
| 253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').g
etPropertyValue('justify-content')", "start"); | 253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').g
etPropertyValue('justify-content')", "normal"); |
| 254 | 254 |
| 255 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSaf
e"); | 255 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSaf
e"); |
| 256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue
('justify-content')", "start"); | 256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue
('justify-content')", "normal"); |
| 257 | 257 |
| 258 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRig
htSafeUnsafe"); | 258 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRig
htSafeUnsafe"); |
| 259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPr
opertyValue('justify-content')", "start"); | 259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPr
opertyValue('justify-content')", "normal"); |
| 260 | 260 |
| 261 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCen
terLeft"); | 261 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCen
terLeft"); |
| 262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropert
yValue('justify-content')", "start"); | 262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropert
yValue('justify-content')", "normal"); |
| 263 | 263 |
| 264 debug(""); | 264 debug(""); |
| 265 debug("Test initial value of justify-content through JS"); | 265 debug("Test initial value of justify-content through JS"); |
| 266 element = document.createElement("div"); | 266 element = document.createElement("div"); |
| 267 document.body.appendChild(element); | 267 document.body.appendChild(element); |
| 268 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-c
ontent')", "start"); | 268 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-c
ontent')", "normal"); |
| 269 | 269 |
| 270 debug(""); | 270 debug(""); |
| 271 debug("Test getting and setting justify-content through JS"); | 271 debug("Test getting and setting justify-content through JS"); |
| 272 element = document.createElement("div"); | 272 element = document.createElement("div"); |
| 273 document.body.appendChild(element); | 273 document.body.appendChild(element); |
| 274 element.style.justifyContent = "center"; | 274 element.style.justifyContent = "center"; |
| 275 checkValues(element, "justifyContent", "justify-content", "center", "center"); | 275 checkValues(element, "justifyContent", "justify-content", "center", "center"); |
| 276 | 276 |
| 277 element.style.justifyContent = "unsafe start"; | 277 element.style.justifyContent = "unsafe start"; |
| 278 checkValues(element, "justifyContent", "justify-content", "start unsafe", "star
t unsafe"); | 278 checkValues(element, "justifyContent", "justify-content", "start unsafe", "star
t unsafe"); |
| 279 | 279 |
| 280 element.style.justifyContent = "flex-end safe"; | 280 element.style.justifyContent = "flex-end safe"; |
| 281 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle
x-end safe"); | 281 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle
x-end safe"); |
| 282 | 282 |
| 283 element.style.justifyContent = "space-between right safe"; | 283 element.style.justifyContent = "space-between right safe"; |
| 284 checkValues(element, "justifyContent", "justify-content", "space-between right
safe", "space-between right safe"); | 284 checkValues(element, "justifyContent", "justify-content", "space-between right
safe", "space-between right safe"); |
| 285 | 285 |
| 286 element.style.justifyContent = "center stretch"; | 286 element.style.justifyContent = "center stretch"; |
| 287 checkValues(element, "justifyContent", "justify-content", "stretch center", "st
retch center"); | 287 checkValues(element, "justifyContent", "justify-content", "stretch center", "st
retch center"); |
| 288 | 288 |
| 289 element.style.justifyContent = "right unsafe"; | 289 element.style.justifyContent = "right unsafe"; |
| 290 checkValues(element, "justifyContent", "justify-content", "right unsafe", "righ
t unsafe"); | 290 checkValues(element, "justifyContent", "justify-content", "right unsafe", "righ
t unsafe"); |
| 291 | 291 |
| 292 element.style.justifyContent = "auto"; | 292 element.style.justifyContent = "normal"; |
| 293 checkValues(element, "justifyContent", "justify-content", "auto", "start"); | 293 checkValues(element, "justifyContent", "justify-content", "normal", "normal"); |
| 294 | 294 |
| 295 element.style.display = "flex"; | 295 element.style.display = "flex"; |
| 296 element.style.justifyContent = "auto"; | 296 element.style.justifyContent = "normal"; |
| 297 checkValues(element, "justifyContent", "justify-content", "auto", "flex-start")
; | 297 checkValues(element, "justifyContent", "justify-content", "normal", "normal"); |
| 298 | 298 |
| 299 element.style.display = "grid"; | 299 element.style.display = "grid"; |
| 300 element.style.justifyContent = "auto"; | 300 element.style.justifyContent = "normal"; |
| 301 checkValues(element, "justifyContent", "justify-content", "auto", "start"); | 301 checkValues(element, "justifyContent", "justify-content", "normal", "normal"); |
| 302 | 302 |
| 303 element.style.justifyContent = "flex-end"; | 303 element.style.justifyContent = "flex-end"; |
| 304 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end
"); | 304 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end
"); |
| 305 | 305 |
| 306 debug(""); | 306 debug(""); |
| 307 debug("Test bad combinations of justify-content"); | 307 debug("Test bad combinations of justify-content"); |
| 308 element = document.createElement("div"); | 308 element = document.createElement("div"); |
| 309 document.body.appendChild(element); | 309 document.body.appendChild(element); |
| 310 | 310 |
| 311 checkBadValues(element, "justifyContent", "justify-content", ""); | 311 checkBadValues(element, "justifyContent", "justify-content", ""); |
| 312 checkBadValues(element, "justifyContent", "justify-content", "auto"); |
| 312 checkBadValues(element, "justifyContent", "justify-content", "unsafe auto"); | 313 checkBadValues(element, "justifyContent", "justify-content", "unsafe auto"); |
| 313 checkBadValues(element, "justifyContent", "justify-content", "auto safe"); | 314 checkBadValues(element, "justifyContent", "justify-content", "auto safe"); |
| 314 checkBadValues(element, "justifyContent", "justify-content", "auto left"); | 315 checkBadValues(element, "justifyContent", "justify-content", "auto left"); |
| 315 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); | 316 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| 316 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen
ter"); | 317 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen
ter"); |
| 317 checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe"); | 318 checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe"); |
| 318 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe"); | 319 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe"); |
| 319 checkBadValues(element, "justifyContent", "justify-content", "center start"); | 320 checkBadValues(element, "justifyContent", "justify-content", "center start"); |
| 320 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); | 321 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| 321 checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline")
; | 322 checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline")
; |
| 322 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left"
); | 323 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left"
); |
| 323 checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe"
); | 324 checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe"
); |
| 324 checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe
safe"); | 325 checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe
safe"); |
| 325 checkBadValues(element, "justifyContent", "justify-content", "start right space
-between"); | 326 checkBadValues(element, "justifyContent", "justify-content", "start right space
-between"); |
| 326 checkBadValues(element, "justifyContent", "justify-content", "safe stretch"); | 327 checkBadValues(element, "justifyContent", "justify-content", "safe stretch"); |
| 327 checkBadValues(element, "justifyContent", "justify-content", "space-around stre
tch"); | 328 checkBadValues(element, "justifyContent", "justify-content", "space-around stre
tch"); |
| 328 checkBadValues(element, "justifyContent", "justify-content", "end space-between
start"); | 329 checkBadValues(element, "justifyContent", "justify-content", "end space-between
start"); |
| 329 checkBadValues(element, "justifyContent", "justify-content", "right safe left")
; | 330 checkBadValues(element, "justifyContent", "justify-content", "right safe left")
; |
| 330 checkBadValues(element, "justifyContent", "justify-content", "unsafe"); | 331 checkBadValues(element, "justifyContent", "justify-content", "unsafe"); |
| 331 checkBadValues(element, "justifyContent", "justify-content", "safe"); | 332 checkBadValues(element, "justifyContent", "justify-content", "safe"); |
| 332 | 333 |
| 333 debug(""); | 334 debug(""); |
| 334 debug("Test the value 'initial'"); | 335 debug("Test the value 'initial'"); |
| 335 element.style.display = ""; | 336 element.style.display = ""; |
| 336 checkInitialValues(element, "justifyContent", "justify-content", "stretch center
", "start"); | 337 checkInitialValues(element, "justifyContent", "justify-content", "stretch center
", "normal"); |
| 337 | 338 |
| 338 debug(""); | 339 debug(""); |
| 339 debug("Test the value 'initial' for grid containers"); | 340 debug("Test the value 'initial' for grid containers"); |
| 340 element.style.display = "grid"; | 341 element.style.display = "grid"; |
| 341 checkInitialValues(element, "justifyContent", "justify-content", "space-between
left", "start"); | 342 checkInitialValues(element, "justifyContent", "justify-content", "space-between
left", "normal"); |
| 342 | 343 |
| 343 debug(""); | 344 debug(""); |
| 344 debug("Test the value 'initial' for flex containers"); | 345 debug("Test the value 'initial' for flex containers"); |
| 345 element.style.display = "flex"; | 346 element.style.display = "flex"; |
| 346 checkInitialValues(element, "justifyContent", "justify-content", "right unsafe",
"flex-start"); | 347 checkInitialValues(element, "justifyContent", "justify-content", "right unsafe",
"normal"); |
| 347 | 348 |
| 348 debug(""); | 349 debug(""); |
| 349 debug("Test the value 'inherit'"); | 350 debug("Test the value 'inherit'"); |
| 350 checkInheritValues("justifyContent", "justify-content", "end"); | 351 checkInheritValues("justifyContent", "justify-content", "end"); |
| 351 checkInheritValues("justifyContent", "justify-content", "left safe"); | 352 checkInheritValues("justifyContent", "justify-content", "left safe"); |
| 352 checkInheritValues("justifyContent", "justify-content", "stretch center"); | 353 checkInheritValues("justifyContent", "justify-content", "stretch center"); |
| 353 | 354 |
| 354 </script> | 355 </script> |
| 355 </body> | 356 </body> |
| 356 </html> | 357 </html> |
| OLD | NEW |