third_party/WebKit/LayoutTests/css3/flexbox/flex-align.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 body {
   6     margin: 0;
   7 }
   8 .flexbox {
   9     width: 600px;
  10     background-color: #aaa;
  11     position: relative;
  12 }
  13 .flexbox > div {
  14     border: 0;
  15 }
  16
  17 .flexbox :nth-child(1) {
  18     background-color: blue;
  19 }
  20 .flexbox :nth-child(2) {
  21     background-color: green;
  22 }
  23 .flexbox :nth-child(3) {
  24     background-color: red;
  25 }
  26 .flexbox :nth-child(4) {
  27     background-color: yellow;
  28 }
  29 .flexbox :nth-child(5) {
  30     background-color: purple;
  31 }
  32 .flexbox :nth-child(6) {
  33     background-color: orange;
  34 }
  35 .flexbox :nth-child(7) {
  36     background-color: lime;
  37 }
  38 .flexbox :nth-child(8) {
  39     background-color: lightblue;
  40 }
  41 .flexbox :nth-child(9) {
  42     background-color: darkred;
  43 }
  44 .flexbox :nth-child(10) {
  45     background-color: gold;
  46 }
  47 .flexbox :nth-child(11) {
  48     background-color: salmon;
  49 }
  50 </style>
  51 <script src="../../resources/check-layout.js"></script>
  52 <body onload="checkLayout('.flexbox')">
  53
  54 <!-- stretch is the default align-items so these flexitems should all have the same height. -->
  55 <div class="flexbox">
  56   <div data-expected-height="100" style="flex: 1 0 0;"></div>
  57   <div data-expected-height="100" style="flex: 1 0 0; height: 100px"></div>
  58   <div data-expected-height="100" style="flex: 1 0 0;"></div>
  59 </div>
  60
  61 <div class="flexbox">
  62   <div data-expected-height="60"  data-offset-y="0" style="flex: 1 0 0; height: 60px;"></div>
  63   <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;"></div>
  64   <div data-expected-height="60"  data-offset-y="30" style="flex: 1 0 0; height: 60px; margin: auto 0;"></div>
  65   <div data-expected-height="0" data-offset-y="120" style="flex: 1 0 0; margin: auto 0 0;"></div>
  66   <div data-expected-height="0" data-offset-y="60" style="flex: 1 0 0; margin: auto 0;"></div>
  67   <div data-expected-height="100" data-offset-y="10" style="flex: 1 0 0; height: 100px; margin: 10px 0;"></div>
  68   <div data-expected-height="50" data-offset-y="20" style="flex: 1 0 0; height: 50px; margin: 20px 0 10px;"></div>
  69   <div data-expected-height="90" data-offset-y="20" style="flex: 1 0 0; margin: 20px 0 10px;"></div>
  70   <div data-expected-height="120" data-offset-y="0" style="flex: 1 0 0;">
  71     <!-- Since no parent has a fixed height, this div shrink-wraps. -->
  72     <div data-expected-height="0" style="height: 100%; background-color:black"></div>
  73   </div>
  74 </div>
  75
  76 <div class="flexbox" style="align-items: flex-start">
  77     <div data-expected-height="0" data-offset-y="0" style="flex: 1 0 0;"></div>
  78     <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
  79 </div>
  80
  81 <div class="flexbox" style="align-items: flex-end">
  82     <div data-expected-height="0" data-offset-y="100" style="flex: 1 0 0;"></div>
  83     <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
  84 </div>
  85
  86 <div class="flexbox" style="align-items: center">
  87     <div data-expected-height="0" data-offset-y="50" style="flex: 1 0 0;"></div>
  88     <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
  89 </div>
  90
  91 <div class="flexbox" style="align-items: baseline">
  92     <div style="flex: 1 0 0;"><div style="display:inline-block;"></div></div>
  93     <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
  94 </div>
  95
  96 <div class="flexbox" style="align-items: stretch">
  97     <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div>
  98     <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
  99 </div>
 100
 101 <div class="flexbox" style="align-items: flex-start">
 102     <div data-expected-height="100" data-offset-y="0" style="align-self: auto; flex: 1 0 0; height: 100px;"></div>
 103     <div data-expected-height="0" data-offset-y="0" style="align-self: auto; flex: 1 0 0;"></div>
 104     <div data-expected-height="0" data-offset-y="0" style="align-self: flex-start; flex: 1 0 0;"></div>
 105     <div data-expected-height="0" data-offset-y="100" style="align-self: flex-end; flex: 1 0 0;"></div>
 106     <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
 107     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div style="display:inline-block;"></div></div>
 108     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
 109     <div data-offset-y="50" style="align-self: baseline; flex: 1 0 0; margin: auto 0;"></div>
 110     <div data-offset-y="30" style="align-self: baseline; flex: 1 0 0; margin: 30px 0 auto;"><div style="display:inline-block;"></div></div>
 111     <div data-offset-y="80" style="align-self: baseline; flex: 1 0 0; margin: auto 0 20px;"></div>
 112     <div data-expected-height="100" data-offset-y="0" style="align-self: stretch; flex: 1 0 0;"></div>
 113 </div>
 114
 115 <div class="flexbox" style="align-items: flex-end">
 116     <div data-expected-height="100" data-offset-y="0" style="align-self: auto; flex: 1 0 0; height: 100px;"></div>
 117     <div data-expected-height="0" data-offset-y="100" style="align-self: auto; flex: 1 0 0;"></div>
 118     <div data-expected-height="0" data-offset-y="0" style="align-self: flex-start; flex: 1 0 0;"></div>
 119     <div data-expected-height="0" data-offset-y="100" style="align-self: flex-end; flex: 1 0 0;"></div>
 120     <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
 121     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div style="display:inline-block;"></div></div>
 122     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
 123     <div data-expected-height="100" data-offset-y="0" style="align-self: stretch; flex: 1 0 0;"></div>
 124 </div>
 125
 126 <div class="flexbox" style="align-items: center">
 127     <div data-expected-height="100" data-offset-y="0" style="align-self: auto; flex: 1 0 0; height: 100px;"></div>
 128     <div data-expected-height="0" data-offset-y="50" style="align-self: auto; flex: 1 0 0;"></div>
 129     <div data-expected-height="0" data-offset-y="0" style="align-self: flex-start; flex: 1 0 0;"></div>
 130     <div data-expected-height="0" data-offset-y="100" style="align-self: flex-end; flex: 1 0 0;"></div>
 131     <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
 132     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div style="display:inline-block;"></div></div>
 133     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
 134     <div data-expected-height="100" data-offset-y="0" style="align-self: stretch; flex: 1 0 0;"></div>
 135 </div>
 136
 137 <div class="flexbox" style="align-items: baseline">
 138     <div data-expected-height="100" data-offset-y="0" style="align-self: flex-start; flex: 1 0 0; height: 100px;"></div>
 139     <div data-offset-y="20" style="align-self: auto; flex: 1 0 0;"><div style="display:inline-block;"></div></div>
 140     <div data-expected-height="0" data-offset-y="0" style="align-self: flex-start; flex: 1 0 0;"></div>
 141     <div data-expected-height="0" data-offset-y="100" style="align-self: flex-end; flex: 1 0 0;"></div>
 142     <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
 143     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div style="display:inline-block;"></div></div>
 144     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
 145     <div data-expected-height="100" data-offset-y="0" style="align-self: stretch; flex: 1 0 0;"></div>
 146 </div>
 147
 148 <div class="flexbox" style="align-items: stretch">
 149     <div data-expected-height="100" data-offset-y="0" style="align-self: auto; flex: 1 0 0; height: 100px;"></div>
 150     <div data-expected-height="100" data-offset-y="0" style="align-self: auto; flex: 1 0 0;"></div>
 151     <div data-expected-height="0" data-offset-y="0" style="align-self: flex-start; flex: 1 0 0;"></div>
 152     <div data-expected-height="0" data-offset-y="100" style="align-self: flex-end; flex: 1 0 0;"></div>
 153     <div data-expected-height="0" data-offset-y="50" style="align-self: center; flex: 1 0 0;"></div>
 154     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0;"><div style="display:inline-block;"></div></div>
 155     <div data-offset-y="20" style="align-self: baseline; flex: 1 0 0; margin: 20px;"><div style="display:inline-block;"></div></div>
 156     <div data-expected-height="100" data-offset-y="0" style="align-self: stretch; flex: 1 0 0;"></div>
 157 </div>
 158
 159 <div class="flexbox" style="height: 100px;">
 160   <div data-expected-height="50"  data-offset-y="0" style="flex: 1 0 0; height: 50px;"></div>
 161   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div>
 162   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100%;">
 163     <div data-expected-height="100" style="height: 100%; background-color:black"></div>
 164   </div>
 165 </div>
 166
 167 <div class="flexbox" style="height: 100px;">
 168   <div data-expected-height="50"  data-offset-y="0" style="flex: 1 0 0; height: 50px;"></div>
 169   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div>
 170 </div>
 171
 172 <div class="flexbox">
 173   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 50px;"></div>
 174   <div data-expected-height="70" data-offset-y="0" style="flex: 1 0 0; height: 70px;"></div>
 175   <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; height: 50px; margin: auto 0 0;"></div>
 176   <div data-expected-height="70" data-offset-y="0" style="flex: 1 0 0; height: 70px; margin: 0 0 auto"></div>
 177   <div data-expected-height="70" data-offset-y="0" style="flex: 1 0 0; height: 70px;"></div>
 178   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 179 </div>
 180
 181 <div class="flexbox">
 182   <div data-expected-height="0" data-offset-y="0" style="flex: 1 0 0; align-self: flex-start;"></div>
 183   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: flex-start; height: 50px;"></div>
 184   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: flex-start; height: 50px; margin: auto 0"></div>
 185   <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-self: flex-start; height: 50px; margin: auto 0 0"></div>
 186   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: flex-start; height: 50px; margin: 0 0 auto"></div>
 187   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: flex-start; height: 50px; margin: 25px 0"></div>
 188   <div data-expected-height="50" data-offset-y="20" style="flex: 1 0 0; align-self: flex-start; height: 50px; margin: 20px 0 10px;"></div>
 189   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 190 </div>
 191
 192 <div class="flexbox">
 193   <div data-expected-height="0" data-offset-y="100" style="flex: 1 0 0; align-self: flex-end;"></div>
 194   <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-self: flex-end; height: 50px;"></div>
 195   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: flex-end; height: 50px; margin: auto 0"></div>
 196   <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-self: flex-end; height: 50px; margin: auto 0 0"></div>
 197   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: flex-end; height: 50px; margin: 0 0 auto"></div>
 198   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: flex-end; height: 50px; margin: 25px 0"></div>
 199   <div data-expected-height="50" data-offset-y="40" style="flex: 1 0 0; align-self: flex-end; height: 50px; margin: 20px 0 10px;"></div>
 200   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 201 </div>
 202
 203 <div class="flexbox">
 204   <div data-expected-height="0" data-offset-y="50" style="flex: 1 0 0; align-self: center;"></div>
 205   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: center; height: 50px;"></div>
 206   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: center; height: 50px; margin: auto 0"></div>
 207   <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-self: center; height: 50px; margin: auto 0 0"></div>
 208   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: center; height: 50px; margin: 0 0 auto"></div>
 209   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: center; height: 50px; margin: 0 0 auto"></div>
 210   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: center; height: 50px; margin: 25px 0"></div>
 211   <div data-expected-height="50" data-offset-y="30" style="flex: 1 0 0; align-self: center; height: 50px; margin: 20px 0 10px;"></div>
 212   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 213 </div>
 214
 215 <div class="flexbox">
 216   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: flex-start; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
 217   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: center; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
 218   <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-self: flex-end; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
 219   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 50px; -webkit-writing-mode: vertical-rl;"></div>
 220   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; height: 50px; margin: auto 0; -webkit-writing-mode: vertical-rl;"></div>
 221   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px; -webkit-writing-mode: vertical-rl;"></div>
 222 </div>
 223
 224 <div class="flexbox">
 225   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: flex-start; height: 50px;"></div>
 226   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: center; height: 50px;"></div>
 227   <div data-expected-height="50" data-offset-y="50" style="flex: 1 0 0; align-self: flex-end; height: 50px;"></div>
 228   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; height: 50px;"></div>
 229   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; height: 50px; margin: auto 0"></div>
 230   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0;"></div>
 231   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 232 </div>
 233
 234 <div class="flexbox">
 235   <div data-expected-height="20" data-offset-y="20" style="flex: 1 0 0; align-self: baseline; height: 20px;"></div>
 236   <div data-expected-height="10" data-offset-y="30" style="flex: 1 0 0; align-self: baseline; height: 10px; margin: 30px 0 10px;"></div>
 237   <div data-expected-height="10" data-offset-y="30" style="flex: 1 0 0; align-self: baseline; height: 10px; margin: 20px 0 0;"></div>
 238   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 239 </div>
 240
 241 <div class="flexbox" style="max-height: 20px">
 242   <div data-expected-height="40" data-offset-y="-10" style="flex: 1 0 0; align-self: center; height: 40px;"></div>
 243   <div data-expected-height="40" data-offset-y="-20" style="flex: 1 0 0; align-self: flex-end; height: 40px;"></div>
 244   <div data-expected-height="40" data-offset-y="0" style="flex: 1 0 0; height: 40px;"></div>
 245   <div data-expected-height="20" data-offset-y="0" style="flex: 1 0 0;"></div>
 246 </div>
 247
 248 <div class="flexbox">
 249   <div id="baseline1" style="flex: 1 0 0; align-self: baseline;">ahem</div>
 250   <div id="baseline2" data-offset-y="0" style="flex: 1 0 0; align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
 251   <div data-expected-height="50" data-offset-y="25" style="flex: 1 0 0; align-self: center;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
 252   <div id="baseline3" data-expected-height="50" style="flex: 1 0 0; align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
 253   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 254 </div>
 255
 256 <div class="flexbox">
 257   <div id="baseline4" style="flex: 1 0 0; align-self: baseline;">ahem</div>
 258   <div id="baseline5" style="flex: 1 0 0; align-self: baseline;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px;"></div>
 259   <div data-expected-height="50" data-offset-y="0" style="flex: 1 0 0; align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px; vertical-align: middle"></div>
 260   <div data-expected-height="100" data-offset-y="0" style="flex: 1 0 0; height: 100px;"></div>
 261 </div>
 262
 263 <div id="results"></div>
 264
 265 <script>
 266 function additionalBaselineChecks()
 267 {
 268     var baseline1 = document.getElementById("baseline1");
 269     var baseline2 = document.getElementById("baseline2");
 270     var baseline3 = document.getElementById("baseline3");
 271     logIfFalse(baseline1.offsetTop + baseline1.offsetHeight == baseline2.offsetTop + baseline2.offsetHeight,
 272                "baseline1 and baseline2 should have the same baseline.");
 273     logIfFalse(baseline3.offsetTop < 25,
 274                "baseline3 should be above the center align-selfed item.");
 275
 276     var baseline4 = document.getElementById("baseline4");
 277     var baseline5 = document.getElementById("baseline5");
 278     logIfFalse(baseline4.offsetTop == baseline5.offsetTop,
 279                "baseline4 and baseline5 should be top aligned with each other.");
 280     logIfFalse(baseline4.offsetTop > 0,
 281                "baseline4 and baseline5 should be below baseline6.");
 282 }
 283
 284 function logIfFalse(condition, msg)
 285 {
 286     if (!condition)
 287         document.getElementById("results").innerText += msg;
 288 }
 289
 290 additionalBaselineChecks();
 291 </script>
 292
 293 </body>
 294 </html>