| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 #justifyContentAuto { |
| 6 justify-content: auto; |
| 7 } |
| 8 |
| 9 #justifyContentBaseline { |
| 10 justify-content: baseline; |
| 11 } |
| 12 |
| 13 #justifyContentLastBaseline { |
| 14 justify-content: last-baseline; |
| 15 } |
| 16 |
| 17 #justifyContentSpaceBetween { |
| 18 justify-content: space-between; |
| 19 } |
| 20 |
| 21 #justifyContentSpaceAround { |
| 22 justify-content: space-around; |
| 23 } |
| 24 |
| 25 #justifyContentSpaceEvenly { |
| 26 justify-content: space-evenly; |
| 27 } |
| 28 |
| 29 #justifyContentStretch { |
| 30 justify-content: stretch; |
| 31 } |
| 32 |
| 33 #justifyContentSpaceBetweenSafe { |
| 34 justify-content: space-between safe; |
| 35 } |
| 36 |
| 37 #justifyContentSpaceAroundTrue { |
| 38 justify-content: space-around true; |
| 39 } |
| 40 |
| 41 #justifyContentStretchTrue { |
| 42 justify-content: stretch true; |
| 43 } |
| 44 |
| 45 #justifyContentStart { |
| 46 justify-content: start; |
| 47 } |
| 48 |
| 49 #justifyContentEnd { |
| 50 justify-content: end; |
| 51 } |
| 52 |
| 53 #justifyContentCenter { |
| 54 justify-content: center; |
| 55 } |
| 56 |
| 57 #justifyContentLeft { |
| 58 justify-content: left; |
| 59 } |
| 60 |
| 61 #justifyContentRight { |
| 62 justify-content: right; |
| 63 } |
| 64 |
| 65 #justifyContentFlexStart { |
| 66 justify-content: flex-start; |
| 67 } |
| 68 |
| 69 #justifyContentFlexEnd { |
| 70 justify-content: flex-end; |
| 71 } |
| 72 |
| 73 #justifyContentEndTrue { |
| 74 justify-content: end true; |
| 75 } |
| 76 |
| 77 #justifyContentCenterTrue { |
| 78 justify-content: center true; |
| 79 } |
| 80 |
| 81 #justifyContentRightSafe { |
| 82 justify-content: right safe; |
| 83 } |
| 84 |
| 85 #justifyContentLeftTrue { |
| 86 justify-content: left true; |
| 87 } |
| 88 |
| 89 #justifyContentFlexStartTrue { |
| 90 justify-content: flex-start true; |
| 91 } |
| 92 |
| 93 #justifyContentFlexEndSafe { |
| 94 justify-content: flex-end safe; |
| 95 } |
| 96 |
| 97 #justifyContentSpaceBetweenLeft { |
| 98 justify-content: space-between left; |
| 99 } |
| 100 |
| 101 #justifyContentSpaceAroundCenter { |
| 102 justify-content: space-around center; |
| 103 } |
| 104 |
| 105 #justifyContentSpaceEvenlyRight { |
| 106 justify-content: space-evenly right; |
| 107 } |
| 108 |
| 109 #justifyContentStretchStartSafe { |
| 110 justify-content: stretch start safe; |
| 111 } |
| 112 |
| 113 #justifyContentSpaceAroundEndTrue { |
| 114 justify-content: space-around end true; |
| 115 } |
| 116 |
| 117 #justifyContentSpaceEvenlyFlexStartSafe { |
| 118 justify-content: space-evenly flex-start safe; |
| 119 } |
| 120 |
| 121 </style> |
| 122 <script src="../../resources/js-test.js"></script> |
| 123 </head> |
| 124 <body> |
| 125 <div id="justifyContentAuto"></div> |
| 126 <div id="justifyContentBaseline"></div> |
| 127 <div id="justifyContentLastBaseline"></div> |
| 128 <div id="justifyContentSpaceBetween"></div> |
| 129 <div id="justifyContentSpaceAround"></div> |
| 130 <div id="justifyContentSpaceEvenly"></div> |
| 131 <div id="justifyContentStretch"></div> |
| 132 <div id="justifyContentSpaceBetweenSafe"></div> |
| 133 <div id="justifyContentSpaceAroundTrue"></div> |
| 134 <div id="justifyContentStretchTrue"></div> |
| 135 <div id="justifyContentStretchrue"></div> |
| 136 <div id="justifyContentStart"></div> |
| 137 <div id="justifyContentEnd"></div> |
| 138 <div id="justifyContentCenter"></div> |
| 139 <div id="justifyContentLeft"></div> |
| 140 <div id="justifyContentRight"></div> |
| 141 <div id="justifyContentFlexStart"></div> |
| 142 <div id="justifyContentFlexEnd"></div> |
| 143 <div id="justifyContentEndTrue"></div> |
| 144 <div id="justifyContentCenterTrue"></div> |
| 145 <div id="justifyContentRightSafe"></div> |
| 146 <div id="justifyContentLeftTrue"></div> |
| 147 <div id="justifyContentFlexStartTrue"></div> |
| 148 <div id="justifyContentFlexEndSafe"></div> |
| 149 <div id="justifyContentSpaceBetweenLeft"></div> |
| 150 <div id="justifyContentSpaceAroundCenter"></div> |
| 151 <div id="justifyContentSpaceEvenlyRight"></div> |
| 152 <div id="justifyContentStretchStartSafe"></div> |
| 153 <div id="justifyContentSpaceAroundEndTrue"></div> |
| 154 <div id="justifyContentSpaceEvenlyFlexStartSafe"></div> |
| 155 |
| 156 <script src="resources/alignment-parsing-utils.js"></script> |
| 157 <script> |
| 158 description('Test that setting and getting justify-content works as expected'); |
| 159 |
| 160 debug("Test getting justify-content set through CSS"); |
| 161 var justifyContentAuto = document.getElementById("justifyContentAuto"); |
| 162 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue
('justify-content')", "start"); |
| 163 |
| 164 var justifyContentBaseline = document.getElementById("justifyContentBaseline"); |
| 165 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyV
alue('justify-content')", "baseline"); |
| 166 |
| 167 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase
line"); |
| 168 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPrope
rtyValue('justify-content')", "last-baseline"); |
| 169 |
| 170 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet
ween"); |
| 171 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPrope
rtyValue('justify-content')", "space-between"); |
| 172 |
| 173 var justifyContentSpaceAround = document.getElementById("justifyContentSpaceArou
nd"); |
| 174 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getProper
tyValue('justify-content')", "space-around"); |
| 175 |
| 176 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEven
ly"); |
| 177 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getProper
tyValue('justify-content')", "space-evenly"); |
| 178 |
| 179 var justifyContentStretch = document.getElementById("justifyContentStretch"); |
| 180 shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyVa
lue('justify-content')", "stretch"); |
| 181 |
| 182 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac
eBetweenSafe"); |
| 183 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getP
ropertyValue('justify-content')", "space-between safe"); |
| 184 |
| 185 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpace
AroundTrue"); |
| 186 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundTrue, '').getPr
opertyValue('justify-content')", "space-around true"); |
| 187 |
| 188 var justifyContentStretchTrue = document.getElementById("justifyContentStretchTr
ue"); |
| 189 shouldBeEqualToString("getComputedStyle(justifyContentStretchTrue, '').getProper
tyValue('justify-content')", "stretch true"); |
| 190 |
| 191 var justifyContentStart = document.getElementById("justifyContentStart"); |
| 192 shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValu
e('justify-content')", "start"); |
| 193 |
| 194 var justifyContentEnd = document.getElementById("justifyContentEnd"); |
| 195 shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue(
'justify-content')", "end"); |
| 196 |
| 197 var justifyContentCenter = document.getElementById("justifyContentCenter"); |
| 198 shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyVal
ue('justify-content')", "center"); |
| 199 |
| 200 var justifyContentLeft = document.getElementById("justifyContentLeft"); |
| 201 shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue
('justify-content')", "left"); |
| 202 |
| 203 var justifyContentRight = document.getElementById("justifyContentRight"); |
| 204 shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValu
e('justify-content')", "right"); |
| 205 |
| 206 var justifyContentFlexStart = document.getElementById("justifyContentFlexStart")
; |
| 207 shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getProperty
Value('justify-content')", "flex-start"); |
| 208 |
| 209 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd"); |
| 210 shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyVa
lue('justify-content')", "flex-end"); |
| 211 |
| 212 var justifyContentEndTrue = document.getElementById("justifyContentEndTrue"); |
| 213 shouldBeEqualToString("getComputedStyle(justifyContentEndTrue, '').getPropertyVa
lue('justify-content')", "end true"); |
| 214 |
| 215 var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue
"); |
| 216 shouldBeEqualToString("getComputedStyle(justifyContentCenterTrue, '').getPropert
yValue('justify-content')", "center true"); |
| 217 |
| 218 var justifyContentRightSafe = document.getElementById("justifyContentRightSafe")
; |
| 219 shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getProperty
Value('justify-content')", "right safe"); |
| 220 |
| 221 var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue"); |
| 222 shouldBeEqualToString("getComputedStyle(justifyContentLeftTrue, '').getPropertyV
alue('justify-content')", "left true"); |
| 223 |
| 224 var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexSta
rtTrue"); |
| 225 shouldBeEqualToString("getComputedStyle(justifyContentFlexStartTrue, '').getProp
ertyValue('justify-content')", "flex-start true"); |
| 226 |
| 227 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSa
fe"); |
| 228 shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getProper
tyValue('justify-content')", "flex-end safe"); |
| 229 |
| 230 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpac
eBetweenLeft"); |
| 231 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getP
ropertyValue('justify-content')", "space-between left"); |
| 232 |
| 233 var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpa
ceAroundCenter"); |
| 234 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').get
PropertyValue('justify-content')", "space-around center"); |
| 235 |
| 236 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpac
eEvenlyRight"); |
| 237 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getP
ropertyValue('justify-content')", "space-evenly right"); |
| 238 |
| 239 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre
tchStartSafe"); |
| 240 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getP
ropertyValue('justify-content')", "stretch start safe"); |
| 241 |
| 242 var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSp
aceAroundEndTrue"); |
| 243 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndTrue, '').ge
tPropertyValue('justify-content')", "space-around end true"); |
| 244 |
| 245 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon
tentSpaceEvenlyFlexStartSafe"); |
| 246 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe,
'').getPropertyValue('justify-content')", "space-evenly flex-start safe"); |
| 247 |
| 248 debug(""); |
| 249 debug("Test initial value of justify-content through JS"); |
| 250 element = document.createElement("div"); |
| 251 document.body.appendChild(element); |
| 252 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-c
ontent')", "start"); |
| 253 |
| 254 debug(""); |
| 255 debug("Test getting and setting justify-content through JS"); |
| 256 element = document.createElement("div"); |
| 257 document.body.appendChild(element); |
| 258 element.style.justifyContent = "center"; |
| 259 checkValues(element, "justifyContent", "justify-content", "center", "center"); |
| 260 |
| 261 element.style.justifyContent = "true start"; |
| 262 checkValues(element, "justifyContent", "justify-content", "start true", "start
true"); |
| 263 |
| 264 element.style.justifyContent = "flex-end safe"; |
| 265 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle
x-end safe"); |
| 266 |
| 267 element.style.justifyContent = "space-between right safe"; |
| 268 checkValues(element, "justifyContent", "justify-content", "space-between right
safe", "space-between right safe"); |
| 269 |
| 270 element.style.justifyContent = "stretch center"; |
| 271 checkValues(element, "justifyContent", "justify-content", "stretch center", "st
retch center"); |
| 272 |
| 273 element.style.justifyContent = "true space-around"; |
| 274 checkValues(element, "justifyContent", "justify-content", "space-around true",
"space-around true"); |
| 275 |
| 276 element.style.justifyContent = "auto"; |
| 277 checkValues(element, "justifyContent", "justify-content", "auto", "start"); |
| 278 |
| 279 element.style.display = "flex"; |
| 280 element.style.justifyContent = "auto"; |
| 281 checkValues(element, "justifyContent", "justify-content", "auto", "flex-start")
; |
| 282 |
| 283 element.style.display = "grid"; |
| 284 element.style.justifyContent = "auto"; |
| 285 checkValues(element, "justifyContent", "justify-content", "auto", "start"); |
| 286 |
| 287 element.style.justifyContent = "flex-end"; |
| 288 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end
"); |
| 289 |
| 290 debug(""); |
| 291 debug("Test bad combinations of justify-content"); |
| 292 element = document.createElement("div"); |
| 293 document.body.appendChild(element); |
| 294 |
| 295 checkBadValues(element, "justifyContent", "justify-content", ""); |
| 296 checkBadValues(element, "justifyContent", "justify-content", "true auto"); |
| 297 checkBadValues(element, "justifyContent", "justify-content", "auto safe"); |
| 298 checkBadValues(element, "justifyContent", "justify-content", "auto left"); |
| 299 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| 300 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen
ter"); |
| 301 checkBadValues(element, "justifyContent", "justify-content", "true true"); |
| 302 checkBadValues(element, "justifyContent", "justify-content", "true safe"); |
| 303 checkBadValues(element, "justifyContent", "justify-content", "center start"); |
| 304 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| 305 checkBadValues(element, "justifyContent", "justify-content", "true baseline"); |
| 306 checkBadValues(element, "justifyContent", "justify-content", "true safe left"); |
| 307 checkBadValues(element, "justifyContent", "justify-content", "true left safe"); |
| 308 checkBadValues(element, "justifyContent", "justify-content", "left safe true sa
fe"); |
| 309 checkBadValues(element, "justifyContent", "justify-content", "start space-betwe
en"); |
| 310 checkBadValues(element, "justifyContent", "justify-content", "safe end stretch"
); |
| 311 checkBadValues(element, "justifyContent", "justify-content", "space-around stre
tch"); |
| 312 checkBadValues(element, "justifyContent", "justify-content", "end start"); |
| 313 checkBadValues(element, "justifyContent", "justify-content", "right safe space-
evenly"); |
| 314 checkBadValues(element, "justifyContent", "justify-content", "true"); |
| 315 checkBadValues(element, "justifyContent", "justify-content", "safe"); |
| 316 |
| 317 debug(""); |
| 318 debug("Test the value 'initial'"); |
| 319 element.style.display = ""; |
| 320 checkInitialValues(element, "justifyContent", "justify-content", "stretch center
", "start"); |
| 321 |
| 322 debug(""); |
| 323 debug("Test the value 'initial' for grid containers"); |
| 324 element.style.display = "grid"; |
| 325 checkInitialValues(element, "justifyContent", "justify-content", "space-between
left", "start"); |
| 326 |
| 327 debug(""); |
| 328 debug("Test the value 'initial' for flex containers"); |
| 329 element.style.display = "flex"; |
| 330 checkInitialValues(element, "justifyContent", "justify-content", "right true", "
flex-start"); |
| 331 |
| 332 debug(""); |
| 333 debug("Test the value 'inherit'"); |
| 334 checkInheritValues("justifyContent", "justify-content", "end"); |
| 335 checkInheritValues("justifyContent", "justify-content", "left safe"); |
| 336 checkInheritValues("justifyContent", "justify-content", "stretch center"); |
| 337 |
| 338 </script> |
| 339 </body> |
| 340 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 636993002:
[CSS Grid Layout] Upgrade justify-content parsing to CSS3 Box Alignment spec. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master