src/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 #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, '').getPropertyValue('justify-content')", "baseline");
 166
 167 var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
 168 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "last-baseline");
 169
 170 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
 171 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "space-between");
 172
 173 var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
 174 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "space-around");
 175
 176 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
 177 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "space-evenly");
 178
 179 var justifyContentStretch = document.getElementById("justifyContentStretch");
 180 shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "stretch");
 181
 182 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
 183 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "space-between safe");
 184
 185 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpaceAroundTrue");
 186 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundTrue, '').getPropertyValue('justify-content')", "space-around true");
 187
 188 var justifyContentStretchTrue = document.getElementById("justifyContentStretchTrue");
 189 shouldBeEqualToString("getComputedStyle(justifyContentStretchTrue, '').getPropertyValue('justify-content')", "stretch true");
 190
 191 var justifyContentStart = document.getElementById("justifyContentStart");
 192 shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValue('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, '').getPropertyValue('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, '').getPropertyValue('justify-content')", "right");
 205
 206 var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
 207 shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "flex-start");
 208
 209 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
 210 shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "flex-end");
 211
 212 var justifyContentEndTrue = document.getElementById("justifyContentEndTrue");
 213 shouldBeEqualToString("getComputedStyle(justifyContentEndTrue, '').getPropertyValue('justify-content')", "end true");
 214
 215 var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue");
 216 shouldBeEqualToString("getComputedStyle(justifyContentCenterTrue, '').getPropertyValue('justify-content')", "center true");
 217
 218 var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
 219 shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "right safe");
 220
 221 var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue");
 222 shouldBeEqualToString("getComputedStyle(justifyContentLeftTrue, '').getPropertyValue('justify-content')", "left true");
 223
 224 var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexStartTrue");
 225 shouldBeEqualToString("getComputedStyle(justifyContentFlexStartTrue, '').getPropertyValue('justify-content')", "flex-start true");
 226
 227 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
 228 shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "flex-end safe");
 229
 230 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
 231 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "space-between left");
 232
 233 var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
 234 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "space-around center");
 235
 236 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
 237 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "space-evenly right");
 238
 239 var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
 240 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "stretch start safe");
 241
 242 var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSpaceAroundEndTrue");
 243 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndTrue, '').getPropertyValue('justify-content')", "space-around end true");
 244
 245 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
 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-content')", "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", "flex-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", "stretch 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 center");
 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 safe");
 309 checkBadValues(element, "justifyContent", "justify-content",  "start space-between");
 310 checkBadValues(element, "justifyContent", "justify-content",  "safe end stretch");
 311 checkBadValues(element, "justifyContent", "justify-content",  "space-around stretch");
 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>