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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #alignContentAuto {
   6     align-content: auto;
   7 }
   8
   9 #alignContentBaseline {
  10     align-content: baseline;
  11 }
  12
  13 #alignContentLastBaseline {
  14     align-content: last-baseline;
  15 }
  16
  17 #alignContentSpaceBetween {
  18     align-content: space-between;
  19 }
  20
  21 #alignContentSpaceAround {
  22     align-content: space-around;
  23 }
  24
  25 #alignContentSpaceEvenly {
  26     align-content: space-evenly;
  27 }
  28
  29 #alignContentStretch {
  30     align-content: stretch;
  31 }
  32
  33 #alignContentStart {
  34     align-content: start;
  35 }
  36
  37 #alignContentEnd {
  38     align-content: end;
  39 }
  40
  41 #alignContentCenter {
  42     align-content: center;
  43 }
  44
  45 #alignContentLeft {
  46     align-content: left;
  47 }
  48
  49 #alignContentRight {
  50     align-content: right;
  51 }
  52
  53 #alignContentFlexStart {
  54     align-content: flex-start;
  55 }
  56
  57 #alignContentFlexEnd {
  58     align-content: flex-end;
  59 }
  60
  61 #alignContentEndTrue {
  62     align-content: end true;
  63 }
  64
  65 #alignContentCenterTrue {
  66     align-content: center true;
  67 }
  68
  69 #alignContentRightSafe {
  70     align-content: right safe;
  71 }
  72
  73 #alignContentLeftTrue {
  74     align-content: left true;
  75 }
  76
  77 #alignContentFlexStartTrue {
  78     align-content: flex-start true;
  79 }
  80
  81 #alignContentFlexEndSafe {
  82     align-content: flex-end safe;
  83 }
  84
  85 #alignContentSpaceBetweenLeft {
  86     align-content: space-between left;
  87 }
  88
  89 #alignContentSpaceAroundCenter {
  90     align-content: space-around center;
  91 }
  92
  93 #alignContentSpaceEvenlyRight {
  94     align-content: space-evenly right;
  95 }
  96
  97 #alignContentStretchStartSafe {
  98     align-content: stretch start safe;
  99 }
 100
 101 #alignContentSpaceAroundEndTrue {
 102     align-content: space-around end true;
 103 }
 104
 105 #alignContentSpaceEvenlyFlexStartSafe {
 106     align-content: space-evenly flex-start safe;
 107 }
 108
 109 <!-- Invalid CSS cases -->
 110 #alignContentSpaceBetweenSafe {
 111     align-content: space-between safe;
 112 }
 113
 114 #alignContentSpaceBetweenStretch {
 115     align-content: space-between stretch;
 116 }
 117
 118 #alignContentSafe {
 119     align-content: safe;
 120 }
 121
 122 #alignContentRightSafeTrue {
 123     align-content: right safe true;
 124 }
 125
 126 #alignContentCenterLeft {
 127     align-content: center left;
 128 }
 129 </style>
 130 <script src="../../resources/js-test.js"></script>
 131 </head>
 132 <body>
 133 <div id="alignContentAuto"></div>
 134 <div id="alignContentBaseline"></div>
 135 <div id="alignContentLastBaseline"></div>
 136 <div id="alignContentSpaceBetween"></div>
 137 <div id="alignContentSpaceAround"></div>
 138 <div id="alignContentSpaceEvenly"></div>
 139 <div id="alignContentStretch"></div>
 140 <div id="alignContentSpaceBetweenSafe"></div>
 141 <div id="alignContentSpaceAroundTrue"></div>
 142 <div id="alignContentStretchTrue"></div>
 143 <div id="alignContentStretchrue"></div>
 144 <div id="alignContentStart"></div>
 145 <div id="alignContentEnd"></div>
 146 <div id="alignContentCenter"></div>
 147 <div id="alignContentLeft"></div>
 148 <div id="alignContentRight"></div>
 149 <div id="alignContentFlexStart"></div>
 150 <div id="alignContentFlexEnd"></div>
 151 <div id="alignContentEndTrue"></div>
 152 <div id="alignContentCenterTrue"></div>
 153 <div id="alignContentRightSafe"></div>
 154 <div id="alignContentLeftTrue"></div>
 155 <div id="alignContentFlexStartTrue"></div>
 156 <div id="alignContentFlexEndSafe"></div>
 157 <div id="alignContentSpaceBetweenLeft"></div>
 158 <div id="alignContentSpaceAroundCenter"></div>
 159 <div id="alignContentSpaceEvenlyRight"></div>
 160 <div id="alignContentStretchStartSafe"></div>
 161 <div id="alignContentSpaceAroundEndTrue"></div>
 162 <div id="alignContentSpaceEvenlyFlexStartSafe"></div>
 163
 164 <div id="alignContentSpaceBetweenSafe"></div>
 165 <div id="alignContentSpaceBetweenStretch"></div>
 166 <div id="alignContentSafe"></div>
 167 <div id="alignContentRightSafeTrue"></div>
 168 <div id="alignContentCenterLeft"></div>
 169
 170 <script src="resources/alignment-parsing-utils.js"></script>
 171 <script>
 172 description('Test that setting and getting align-content works as expected');
 173
 174 debug("Test getting align-content set through CSS");
 175 var alignContentAuto = document.getElementById("alignContentAuto");
 176 shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "start");
 177
 178 var alignContentBaseline = document.getElementById("alignContentBaseline");
 179 shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content')", "baseline");
 180
 181 var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
 182 shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content')", "last-baseline");
 183
 184 var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
 185 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content')", "space-between");
 186
 187 var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
 188 shouldBeEqualToString("getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content')", "space-around");
 189
 190 var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
 191 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content')", "space-evenly");
 192
 193 var alignContentStretch = document.getElementById("alignContentStretch");
 194 shouldBeEqualToString("getComputedStyle(alignContentStretch, '').getPropertyValue('align-content')", "stretch");
 195
 196 var alignContentStart = document.getElementById("alignContentStart");
 197 shouldBeEqualToString("getComputedStyle(alignContentStart, '').getPropertyValue('align-content')", "start");
 198
 199 var alignContentEnd = document.getElementById("alignContentEnd");
 200 shouldBeEqualToString("getComputedStyle(alignContentEnd, '').getPropertyValue('align-content')", "end");
 201
 202 var alignContentCenter = document.getElementById("alignContentCenter");
 203 shouldBeEqualToString("getComputedStyle(alignContentCenter, '').getPropertyValue('align-content')", "center");
 204
 205 var alignContentLeft = document.getElementById("alignContentLeft");
 206 shouldBeEqualToString("getComputedStyle(alignContentLeft, '').getPropertyValue('align-content')", "left");
 207
 208 var alignContentRight = document.getElementById("alignContentRight");
 209 shouldBeEqualToString("getComputedStyle(alignContentRight, '').getPropertyValue('align-content')", "right");
 210
 211 var alignContentFlexStart = document.getElementById("alignContentFlexStart");
 212 shouldBeEqualToString("getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content')", "flex-start");
 213
 214 var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
 215 shouldBeEqualToString("getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content')", "flex-end");
 216
 217 var alignContentEndTrue = document.getElementById("alignContentEndTrue");
 218 shouldBeEqualToString("getComputedStyle(alignContentEndTrue, '').getPropertyValue('align-content')", "end true");
 219
 220 var alignContentCenterTrue = document.getElementById("alignContentCenterTrue");
 221 shouldBeEqualToString("getComputedStyle(alignContentCenterTrue, '').getPropertyValue('align-content')", "center true");
 222
 223 var alignContentRightSafe = document.getElementById("alignContentRightSafe");
 224 shouldBeEqualToString("getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content')", "right safe");
 225
 226 var alignContentLeftTrue = document.getElementById("alignContentLeftTrue");
 227 shouldBeEqualToString("getComputedStyle(alignContentLeftTrue, '').getPropertyValue('align-content')", "left true");
 228
 229 var alignContentFlexStartTrue = document.getElementById("alignContentFlexStartTrue");
 230 shouldBeEqualToString("getComputedStyle(alignContentFlexStartTrue, '').getPropertyValue('align-content')", "flex-start true");
 231
 232 var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
 233 shouldBeEqualToString("getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content')", "flex-end safe");
 234
 235 var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
 236 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content')", "space-between left");
 237
 238 var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
 239 shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content')", "space-around center");
 240
 241 var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
 242 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content')", "space-evenly right");
 243
 244 var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
 245 shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content')", "stretch start safe");
 246
 247 var alignContentSpaceAroundEndTrue = document.getElementById("alignContentSpaceAroundEndTrue");
 248 shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndTrue, '').getPropertyValue('align-content')", "space-around end true");
 249
 250 var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
 251 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content')", "space-evenly flex-start safe");
 252
 253 var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
 254 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "start");
 255
 256 var alignContentSpaceAroundTrue = document.getElementById("alignContentSpaceBetweenStretch");
 257 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "start");
 258
 259 var alignContentSpaceAroundTrue = document.getElementById("alignContentSafe");
 260 shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "start");
 261
 262 var alignContentSpaceAroundTrue = document.getElementById("alignContentRightSafeTrue");
 263 shouldBeEqualToString("getComputedStyle(alignContentRightSafeTrue, '').getPropertyValue('align-content')", "start");
 264
 265 var alignContentSpaceAroundTrue = document.getElementById("alignContentCenterLeft");
 266 shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "start");
 267
 268 debug("");
 269 debug("Test initial value of align-content through JS");
 270 element = document.createElement("div");
 271 document.body.appendChild(element);
 272 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "start");
 273
 274 debug("");
 275 debug("Test getting and setting align-content through JS");
 276 element = document.createElement("div");
 277 document.body.appendChild(element);
 278 element.style.alignContent = "center";
 279 checkValues(element, "alignContent", "align-content",  "center", "center");
 280
 281 element.style.alignContent = "true start";
 282 checkValues(element, "alignContent", "align-content",  "start true", "start true");
 283
 284 element.style.alignContent = "flex-end safe";
 285 checkValues(element, "alignContent", "align-content",  "flex-end safe", "flex-end safe");
 286
 287 element.style.alignContent = "space-between right safe";
 288 checkValues(element, "alignContent", "align-content",  "space-between right safe", "space-between right safe");
 289
 290 element.style.alignContent = "stretch center";
 291 checkValues(element, "alignContent", "align-content",  "stretch center", "stretch center");
 292
 293 element.style.alignContent = "right true";
 294 checkValues(element, "alignContent", "align-content",  "right true", "right true");
 295
 296 element.style.alignContent = "auto";
 297 checkValues(element, "alignContent", "align-content",  "auto", "start");
 298
 299 element.style.display = "flex";
 300 element.style.alignContent = "auto";
 301 checkValues(element, "alignContent", "align-content",  "auto", "stretch");
 302
 303 element.style.display = "grid";
 304 element.style.alignContent = "auto";
 305 checkValues(element, "alignContent", "align-content",  "auto", "start");
 306
 307 element.style.alignContent = "flex-end";
 308 checkValues(element, "alignContent", "align-content",  "flex-end", "flex-end");
 309
 310 debug("");
 311 debug("Test bad combinations of align-content");
 312 element = document.createElement("div");
 313 document.body.appendChild(element);
 314
 315 checkBadValues(element, "alignContent", "align-content",  "");
 316 checkBadValues(element, "alignContent", "align-content",  "true auto");
 317 checkBadValues(element, "alignContent", "align-content",  "auto safe");
 318 checkBadValues(element, "alignContent", "align-content",  "auto left");
 319 checkBadValues(element, "alignContent", "align-content",  "baseline safe");
 320 checkBadValues(element, "alignContent", "align-content",  "last baseline center");
 321 checkBadValues(element, "alignContent", "align-content",  "true true");
 322 checkBadValues(element, "alignContent", "align-content",  "true safe");
 323 checkBadValues(element, "alignContent", "align-content",  "center start");
 324 checkBadValues(element, "alignContent", "align-content",  "baseline safe");
 325 checkBadValues(element, "alignContent", "align-content",  "true baseline");
 326 checkBadValues(element, "alignContent", "align-content",  "true safe left");
 327 checkBadValues(element, "alignContent", "align-content",  "true left safe");
 328 checkBadValues(element, "alignContent", "align-content",  "left safe true safe");
 329 checkBadValues(element, "alignContent", "align-content",  "start right space-between");
 330 checkBadValues(element, "alignContent", "align-content",  "safe stretch");
 331 checkBadValues(element, "alignContent", "align-content",  "space-around stretch");
 332 checkBadValues(element, "alignContent", "align-content",  "end space-between start");
 333 checkBadValues(element, "alignContent", "align-content",  "right safe left");
 334 checkBadValues(element, "alignContent", "align-content",  "true");
 335 checkBadValues(element, "alignContent", "align-content",  "safe");
 336
 337 debug("");
 338 debug("Test the value 'initial'");
 339 element.style.display = "";
 340 checkInitialValues(element, "alignContent", "align-content", "stretch center", "start");
 341
 342 debug("");
 343 debug("Test the value 'initial' for grid containers");
 344 element.style.display = "grid";
 345 checkInitialValues(element, "alignContent", "align-content", "space-between left", "start");
 346
 347 debug("");
 348 debug("Test the value 'initial' for flex containers");
 349 element.style.display = "flex";
 350 checkInitialValues(element, "alignContent", "align-content", "right true", "stretch");
 351
 352 debug("");
 353 debug("Test the value 'inherit'");
 354 checkInheritValues("alignContent", "align-content", "end");
 355 checkInheritValues("alignContent", "align-content", "left safe");
 356 checkInheritValues("alignContent", "align-content", "stretch center");
 357
 358 </script>
 359 </body>
 360 </html>