third_party/WebKit/LayoutTests/fast/multicol/min-height-greater-than-content.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/check-layout.js"></script>
   3 <style>
   4     .box { width:20px; height:80px; -webkit-column-break-inside:avoid; background:blue; }
   5 </style>
   6 <p>Min-height should make the multicol container taller if min-height is greater than the content
   7     height, but it should not affect column balancing. We specify column-fill:auto here, but the
   8     columns should still be balanced, because height is auto. Note that in this test, the balanced
   9     content is shorter than min-height, which is what matters. The height of the uncolumnized
  10     content (i.e. the flowthread), on the other hand, is actually greater than min-height (but that
  11     shouldn't make any difference).</p>
  12 <p>Below there should be a blue square above a yellow square.</p>
  13 <div id="test" style="position:relative; -webkit-columns:4; -webkit-column-gap:0; column-fill:auto; width:80px; min-height:160px; background:yellow;">
  14     <div class="box" data-offset-y="0"></div>
  15     <div class="box" data-offset-y="0"></div>
  16     <div class="box" data-offset-y="0"></div>
  17     <div class="box" data-offset-y="0"></div>
  18 </div>
  19 <script>
  20     checkLayout("#test");
  21 </script>