| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | 2 <style> |
| 5 #justifyContentAuto { | 3 #justifyContentAuto { |
| 6 justify-content: auto; | 4 justify-content: auto; |
| 7 } | 5 } |
| 8 | 6 |
| 9 #justifyContentBaseline { | 7 #justifyContentBaseline { |
| 10 justify-content: baseline; | 8 justify-content: baseline; |
| 11 } | 9 } |
| 12 | 10 |
| 11 #justifyContentFirstBaseline { |
| 12 justify-content: first baseline; |
| 13 } |
| 14 |
| 13 #justifyContentLastBaseline { | 15 #justifyContentLastBaseline { |
| 14 justify-content: last-baseline; | 16 justify-content: last baseline; |
| 15 } | 17 } |
| 16 | 18 |
| 17 #justifyContentSpaceBetween { | 19 #justifyContentSpaceBetween { |
| 18 justify-content: space-between; | 20 justify-content: space-between; |
| 19 } | 21 } |
| 20 | 22 |
| 21 #justifyContentSpaceAround { | 23 #justifyContentSpaceAround { |
| 22 justify-content: space-around; | 24 justify-content: space-around; |
| 23 } | 25 } |
| 24 | 26 |
| (...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 120 } | 122 } |
| 121 | 123 |
| 122 #justifyContentRightSafeUnsafe { | 124 #justifyContentRightSafeUnsafe { |
| 123 justify-content: right safe unsafe; | 125 justify-content: right safe unsafe; |
| 124 } | 126 } |
| 125 | 127 |
| 126 #justifyContentCenterLeft { | 128 #justifyContentCenterLeft { |
| 127 justify-content: center left; | 129 justify-content: center left; |
| 128 } | 130 } |
| 129 </style> | 131 </style> |
| 130 <script src="../../resources/js-test.js"></script> | 132 <p>Test that setting and getting justify-content works as expected</p> |
| 131 </head> | |
| 132 <body> | |
| 133 <div id="justifyContentAuto"></div> | 133 <div id="justifyContentAuto"></div> |
| 134 <div id="justifyContentBaseline"></div> | 134 <div id="justifyContentBaseline"></div> |
| 135 <div id="justifyContentFirstBaseline"></div> |
| 135 <div id="justifyContentLastBaseline"></div> | 136 <div id="justifyContentLastBaseline"></div> |
| 136 <div id="justifyContentSpaceBetween"></div> | 137 <div id="justifyContentSpaceBetween"></div> |
| 137 <div id="justifyContentSpaceAround"></div> | 138 <div id="justifyContentSpaceAround"></div> |
| 138 <div id="justifyContentSpaceEvenly"></div> | 139 <div id="justifyContentSpaceEvenly"></div> |
| 139 <div id="justifyContentStretch"></div> | 140 <div id="justifyContentStretch"></div> |
| 140 <div id="justifyContentStart"></div> | 141 <div id="justifyContentStart"></div> |
| 141 <div id="justifyContentEnd"></div> | 142 <div id="justifyContentEnd"></div> |
| 142 <div id="justifyContentCenter"></div> | 143 <div id="justifyContentCenter"></div> |
| 143 <div id="justifyContentLeft"></div> | 144 <div id="justifyContentLeft"></div> |
| 144 <div id="justifyContentRight"></div> | 145 <div id="justifyContentRight"></div> |
| (...skipping 11 matching lines...) Expand all Loading... |
| 156 <div id="justifyContentStretchStartSafe"></div> | 157 <div id="justifyContentStretchStartSafe"></div> |
| 157 <div id="justifyContentSpaceAroundEndUnsafe"></div> | 158 <div id="justifyContentSpaceAroundEndUnsafe"></div> |
| 158 <div id="justifyContentSpaceEvenlyFlexStartSafe"></div> | 159 <div id="justifyContentSpaceEvenlyFlexStartSafe"></div> |
| 159 | 160 |
| 160 <div id="justifyContentSpaceBetweenSafe"></div> | 161 <div id="justifyContentSpaceBetweenSafe"></div> |
| 161 <div id="justifyContentSpaceBetweenStretch"></div> | 162 <div id="justifyContentSpaceBetweenStretch"></div> |
| 162 <div id="justifyContentSafe"></div> | 163 <div id="justifyContentSafe"></div> |
| 163 <div id="justifyContentRightSafeUnsafe"></div> | 164 <div id="justifyContentRightSafeUnsafe"></div> |
| 164 <div id="justifyContentCenterLeft"></div> | 165 <div id="justifyContentCenterLeft"></div> |
| 165 | 166 |
| 166 <script src="resources/alignment-parsing-utils.js"></script> | 167 <script src="../../resources/testharness.js"></script> |
| 168 <script src="../../resources/testharnessreport.js"></script> |
| 169 <script src="resources/alignment-parsing-utils-th.js"></script> |
| 167 <script> | 170 <script> |
| 168 description('Test that setting and getting justify-content works as expected'); | 171 test(function() { |
| 172 var justifyContentAuto = document.getElementById("justifyContentAuto"); |
| 173 checkValues(justifyContentAuto, "justifyContent", "justify-content", "", "no
rmal"); |
| 174 var justifyContentBaseline = document.getElementById("justifyContentBaseline
"); |
| 175 checkValues(justifyContentBaseline, "justifyContent", "justify-content", "",
"baseline"); |
| 176 var justifyContentLastBaseline = document.getElementById("justifyContentFirs
tBaseline"); |
| 177 checkValues(justifyContentLastBaseline, "justifyContent", "justify-content",
"", "baseline"); |
| 178 var justifyContentLastBaseline = document.getElementById("justifyContentLast
Baseline"); |
| 179 checkValues(justifyContentLastBaseline, "justifyContent", "justify-content",
"", "last baseline"); |
| 180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpac
eBetween"); |
| 181 checkValues(justifyContentSpaceBetween, "justifyContent", "justify-content",
"", "space-between"); |
| 182 var justifyContentSpaceAround = document.getElementById("justifyContentSpace
Around"); |
| 183 checkValues(justifyContentSpaceAround, "justifyContent", "justify-content",
"", "space-around"); |
| 184 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpace
Evenly"); |
| 185 checkValues(justifyContentSpaceEvenly, "justifyContent", "justify-content",
"", "space-evenly"); |
| 186 var justifyContentStretch = document.getElementById("justifyContentStretch")
; |
| 187 checkValues(justifyContentStretch, "justifyContent", "justify-content", "",
"stretch"); |
| 188 var justifyContentStart = document.getElementById("justifyContentStart"); |
| 189 checkValues(justifyContentStart, "justifyContent", "justify-content", "", "s
tart"); |
| 190 var justifyContentEnd = document.getElementById("justifyContentEnd"); |
| 191 checkValues(justifyContentEnd, "justifyContent", "justify-content", "", "end
"); |
| 192 var justifyContentCenter = document.getElementById("justifyContentCenter"); |
| 193 checkValues(justifyContentCenter, "justifyContent", "justify-content", "", "
center"); |
| 194 var justifyContentLeft = document.getElementById("justifyContentLeft"); |
| 195 checkValues(justifyContentLeft, "justifyContent", "justify-content", "", "le
ft"); |
| 196 var justifyContentRight = document.getElementById("justifyContentRight"); |
| 197 checkValues(justifyContentRight, "justifyContent", "justify-content", "", "r
ight"); |
| 198 var justifyContentFlexStart = document.getElementById("justifyContentFlexSta
rt"); |
| 199 checkValues(justifyContentFlexStart, "justifyContent", "justify-content", ""
, "flex-start"); |
| 200 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd")
; |
| 201 checkValues(justifyContentFlexEnd, "justifyContent", "justify-content", "",
"flex-end"); |
| 202 var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsa
fe"); |
| 203 checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", ""
, "end unsafe"); |
| 204 var justifyContentCenterUnsafe = document.getElementById("justifyContentCent
erUnsafe"); |
| 205 checkValues(justifyContentCenterUnsafe, "justifyContent", "justify-content",
"", "center unsafe"); |
| 206 var justifyContentRightSafe = document.getElementById("justifyContentRightSa
fe"); |
| 207 checkValues(justifyContentRightSafe, "justifyContent", "justify-content", ""
, "right safe"); |
| 208 var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUn
safe"); |
| 209 checkValues(justifyContentLeftUnsafe, "justifyContent", "justify-content", "
", "left unsafe"); |
| 210 var justifyContentFlexStartUnsafe = document.getElementById("justifyContentF
lexStartUnsafe"); |
| 211 checkValues(justifyContentFlexStartUnsafe, "justifyContent", "justify-conten
t", "", "flex-start unsafe"); |
| 212 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexE
ndSafe"); |
| 213 checkValues(justifyContentFlexEndSafe, "justifyContent", "justify-content",
"", "flex-end safe"); |
| 214 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContent
SpaceBetweenLeft"); |
| 215 checkValues(justifyContentSpaceBetweenLeft, "justifyContent", "justify-conte
nt", "", "space-between left"); |
| 216 var justifyContentSpaceAroundCenter = document.getElementById("justifyConten
tSpaceAroundCenter"); |
| 217 checkValues(justifyContentSpaceAroundCenter, "justifyContent", "justify-cont
ent", "", "space-around center"); |
| 218 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContent
SpaceEvenlyRight"); |
| 219 checkValues(justifyContentSpaceEvenlyRight, "justifyContent", "justify-conte
nt", "", "space-evenly right"); |
| 220 var justifyContentStretchStartSafe = document.getElementById("justifyContent
StretchStartSafe"); |
| 221 checkValues(justifyContentStretchStartSafe, "justifyContent", "justify-conte
nt", "", "stretch start safe"); |
| 222 var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyCon
tentSpaceAroundEndUnsafe"); |
| 223 checkValues(justifyContentSpaceAroundEndUnsafe, "justifyContent", "justify-c
ontent", "", "space-around end unsafe"); |
| 224 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justif
yContentSpaceEvenlyFlexStartSafe"); |
| 225 checkValues(justifyContentSpaceEvenlyFlexStartSafe, "justifyContent", "justi
fy-content", "", "space-evenly flex-start safe"); |
| 226 }, "Test getting justify-content values previously set through CSS."); |
| 169 | 227 |
| 170 debug("Test getting justify-content set through CSS"); | 228 test(function() { |
| 171 var justifyContentAuto = document.getElementById("justifyContentAuto"); | 229 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContent
SpaceBetweenSafe"); |
| 172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue
('justify-content')", "normal"); | 230 checkValues(justifyContentSpaceBetweenSafe, "justifyContent", "justify-conte
nt", "", "normal"); |
| 231 var justifyContentSpaceBetweenStretch = document.getElementById("justifyCont
entSpaceBetweenStretch"); |
| 232 checkValues(justifyContentSpaceBetweenStretch, "justifyContent", "justify-co
ntent", "", "normal"); |
| 233 var justifyContentSafe = document.getElementById("justifyContentSafe"); |
| 234 checkValues(justifyContentSafe, "justifyContent", "justify-content", "", "no
rmal"); |
| 235 var justifyContentRightSafeUnsafe = document.getElementById("justifyContentR
ightSafeUnsafe"); |
| 236 checkValues(justifyContentRightSafeUnsafe, "justifyContent", "justify-conten
t", "", "normal"); |
| 237 var justifyContentCenterLeft = document.getElementById("justifyContentCenter
Left"); |
| 238 checkValues(justifyContentCenterLeft, "justifyContent", "justify-content", "
", "normal"); |
| 239 }, "Test setting invalid values to justify-content through CSS."); |
| 173 | 240 |
| 174 var justifyContentBaseline = document.getElementById("justifyContentBaseline"); | 241 test(function() { |
| 175 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyV
alue('justify-content')", "baseline"); | 242 element = document.createElement("div"); |
| 243 document.body.appendChild(element); |
| 244 checkValues(element, "justifyContent", "justify-content", "", "normal"); |
| 245 }, "Test initial value of justify-content through JS"); |
| 176 | 246 |
| 177 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase
line"); | 247 test(function() { |
| 178 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPrope
rtyValue('justify-content')", "last-baseline"); | 248 element = document.createElement("div"); |
| 249 document.body.appendChild(element); |
| 250 element.style.justifyContent = "center"; |
| 251 checkValues(element, "justifyContent", "justify-content", "center", "center
"); |
| 179 | 252 |
| 180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet
ween"); | 253 element.style.justifyContent = "unsafe start"; |
| 181 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPrope
rtyValue('justify-content')", "space-between"); | 254 checkValues(element, "justifyContent", "justify-content", "start unsafe", "
start unsafe"); |
| 182 | 255 |
| 183 var justifyContentSpaceAround = document.getElementById("justifyContentSpaceArou
nd"); | 256 element.style.justifyContent = "flex-end safe"; |
| 184 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getProper
tyValue('justify-content')", "space-around"); | 257 checkValues(element, "justifyContent", "justify-content", "flex-end safe",
"flex-end safe"); |
| 185 | 258 |
| 186 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEven
ly"); | 259 element.style.justifyContent = "space-between right safe"; |
| 187 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getProper
tyValue('justify-content')", "space-evenly"); | 260 checkValues(element, "justifyContent", "justify-content", "space-between ri
ght safe", "space-between right safe"); |
| 188 | 261 |
| 189 var justifyContentStretch = document.getElementById("justifyContentStretch"); | 262 element.style.justifyContent = "center stretch"; |
| 190 shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyVa
lue('justify-content')", "stretch"); | 263 checkValues(element, "justifyContent", "justify-content", "stretch center",
"stretch center"); |
| 191 | 264 |
| 192 var justifyContentStart = document.getElementById("justifyContentStart"); | 265 element.style.justifyContent = "right unsafe"; |
| 193 shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValu
e('justify-content')", "start"); | 266 checkValues(element, "justifyContent", "justify-content", "right unsafe", "
right unsafe"); |
| 194 | 267 |
| 195 var justifyContentEnd = document.getElementById("justifyContentEnd"); | 268 element.style.justifyContent = "first baseline"; |
| 196 shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue(
'justify-content')", "end"); | 269 checkValues(element, "justifyContent", "justify-content", "first baseline",
"baseline"); |
| 197 | 270 |
| 198 var justifyContentCenter = document.getElementById("justifyContentCenter"); | 271 element.style.justifyContent = "last baseline"; |
| 199 shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyVal
ue('justify-content')", "center"); | 272 checkValues(element, "justifyContent", "justify-content", "last baseline",
"last baseline"); |
| 200 | 273 |
| 201 var justifyContentLeft = document.getElementById("justifyContentLeft"); | 274 element.style.justifyContent = "normal"; |
| 202 shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue
('justify-content')", "left"); | 275 checkValues(element, "justifyContent", "justify-content", "normal", "normal
"); |
| 203 | 276 |
| 204 var justifyContentRight = document.getElementById("justifyContentRight"); | 277 element.style.display = "flex"; |
| 205 shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValu
e('justify-content')", "right"); | 278 element.style.justifyContent = "normal"; |
| 279 checkValues(element, "justifyContent", "justify-content", "normal", "normal
"); |
| 206 | 280 |
| 207 var justifyContentFlexStart = document.getElementById("justifyContentFlexStart")
; | 281 element.style.display = "grid"; |
| 208 shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getProperty
Value('justify-content')", "flex-start"); | 282 element.style.justifyContent = "normal"; |
| 283 checkValues(element, "justifyContent", "justify-content", "normal", "normal
"); |
| 209 | 284 |
| 210 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd"); | 285 element.style.justifyContent = "flex-end"; |
| 211 shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyVa
lue('justify-content')", "flex-end"); | 286 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex
-end"); |
| 287 }, "Test getting and setting justify-content through JS"); |
| 212 | 288 |
| 213 var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe")
; | 289 test(function() { |
| 214 shouldBeEqualToString("getComputedStyle(justifyContentEndUnsafe, '').getProperty
Value('justify-content')", "end unsafe"); | 290 element = document.createElement("div"); |
| 291 document.body.appendChild(element); |
| 215 | 292 |
| 216 var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUn
safe"); | 293 checkBadValues(element, "justifyContent", "justify-content", ""); |
| 217 shouldBeEqualToString("getComputedStyle(justifyContentCenterUnsafe, '').getPrope
rtyValue('justify-content')", "center unsafe"); | 294 checkBadValues(element, "justifyContent", "justify-content", "auto"); |
| 295 checkBadValues(element, "justifyContent", "justify-content", "unsafe auto")
; |
| 296 checkBadValues(element, "justifyContent", "justify-content", "auto safe"); |
| 297 checkBadValues(element, "justifyContent", "justify-content", "auto left"); |
| 298 checkBadValues(element, "justifyContent", "justify-content", "baseline safe
"); |
| 299 checkBadValues(element, "justifyContent", "justify-content", "last-baseline
center"); |
| 300 checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe
"); |
| 301 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe")
; |
| 302 checkBadValues(element, "justifyContent", "justify-content", "center start"
); |
| 303 checkBadValues(element, "justifyContent", "justify-content", "baseline safe
"); |
| 304 checkBadValues(element, "justifyContent", "justify-content", "unsafe baseli
ne"); |
| 305 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe l
eft"); |
| 306 checkBadValues(element, "justifyContent", "justify-content", "unsafe left s
afe"); |
| 307 checkBadValues(element, "justifyContent", "justify-content", "left safe uns
afe safe"); |
| 308 checkBadValues(element, "justifyContent", "justify-content", "start right s
pace-between"); |
| 309 checkBadValues(element, "justifyContent", "justify-content", "safe stretch"
); |
| 310 checkBadValues(element, "justifyContent", "justify-content", "normal space-
between"); |
| 311 checkBadValues(element, "justifyContent", "justify-content", "stretch norma
l"); |
| 312 checkBadValues(element, "justifyContent", "justify-content", "normal safe")
; |
| 313 checkBadValues(element, "justifyContent", "justify-content", "space-around
stretch"); |
| 314 checkBadValues(element, "justifyContent", "justify-content", "end space-bet
ween start"); |
| 315 checkBadValues(element, "justifyContent", "justify-content", "right safe le
ft"); |
| 316 checkBadValues(element, "justifyContent", "justify-content", "unsafe"); |
| 317 checkBadValues(element, "justifyContent", "justify-content", "safe"); |
| 318 }, "Test bad combinations of justify-content"); |
| 218 | 319 |
| 219 var justifyContentRightSafe = document.getElementById("justifyContentRightSafe")
; | 320 test(function() { |
| 220 shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getProperty
Value('justify-content')", "right safe"); | 321 element.style.display = ""; |
| 322 checkInitialValues(element, "justifyContent", "justify-content", "center", "
normal"); |
| 323 }, "Test the value 'initial'"); |
| 221 | 324 |
| 222 var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe
"); | 325 test(function() { |
| 223 shouldBeEqualToString("getComputedStyle(justifyContentLeftUnsafe, '').getPropert
yValue('justify-content')", "left unsafe"); | 326 element.style.display = "grid"; |
| 327 checkInitialValues(element, "justifyContent", "justify-content", "left safe"
, "normal"); |
| 328 }, "Test the value 'initial' for grid containers"); |
| 224 | 329 |
| 225 var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexS
tartUnsafe"); | 330 test(function() { |
| 226 shouldBeEqualToString("getComputedStyle(justifyContentFlexStartUnsafe, '').getPr
opertyValue('justify-content')", "flex-start unsafe"); | 331 element.style.display = "flex"; |
| 332 checkInitialValues(element, "justifyContent", "justify-content", "right unsa
fe", "normal"); |
| 333 }, "Test the value 'initial' for flex containers"); |
| 227 | 334 |
| 228 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSa
fe"); | 335 test(function() { |
| 229 shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getProper
tyValue('justify-content')", "flex-end safe"); | 336 checkInheritValues("justifyContent", "justify-content", "end"); |
| 230 | 337 checkInheritValues("justifyContent", "justify-content", "left safe"); |
| 231 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpac
eBetweenLeft"); | 338 checkInheritValues("justifyContent", "justify-content", "center unsafe"); |
| 232 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getP
ropertyValue('justify-content')", "space-between left"); | 339 }, "Test the value 'inherit'"); |
| 233 | |
| 234 var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpa
ceAroundCenter"); | |
| 235 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').get
PropertyValue('justify-content')", "space-around center"); | |
| 236 | |
| 237 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpac
eEvenlyRight"); | |
| 238 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getP
ropertyValue('justify-content')", "space-evenly right"); | |
| 239 | |
| 240 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre
tchStartSafe"); | |
| 241 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getP
ropertyValue('justify-content')", "stretch start safe"); | |
| 242 | |
| 243 var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContent
SpaceAroundEndUnsafe"); | |
| 244 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').
getPropertyValue('justify-content')", "space-around end unsafe"); | |
| 245 | |
| 246 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon
tentSpaceEvenlyFlexStartSafe"); | |
| 247 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe,
'').getPropertyValue('justify-content')", "space-evenly flex-start safe"); | |
| 248 | |
| 249 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac
eBetweenSafe"); | |
| 250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getP
ropertyValue('justify-content')", "normal"); | |
| 251 | |
| 252 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpa
ceBetweenStretch"); | |
| 253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').g
etPropertyValue('justify-content')", "normal"); | |
| 254 | |
| 255 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSaf
e"); | |
| 256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue
('justify-content')", "normal"); | |
| 257 | |
| 258 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRig
htSafeUnsafe"); | |
| 259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPr
opertyValue('justify-content')", "normal"); | |
| 260 | |
| 261 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCen
terLeft"); | |
| 262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropert
yValue('justify-content')", "normal"); | |
| 263 | |
| 264 debug(""); | |
| 265 debug("Test initial value of justify-content through JS"); | |
| 266 element = document.createElement("div"); | |
| 267 document.body.appendChild(element); | |
| 268 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-c
ontent')", "normal"); | |
| 269 | |
| 270 debug(""); | |
| 271 debug("Test getting and setting justify-content through JS"); | |
| 272 element = document.createElement("div"); | |
| 273 document.body.appendChild(element); | |
| 274 element.style.justifyContent = "center"; | |
| 275 checkValues(element, "justifyContent", "justify-content", "center", "center"); | |
| 276 | |
| 277 element.style.justifyContent = "unsafe start"; | |
| 278 checkValues(element, "justifyContent", "justify-content", "start unsafe", "star
t unsafe"); | |
| 279 | |
| 280 element.style.justifyContent = "flex-end safe"; | |
| 281 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle
x-end safe"); | |
| 282 | |
| 283 element.style.justifyContent = "space-between right safe"; | |
| 284 checkValues(element, "justifyContent", "justify-content", "space-between right
safe", "space-between right safe"); | |
| 285 | |
| 286 element.style.justifyContent = "center stretch"; | |
| 287 checkValues(element, "justifyContent", "justify-content", "stretch center", "st
retch center"); | |
| 288 | |
| 289 element.style.justifyContent = "right unsafe"; | |
| 290 checkValues(element, "justifyContent", "justify-content", "right unsafe", "righ
t unsafe"); | |
| 291 | |
| 292 element.style.justifyContent = "normal"; | |
| 293 checkValues(element, "justifyContent", "justify-content", "normal", "normal"); | |
| 294 | |
| 295 element.style.display = "flex"; | |
| 296 element.style.justifyContent = "normal"; | |
| 297 checkValues(element, "justifyContent", "justify-content", "normal", "normal"); | |
| 298 | |
| 299 element.style.display = "grid"; | |
| 300 element.style.justifyContent = "normal"; | |
| 301 checkValues(element, "justifyContent", "justify-content", "normal", "normal"); | |
| 302 | |
| 303 element.style.justifyContent = "flex-end"; | |
| 304 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end
"); | |
| 305 | |
| 306 debug(""); | |
| 307 debug("Test bad combinations of justify-content"); | |
| 308 element = document.createElement("div"); | |
| 309 document.body.appendChild(element); | |
| 310 | |
| 311 checkBadValues(element, "justifyContent", "justify-content", ""); | |
| 312 checkBadValues(element, "justifyContent", "justify-content", "auto"); | |
| 313 checkBadValues(element, "justifyContent", "justify-content", "unsafe auto"); | |
| 314 checkBadValues(element, "justifyContent", "justify-content", "auto safe"); | |
| 315 checkBadValues(element, "justifyContent", "justify-content", "auto left"); | |
| 316 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); | |
| 317 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen
ter"); | |
| 318 checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe"); | |
| 319 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe"); | |
| 320 checkBadValues(element, "justifyContent", "justify-content", "center start"); | |
| 321 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); | |
| 322 checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline")
; | |
| 323 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left"
); | |
| 324 checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe"
); | |
| 325 checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe
safe"); | |
| 326 checkBadValues(element, "justifyContent", "justify-content", "start right space
-between"); | |
| 327 checkBadValues(element, "justifyContent", "justify-content", "safe stretch"); | |
| 328 checkBadValues(element, "justifyContent", "justify-content", "space-around stre
tch"); | |
| 329 checkBadValues(element, "justifyContent", "justify-content", "end space-between
start"); | |
| 330 checkBadValues(element, "justifyContent", "justify-content", "right safe left")
; | |
| 331 checkBadValues(element, "justifyContent", "justify-content", "unsafe"); | |
| 332 checkBadValues(element, "justifyContent", "justify-content", "safe"); | |
| 333 | |
| 334 debug(""); | |
| 335 debug("Test the value 'initial'"); | |
| 336 element.style.display = ""; | |
| 337 checkInitialValues(element, "justifyContent", "justify-content", "stretch center
", "normal"); | |
| 338 | |
| 339 debug(""); | |
| 340 debug("Test the value 'initial' for grid containers"); | |
| 341 element.style.display = "grid"; | |
| 342 checkInitialValues(element, "justifyContent", "justify-content", "space-between
left", "normal"); | |
| 343 | |
| 344 debug(""); | |
| 345 debug("Test the value 'initial' for flex containers"); | |
| 346 element.style.display = "flex"; | |
| 347 checkInitialValues(element, "justifyContent", "justify-content", "right unsafe",
"normal"); | |
| 348 | |
| 349 debug(""); | |
| 350 debug("Test the value 'inherit'"); | |
| 351 checkInheritValues("justifyContent", "justify-content", "end"); | |
| 352 checkInheritValues("justifyContent", "justify-content", "left safe"); | |
| 353 checkInheritValues("justifyContent", "justify-content", "stretch center"); | |
| 354 | 340 |
| 355 </script> | 341 </script> |
| 356 </body> | 342 </body> |
| 357 </html> | 343 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2750843002:
[css-align] Adapt content-alignment properties to the new baseline syntax (Closed)
