third_party/WebKit/LayoutTests/fast/alignment/parse-justify-content.html

   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 #justifyContentStart {
  34     justify-content: start;
  35 }
  36
  37 #justifyContentEnd {
  38     justify-content: end;
  39 }
  40
  41 #justifyContentCenter {
  42     justify-content: center;
  43 }
  44
  45 #justifyContentLeft {
  46     justify-content: left;
  47 }
  48
  49 #justifyContentRight {
  50     justify-content: right;
  51 }
  52
  53 #justifyContentFlexStart {
  54     justify-content: flex-start;
  55 }
  56
  57 #justifyContentFlexEnd {
  58     justify-content: flex-end;
  59 }
  60
  61 #justifyContentEndTrue {
  62     justify-content: end true;
  63 }
  64
  65 #justifyContentCenterTrue {
  66     justify-content: center true;
  67 }
  68
  69 #justifyContentRightSafe {
  70     justify-content: right safe;
  71 }
  72
  73 #justifyContentLeftTrue {
  74     justify-content: left true;
  75 }
  76
  77 #justifyContentFlexStartTrue {
  78     justify-content: flex-start true;
  79 }
  80
  81 #justifyContentFlexEndSafe {
  82     justify-content: flex-end safe;
  83 }
  84
  85 #justifyContentSpaceBetweenLeft {
  86     justify-content: space-between left;
  87 }
  88
  89 #justifyContentSpaceAroundCenter {
  90     justify-content: space-around center;
  91 }
  92
  93 #justifyContentSpaceEvenlyRight {
  94     justify-content: space-evenly right;
  95 }
  96
  97 #justifyContentStretchStartSafe {
  98     justify-content: stretch start safe;
  99 }
 100
 101 #justifyContentSpaceAroundEndTrue {
 102     justify-content: space-around end true;
 103 }
 104
 105 #justifyContentSpaceEvenlyFlexStartSafe {
 106     justify-content: space-evenly flex-start safe;
 107 }
 108
 109 <!-- Invalid CSS cases -->
 110 #justifyContentSpaceBetweenSafe {
 111     justify-content: space-between safe;
 112 }
 113
 114 #justifyContentSpaceBetweenStretch {
 115     justify-content: space-between stretch;
 116 }
 117
 118 #justifyContentSafe {
 119     justify-content: safe;
 120 }
 121
 122 #justifyContentRightSafeTrue {
 123     justify-content: right safe true;
 124 }
 125
 126 #justifyContentCenterLeft {
 127     justify-content: center left;
 128 }
 129 </style>
 130 <script src="../../resources/js-test.js"></script>
 131 </head>
 132 <body>
 133 <div id="justifyContentAuto"></div>
 134 <div id="justifyContentBaseline"></div>
 135 <div id="justifyContentLastBaseline"></div>
 136 <div id="justifyContentSpaceBetween"></div>
 137 <div id="justifyContentSpaceAround"></div>
 138 <div id="justifyContentSpaceEvenly"></div>
 139 <div id="justifyContentStretch"></div>
 140 <div id="justifyContentStart"></div>
 141 <div id="justifyContentEnd"></div>
 142 <div id="justifyContentCenter"></div>
 143 <div id="justifyContentLeft"></div>
 144 <div id="justifyContentRight"></div>
 145 <div id="justifyContentFlexStart"></div>
 146 <div id="justifyContentFlexEnd"></div>
 147 <div id="justifyContentEndTrue"></div>
 148 <div id="justifyContentCenterTrue"></div>
 149 <div id="justifyContentRightSafe"></div>
 150 <div id="justifyContentLeftTrue"></div>
 151 <div id="justifyContentFlexStartTrue"></div>
 152 <div id="justifyContentFlexEndSafe"></div>
 153 <div id="justifyContentSpaceBetweenLeft"></div>
 154 <div id="justifyContentSpaceAroundCenter"></div>
 155 <div id="justifyContentSpaceEvenlyRight"></div>
 156 <div id="justifyContentStretchStartSafe"></div>
 157 <div id="justifyContentSpaceAroundEndTrue"></div>
 158 <div id="justifyContentSpaceEvenlyFlexStartSafe"></div>
 159
 160 <div id="justifyContentSpaceBetweenSafe"></div>
 161 <div id="justifyContentSpaceBetweenStretch"></div>
 162 <div id="justifyContentSafe"></div>
 163 <div id="justifyContentRightSafeTrue"></div>
 164 <div id="justifyContentCenterLeft"></div>
 165
 166 <script src="resources/alignment-parsing-utils.js"></script>
 167 <script>
 168 description('Test that setting and getting justify-content works as expected');
 169
 170 debug("Test getting justify-content set through CSS");
 171 var justifyContentAuto = document.getElementById("justifyContentAuto");
 172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "start");
 173
 174 var justifyContentBaseline = document.getElementById("justifyContentBaseline");
 175 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "baseline");
 176
 177 var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
 178 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "last-baseline");
 179
 180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
 181 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "space-between");
 182
 183 var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
 184 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "space-around");
 185
 186 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
 187 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "space-evenly");
 188
 189 var justifyContentStretch = document.getElementById("justifyContentStretch");
 190 shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "stretch");
 191
 192 var justifyContentStart = document.getElementById("justifyContentStart");
 193 shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "start");
 194
 195 var justifyContentEnd = document.getElementById("justifyContentEnd");
 196 shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "end");
 197
 198 var justifyContentCenter = document.getElementById("justifyContentCenter");
 199 shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "center");
 200
 201 var justifyContentLeft = document.getElementById("justifyContentLeft");
 202 shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "left");
 203
 204 var justifyContentRight = document.getElementById("justifyContentRight");
 205 shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "right");
 206
 207 var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
 208 shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "flex-start");
 209
 210 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
 211 shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "flex-end");
 212
 213 var justifyContentEndTrue = document.getElementById("justifyContentEndTrue");
 214 shouldBeEqualToString("getComputedStyle(justifyContentEndTrue, '').getPropertyValue('justify-content')", "end true");
 215
 216 var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue");
 217 shouldBeEqualToString("getComputedStyle(justifyContentCenterTrue, '').getPropertyValue('justify-content')", "center true");
 218
 219 var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
 220 shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "right safe");
 221
 222 var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue");
 223 shouldBeEqualToString("getComputedStyle(justifyContentLeftTrue, '').getPropertyValue('justify-content')", "left true");
 224
 225 var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexStartTrue");
 226 shouldBeEqualToString("getComputedStyle(justifyContentFlexStartTrue, '').getPropertyValue('justify-content')", "flex-start true");
 227
 228 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
 229 shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "flex-end safe");
 230
 231 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
 232 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "space-between left");
 233
 234 var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
 235 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "space-around center");
 236
 237 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
 238 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "space-evenly right");
 239
 240 var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
 241 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "stretch start safe");
 242
 243 var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSpaceAroundEndTrue");
 244 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndTrue, '').getPropertyValue('justify-content')", "space-around end true");
 245
 246 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
 247 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe");
 248
 249 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
 250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "start");
 251
 252 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpaceBetweenStretch");
 253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "start");
 254
 255 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSafe");
 256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "start");
 257
 258 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentRightSafeTrue");
 259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeTrue, '').getPropertyValue('justify-content')", "start");
 260
 261 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentCenterLeft");
 262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "start");
 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-content')", "start");
 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 = "true start";
 278 checkValues(element, "justifyContent", "justify-content",  "start true", "start true");
 279
 280 element.style.justifyContent = "flex-end safe";
 281 checkValues(element, "justifyContent", "justify-content",  "flex-end safe", "flex-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", "stretch center");
 288
 289 element.style.justifyContent = "right true";
 290 checkValues(element, "justifyContent", "justify-content",  "right true", "right true");
 291
 292 element.style.justifyContent = "auto";
 293 checkValues(element, "justifyContent", "justify-content",  "auto", "start");
 294
 295 element.style.display = "flex";
 296 element.style.justifyContent = "auto";
 297 checkValues(element, "justifyContent", "justify-content",  "auto", "flex-start");
 298
 299 element.style.display = "grid";
 300 element.style.justifyContent = "auto";
 301 checkValues(element, "justifyContent", "justify-content",  "auto", "start");
 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",  "true auto");
 313 checkBadValues(element, "justifyContent", "justify-content",  "auto safe");
 314 checkBadValues(element, "justifyContent", "justify-content",  "auto left");
 315 checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
 316 checkBadValues(element, "justifyContent", "justify-content",  "last baseline center");
 317 checkBadValues(element, "justifyContent", "justify-content",  "true true");
 318 checkBadValues(element, "justifyContent", "justify-content",  "true safe");
 319 checkBadValues(element, "justifyContent", "justify-content",  "center start");
 320 checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
 321 checkBadValues(element, "justifyContent", "justify-content",  "true baseline");
 322 checkBadValues(element, "justifyContent", "justify-content",  "true safe left");
 323 checkBadValues(element, "justifyContent", "justify-content",  "true left safe");
 324 checkBadValues(element, "justifyContent", "justify-content",  "left safe true safe");
 325 checkBadValues(element, "justifyContent", "justify-content",  "start right space-between");
 326 checkBadValues(element, "justifyContent", "justify-content",  "safe stretch");
 327 checkBadValues(element, "justifyContent", "justify-content",  "space-around stretch");
 328 checkBadValues(element, "justifyContent", "justify-content",  "end space-between start");
 329 checkBadValues(element, "justifyContent", "justify-content",  "right safe left");
 330 checkBadValues(element, "justifyContent", "justify-content",  "true");
 331 checkBadValues(element, "justifyContent", "justify-content",  "safe");
 332
 333 debug("");
 334 debug("Test the value 'initial'");
 335 element.style.display = "";
 336 checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "start");
 337
 338 debug("");
 339 debug("Test the value 'initial' for grid containers");
 340 element.style.display = "grid";
 341 checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start");
 342
 343 debug("");
 344 debug("Test the value 'initial' for flex containers");
 345 element.style.display = "flex";
 346 checkInitialValues(element, "justifyContent", "justify-content", "right true", "flex-start");
 347
 348 debug("");
 349 debug("Test the value 'inherit'");
 350 checkInheritValues("justifyContent", "justify-content", "end");
 351 checkInheritValues("justifyContent", "justify-content", "left safe");
 352 checkInheritValues("justifyContent", "justify-content", "stretch center");
 353
 354 </script>
 355 </body>
 356 </html>