src/third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html

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