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

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