third_party/WebKit/LayoutTests/css3/flexbox/multiline-shrink-to-fit.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     flex-direction: column;
  10     float: left;
  11     align-content: flex-start;
  12 }
  13 .flexbox > * {
  14     flex: none;
  15 }
  16 .flexbox :nth-child(1) {
  17     background-color: lightblue;
  18 }
  19 .flexbox :nth-child(2) {
  20     background-color: lightgreen;
  21 }
  22 .flexbox :nth-child(3) {
  23     background-color: pink;
  24 }
  25 .flexbox :nth-child(4) {
  26     background-color: yellow;
  27 }
  28 </style>
  29 <body>
  30 <p>Test to make sure that multiline column flexboxes shrink-to-fit properly.</p>
  31
  32 <div class="flexbox">
  33   <div style="width: 100px; height: 20px"></div>
  34   <div style="width: 100px; height: 10px"></div>
  35   <div style="width: 100px; height: 10px"></div>
  36   <div style="width: 100px; height: 20px"></div>
  37 </div>
  38 <p style="clear:left">The grey background should be 100px wide.</p>
  39
  40 <div class="flexbox" style="height: 30px">
  41   <div style="width: 100px; height: 20px"></div>
  42   <div style="width: 100px; height: 10px"></div>
  43   <div style="width: 100px; height: 10px"></div>
  44   <div style="width: 100px; height: 20px"></div>
  45 </div>
  46 <p style="clear:left">The grey background should be 100px wide.</p>
  47
  48 <div style="width: 150px">
  49 <div class="flexbox">
  50   <div style="width: 100px; height: 20px"></div>
  51   <div style="width: 100px; height: 10px"></div>
  52   <div style="width: 100px; height: 10px"></div>
  53   <div style="width: 100px; height: 20px"></div>
  54 </div>
  55 </div>
  56 <p style="clear:left">The grey background should be 100px wide.</p>
  57
  58 <div style="width: 150px">
  59 <div class="flexbox" style="height: 35px">
  60   <div style="width: 100px; height: 20px"></div>
  61   <div style="width: 100px; height: 10px"></div>
  62   <div style="width: 100px; height: 10px"></div>
  63   <div style="width: 100px; height: 20px"></div>
  64 </div>
  65 </div>
  66 <p style="clear:left">The grey background should be 100px wide and 5px should
  67 stick out the bottom.</p>
  68
  69 </body>
  70 </html>