third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-content.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     display: flex;
   6     background-color: #aaa;
   7     position: relative;
   8     flex-wrap: wrap;
   9 }
  10
  11 .horizontal {
  12     width: 200px;
  13     height: 120px;
  14 }
  15 .horizontal > div {
  16     min-height: 20px;
  17 }
  18 .horizontal > :nth-child(1) {
  19     width: 100px;
  20     min-height: 10px;
  21 }
  22 .horizontal > :nth-child(2) {
  23     width: 100px;
  24 }
  25 .horizontal > :nth-child(3) {
  26     width: 200px;
  27 }
  28 .horizontal > :nth-child(4) {
  29     width: 50px;
  30 }
  31
  32 .vertical-rl {
  33     -webkit-writing-mode: vertical-rl;
  34     width: 120px;
  35     height: 20px;
  36 }
  37 .vertical-rl > div {
  38     min-width: 20px;
  39 }
  40 .vertical-rl > :nth-child(1) {
  41     height: 10px;
  42     min-width: 10px;
  43 }
  44 .vertical-rl > :nth-child(2) {
  45     height: 10px;
  46 }
  47 .vertical-rl > :nth-child(3) {
  48     height: 20px;
  49 }
  50 .vertical-rl > :nth-child(4) {
  51     height: 5px;
  52 }
  53
  54 .flexbox :nth-child(1) {
  55     background-color: lightblue;
  56 }
  57 .flexbox :nth-child(2) {
  58     background-color: lightgreen;
  59 }
  60 .flexbox :nth-child(3) {
  61     background-color: pink;
  62 }
  63 .flexbox :nth-child(4) {
  64     background-color: yellow;
  65 }
  66 </style>
  67 <script src="../../resources/check-layout.js"></script>
  68 <body onload="checkLayout('.flexbox')">
  69 <p>Test to make sure that align-content works properly.</p>
  70
  71 <div data-expected-height="120" class="flexbox horizontal">
  72   <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
  73   <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
  74   <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
  75   <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
  76 </div>
  77
  78 <div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start">
  79   <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
  80   <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
  81   <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
  82   <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
  83 </div>
  84
  85 <div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end">
  86   <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div>
  87   <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div>
  88   <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div>
  89   <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
  90 </div>
  91
  92 <div data-expected-height="120" class="flexbox horizontal" style="align-content: center">
  93   <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div>
  94   <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div>
  95   <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
  96   <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div>
  97 </div>
  98
  99 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between">
 100   <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
 101   <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
 102   <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
 103   <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
 104 </div>
 105
 106 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
 107   <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
 108   <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
 109   <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
 110   <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div>
 111 </div>
 112
 113 <div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch">
 114   <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
 115   <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
 116   <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
 117   <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
 118 </div>
 119
 120 <!-- Negative overflow goes out the top. -->
 121 <div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px">
 122   <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div>
 123   <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div>
 124   <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div>
 125   <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
 126 </div>
 127
 128 <!-- If we overflow, we should true center. -->
 129 <div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px">
 130   <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
 131   <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
 132   <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
 133   <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
 134 </div>
 135
 136 <!-- If we overflow, we should be the same as flex-start. -->
 137 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
 138   <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
 139   <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
 140   <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
 141   <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
 142 </div>
 143
 144 <!-- If we overflow, we should true center. -->
 145 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
 146   <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
 147   <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
 148   <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
 149   <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
 150 </div>
 151
 152 <!-- Stretch should only grow, not shrink. -->
 153 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
 154   <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
 155   <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
 156   <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
 157   <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
 158 </div>
 159
 160 <!-- 0 lines should not crash. -->
 161 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
 162 </div>
 163 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
 164 </div>
 165 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
 166 </div>
 167
 168 <!-- 1 line should not crash. -->
 169 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
 170   <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
 171 </div>
 172 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
 173   <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
 174 </div>
 175 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
 176   <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
 177 </div>
 178
 179
 180 <div data-expected-width="120" class="flexbox vertical-rl">
 181   <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
 182   <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
 183   <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
 184   <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
 185 </div>
 186
 187 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start">
 188   <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
 189   <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
 190   <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div>
 191   <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div>
 192 </div>
 193
 194 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end">
 195   <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
 196   <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
 197   <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
 198   <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
 199 </div>
 200
 201 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center">
 202   <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div>
 203   <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div>
 204   <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
 205   <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div>
 206 </div>
 207
 208 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between">
 209   <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
 210   <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
 211   <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
 212   <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
 213 </div>
 214
 215 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around">
 216   <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div>
 217   <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div>
 218   <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
 219   <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
 220 </div>
 221
 222 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
 223   <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
 224   <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
 225   <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
 226   <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
 227 </div>
 228
 229 <!-- Negative overflow goes out the right. -->
 230 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;">
 231   <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
 232   <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
 233   <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
 234   <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
 235 </div>
 236
 237 <!-- If we overflow, we should true center. -->
 238 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;">
 239   <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
 240   <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
 241   <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
 242   <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
 243 </div>
 244
 245 <!-- If we overflow, we should be the same as flex-start. -->
 246 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;">
 247   <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
 248   <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
 249   <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
 250   <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
 251 </div>
 252
 253 <!-- If we overflow, we should true center. -->
 254 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;">
 255   <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
 256   <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
 257   <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
 258   <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
 259 </div>
 260
 261 <!-- Stretch should only grow, not shrink. -->
 262 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
 263   <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
 264   <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
 265   <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
 266   <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
 267 </div>
 268
 269 <!-- 0 lines should not crash. -->
 270 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
 271 </div>
 272 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
 273 </div>
 274 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
 275 </div>
 276
 277 <!-- 1 line should not crash. -->
 278 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
 279   <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
 280 </div>
 281 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
 282   <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
 283 </div>
 284 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
 285   <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
 286 </div>
 287 </body>
 288 </html>