third_party/WebKit/LayoutTests/css3/flexbox/multiline-column-auto.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     display: flex;
   6     background-color: #aaa;
   7     position: relative;
   8     flex-flow: column wrap;
   9     margin-top: 20px;
  10     align-content: flex-start;
  11 }
  12 .flexbox > div {
  13     border: 0;
  14     flex: none;
  15 }
  16
  17 .flexbox :nth-child(1) {
  18     background-color: lightblue;
  19 }
  20 .flexbox :nth-child(2) {
  21     background-color: lightgreen;
  22 }
  23 .flexbox :nth-child(3) {
  24     background-color: pink;
  25 }
  26 .flexbox :nth-child(4) {
  27     background-color: yellow;
  28 }
  29 </style>
  30 <script src="../../resources/check-layout.js"></script>
  31 <body onload="checkLayout('.flexbox')">
  32 <p>Test to make sure that multiline columns break at the right places when auto sized.</p>
  33
  34 <div data-expected-width="200" data-expected-height="80" class="flexbox" style="width: 200px">
  35   <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div>
  36   <div data-offset-x="0" data-offset-y="20" style="width: 50px; height: 20px"></div>
  37   <div data-offset-x="0" data-offset-y="40" style="width: 50px; height: 20px"></div>
  38   <div data-offset-x="0" data-offset-y="60" style="width: 50px; height: 20px"></div>
  39 </div>
  40
  41 <div data-expected-width="200" data-expected-height="40" class="flexbox" style="width: 200px; max-height: 50px;">
  42   <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div>
  43   <div data-offset-x="0" data-offset-y="20" style="width: 50px; height: 20px"></div>
  44   <div data-offset-x="50" data-offset-y="0" style="width: 50px; height: 20px"></div>
  45   <div data-offset-x="50" data-offset-y="20" style="width: 50px; height: 20px"></div>
  46 </div>
  47
  48 <div data-expected-width="200" data-expected-height="50" class="flexbox" style="width: 200px; height: 50px;">
  49   <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div>
  50   <div data-offset-x="0" data-offset-y="20" style="width: 50px; height: 20px"></div>
  51   <div data-offset-x="50" data-offset-y="0" style="width: 50px; height: 20px"></div>
  52   <div data-offset-x="50" data-offset-y="20" style="width: 50px; height: 20px"></div>
  53 </div>
  54
  55 <div data-expected-width="200" data-expected-height="30" class="flexbox" style="width: 200px; height: 50px; max-height: 30px;">
  56   <div data-offset-x="0" data-offset-y="0" style="width: 50px; height: 20px"></div>
  57   <div data-offset-x="50" data-offset-y="0" style="width: 50px; height: 20px"></div>
  58   <div data-offset-x="100" data-offset-y="0" style="width: 50px; height: 20px"></div>
  59   <div data-offset-x="150" data-offset-y="0" style="width: 50px; height: 20px"></div>
  60 </div>
  61
  62 </body>
  63 </html>