third_party/WebKit/LayoutTests/css3/flexbox/multiline-shrink-to-fit-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .testcase {
   5     float: left;
   6     background-color: #aaa;
   7 }
   8
   9 .testcase > :nth-child(1) {
  10     background-color: lightblue;
  11 }
  12 .testcase > :nth-child(2) {
  13     background-color: lightgreen;
  14 }
  15 .testcase > :nth-child(3) {
  16     background-color: pink;
  17 }
  18 .testcase > :nth-child(4) {
  19     background-color: yellow;
  20 }
  21
  22 table {
  23   border-spacing: 0;
  24   border-collapse: collapse;
  25 }
  26
  27 td {
  28   padding: 0;
  29   width: 100px;
  30 }
  31
  32 </style>
  33 <body>
  34 <p>Test to make sure that multiline column flexboxes shrink-to-fit properly.</p>
  35
  36 <div class="testcase" style="height: 60px; width: 100px">
  37   <div style="width: 100px; height: 20px"></div>
  38   <div style="width: 100px; height: 10px"></div>
  39   <div style="width: 100px; height: 10px"></div>
  40   <div style="width: 100px; height: 20px"></div>
  41 </div>
  42 <p style="clear:left">The grey background should be 100px wide.</p>
  43
  44 <div class="testcase" style="height: 30px; width: 100px">
  45   <table>
  46     <td>
  47       <div style="width: 100px; height: 20px"></div>
  48       <div style="width: 100px; height: 10px; background-color: lightgreen"></div>
  49     </td>
  50     <td>
  51       <div style="width: 100px; height: 10px; background-color: pink"></div>
  52       <div style="width: 100px; height: 20px; background-color: yellow"></div>
  53     </td>
  54   </table>
  55 </div>
  56 <p style="clear:left">The grey background should be 100px wide.</p>
  57
  58 <div style="width: 150px">
  59 <div class="testcase" style="height: 60px; width: 100px">
  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.</p>
  67
  68 <div style="width: 150px">
  69 <div class="testcase" style="height: 35px; width: 100px;">
  70   <table>
  71     <td>
  72       <div style="width: 100px; height: 20px"></div>
  73       <div style="width: 100px; height: 10px; background-color: lightgreen"></div>
  74     </td>
  75     <td>
  76       <div style="width: 100px; height: 10px; background-color: pink"></div>
  77       <div style="width: 100px; height: 20px; background-color: yellow"></div>
  78     </td>
  79   </table>
  80 </div>
  81 </div>
  82 <p style="clear:left">The grey background should be 100px wide and 5px should
  83 stick out the bottom.</p>
  84
  85 </body>
  86 </html>