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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #justifyItemsBaseline {
   6     justify-items: baseline;
   7 }
   8
   9 #justifyItemsLastBaseline {
  10     justify-items: last-baseline;
  11 }
  12
  13 #justifyItemsStretch {
  14     justify-items: stretch;
  15 }
  16
  17 #justifyItemsStart {
  18     justify-items: start;
  19 }
  20
  21 #justifyItemsEnd {
  22     justify-items: end;
  23 }
  24
  25 #justifyItemsCenter {
  26     justify-items: center;
  27 }
  28
  29 #justifyItemsSelfStart {
  30     justify-items: self-start;
  31 }
  32
  33 #justifyItemsSelfEnd {
  34     justify-items: self-end;
  35 }
  36
  37 #justifyItemsLeft {
  38     justify-items: left;
  39 }
  40
  41 #justifyItemsRight {
  42     justify-items: right;
  43 }
  44
  45 #justifyItemsFlexStart {
  46     justify-items: flex-start;
  47 }
  48
  49 #justifyItemsFlexEnd {
  50     justify-items: flex-end;
  51 }
  52
  53 #justifyItemsEndTrue {
  54     justify-items: end true;
  55 }
  56
  57 #justifyItemsCenterTrue {
  58     justify-items: center true;
  59 }
  60
  61 #justifyItemsSelfEndSafe {
  62     justify-items: self-end safe;
  63 }
  64
  65 #justifyItemsSelfStartSafe {
  66     justify-items: self-start safe;
  67 }
  68
  69 #justifyItemsRightSafe {
  70     justify-items: right safe;
  71 }
  72
  73 #justifyItemsLeftTrue {
  74     justify-items: left true;
  75 }
  76
  77 #justifyItemsFlexStartTrue {
  78     justify-items: flex-start true;
  79 }
  80
  81 #justifyItemsFlexEndSafe {
  82     justify-items: flex-end safe;
  83 }
  84
  85 #justifyItemsLegacyLeft {
  86     justify-items: legacy left;
  87 }
  88
  89 #justifyItemsLegacyCenter {
  90     justify-items: legacy center;
  91 }
  92
  93 #justifyItemsLegacyRight {
  94     justify-items: legacy right;
  95 }
  96
  97 #justifyItemsLeftLegacy {
  98     justify-items: left legacy;
  99 }
 100
 101 #justifyItemsCenterLegacy {
 102     justify-items: center legacy;
 103 }
 104
 105 #justifyItemsRightLegacy {
 106     justify-items: right legacy;
 107 }
 108 </style>
 109 <script src="../../resources/js-test.js"></script>
 110 </head>
 111 <body>
 112 <div id="justifyItemsBaseline"></div>
 113 <div id="justifyItemsLastBaseline"></div>
 114 <div id="justifyItemsStretch"></div>
 115 <div id="justifyItemsStart"></div>
 116 <div id="justifyItemsEnd"></div>
 117 <div id="justifyItemsCenter"></div>
 118 <div id="justifyItemsSelfStart"></div>
 119 <div id="justifyItemsSelfEnd"></div>
 120 <div id="justifyItemsLeft"></div>
 121 <div id="justifyItemsRight"></div>
 122 <div id="justifyItemsFlexStart"></div>
 123 <div id="justifyItemsFlexEnd"></div>
 124
 125 <div id="justifyItemsEndTrue"></div>
 126 <div id="justifyItemsCenterTrue"></div>
 127 <div id="justifyItemsSelfEndSafe"></div>
 128 <div id="justifyItemsSelfStartSafe"></div>
 129 <div id="justifyItemsRightSafe"></div>
 130 <div id="justifyItemsLeftTrue"></div>
 131 <div id="justifyItemsFlexStartTrue"></div>
 132 <div id="justifyItemsFlexEndSafe"></div>
 133 <div id="justifyItemsLegacyLeft"></div>
 134 <div id="justifyItemsLegacyCenter"></div>
 135 <div id="justifyItemsLegacyRight"></div>
 136 <div id="justifyItemsLeftLegacy"></div>
 137 <div id="justifyItemsCenterLegacy"></div>
 138 <div id="justifyItemsRightLegacy"></div>
 139 <script src="resources/alignment-parsing-utils.js"></script>
 140 <script>
 141 description('Test that setting and getting justify-items works as expected');
 142
 143 debug("Test getting justify-items set through CSS");
 144 var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
 145 shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items')", "'baseline'");
 146
 147 var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
 148 shouldBe("getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items')", "'last-baseline'");
 149
 150 var justifyItemsStretch = document.getElementById("justifyItemsStretch");
 151 shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items')", "'stretch'");
 152
 153 var justifyItemsStart = document.getElementById("justifyItemsStart");
 154 shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items')", "'start'");
 155
 156 var justifyItemsEnd = document.getElementById("justifyItemsEnd");
 157 shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items')", "'end'");
 158
 159 var justifyItemsCenter = document.getElementById("justifyItemsCenter");
 160 shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items')", "'center'");
 161
 162 var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
 163 shouldBe("getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items')", "'self-end'");
 164
 165 var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
 166 shouldBe("getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items')", "'self-start'");
 167
 168 var justifyItemsLeft = document.getElementById("justifyItemsLeft");
 169 shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items')", "'left'");
 170
 171 var justifyItemsRight = document.getElementById("justifyItemsRight");
 172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items')", "'right'");
 173
 174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
 175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items')", "'flex-start'");
 176
 177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
 178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items')", "'flex-end'");
 179
 180 var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue");
 181 shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-items')", "'end true'");
 182
 183 var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue");
 184 shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify-items')", "'center true'");
 185
 186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
 187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items')", "'self-end safe'");
 188
 189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
 190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items')", "'self-start safe'");
 191
 192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
 193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items')", "'right safe'");
 194
 195 var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue");
 196 shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-items')", "'left true'");
 197
 198 var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTrue");
 199 shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('justify-items')", "'flex-start true'");
 200
 201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
 202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items')", "'flex-end safe'");
 203
 204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
 205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items')", "'legacy left'");
 206
 207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
 208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items')", "'legacy center'");
 209
 210 var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
 211 shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items')", "'legacy right'");
 212
 213 var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
 214 shouldBe("getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items')", "'legacy left'");
 215
 216 var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
 217 shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items')", "'legacy center'");
 218
 219 var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
 220 shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items')", "'legacy right'");
 221
 222 debug("");
 223 debug("Test initial value of justify-items through JS");
 224 element = document.createElement("div");
 225 document.body.appendChild(element);
 226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
 227
 228 debug("");
 229 debug("Test getting and setting justify-items through JS");
 230 element = document.createElement("div");
 231 document.body.appendChild(element);
 232 element.style.justifyItems = "center";
 233 checkValues(element, "justifyItems", "justify-items",  "center", "center");
 234
 235 element.style.justifyItems = "true start";
 236 checkValues(element, "justifyItems", "justify-items",  "start true", "start true");
 237
 238 element.style.justifyItems = "flex-end safe";
 239 checkValues(element, "justifyItems", "justify-items",  "flex-end safe", "flex-end safe");
 240
 241 element.style.justifyItems = "right legacy";
 242 checkValues(element, "justifyItems", "justify-items",  "legacy right", "legacy right");
 243
 244 element.style.justifyItems = "center legacy";
 245 checkValues(element, "justifyItems", "justify-items",  "legacy center", "legacy center");
 246
 247 element.style.justifyItems = "left legacy";
 248 checkValues(element, "justifyItems", "justify-items",  "legacy left", "legacy left");
 249
 250 element.style.justifyItems = "auto";
 251 checkValues(element, "justifyItems", "justify-items",  "auto", "start");
 252
 253 element.style.display = "flex";
 254 element.style.justifyItems = "auto";
 255 checkValues(element, "justifyItems", "justify-items",  "auto", "stretch");
 256
 257 element.style.display = "grid";
 258 element.style.justifyItems = "auto";
 259 checkValues(element, "justifyItems", "justify-items",  "auto", "stretch");
 260
 261 element.style.justifyItems = "self-end";
 262 checkValues(element, "justifyItems", "justify-items",  "self-end", "self-end");
 263
 264 debug("");
 265 debug("Test bad combinations of justify-items");
 266 element = document.createElement("div");
 267 document.body.appendChild(element);
 268
 269 checkBadValues(element, "justifyItems", "justify-items",  "true auto");
 270 checkBadValues(element, "justifyItems", "justify-items",  "auto safe");
 271 checkBadValues(element, "justifyItems", "justify-items",  "auto left");
 272 checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
 273 checkBadValues(element, "justifyItems", "justify-items",  "baseline center");
 274 checkBadValues(element, "justifyItems", "justify-items",  "stretch true");
 275 checkBadValues(element, "justifyItems", "justify-items",  "stretch right");
 276 checkBadValues(element, "justifyItems", "justify-items",  "true true");
 277 checkBadValues(element, "justifyItems", "justify-items",  "true safe");
 278 checkBadValues(element, "justifyItems", "justify-items",  "center start");
 279 checkBadValues(element, "justifyItems", "justify-items",  "stretch true");
 280 checkBadValues(element, "justifyItems", "justify-items",  "safe stretch");
 281 checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
 282 checkBadValues(element, "justifyItems", "justify-items",  "true baseline");
 283 checkBadValues(element, "justifyItems", "justify-items",  "true safe left");
 284 checkBadValues(element, "justifyItems", "justify-items",  "true left safe");
 285 checkBadValues(element, "justifyItems", "justify-items",  "left safe true safe");
 286 checkBadValues(element, "justifyItems", "justify-items",  "legacy start");
 287 checkBadValues(element, "justifyItems", "justify-items",  "legacy end");
 288 checkBadValues(element, "justifyItems", "justify-items",  "legacy right true");
 289 checkBadValues(element, "justifyItems", "justify-items",  "legacy auto");
 290 checkBadValues(element, "justifyItems", "justify-items",  "legacy stretch");
 291 checkBadValues(element, "justifyItems", "justify-items",  "legacy");
 292 checkBadValues(element, "justifyItems", "justify-items",  "legacy left right");
 293
 294 debug("");
 295 debug("Test the value 'initial'");
 296 element.style.display = "";
 297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "start");
 298
 299 debug("");
 300 debug("Test the value 'initial' for grid containers");
 301 element.style.display = "grid";
 302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stretch");
 303
 304 debug("");
 305 debug("Test the value 'initial' for flex containers");
 306 element.style.display = "flex";
 307 checkInitialValues(element, "justifyItems", "justify-items", "right true", "stretch");
 308
 309 debug("");
 310 debug("Test the value 'inherit'");
 311 checkInheritValues("justifyItems", "justify-items", "end");
 312 checkInheritValues("justifyItems", "justify-items", "left safe");
 313 checkInheritValues("justifyItems", "justify-items", "legacy center");
 314
 315 debug("");
 316 debug("Test the value 'legacy'");
 317 checkLegacyValues("justifyItems", "justify-items", "legacy left");
 318 checkLegacyValues("justifyItems", "justify-items", "legacy center");
 319 checkLegacyValues("justifyItems", "justify-items", "legacy right");
 320
 321 </script>
 322 </body>
 323 </html>