OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/check-layout.js"></script> |
| 3 <style> |
| 4 .box { width:20px; height:80px; -webkit-column-break-inside:avoid; backgroun
d: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:au
to 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 m
in-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> |
OLD | NEW |