third_party/WebKit/LayoutTests/fast/multicol/float-with-margin-moved-by-child-block.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/check-layout.js"></script>
   3 <p>Test that space is reserved for the top margin of a float that is pushed to the next column. It
   4     gets pushed to next column because its child block wants to move. The child block wants to move
   5     because its first line cannot fit at its designated position in the first column.</p>
   6 <p>There should be a blue rectangle below.</p>
   7 <div id="test" style="position:relative; -webkit-columns:3; -webkit-column-gap:0; column-fill:auto; width:150px; height:90px; line-height:20px;">
   8     <div style="margin-top:5px; margin-bottom:15px; height:40px; background:blue;"></div>
   9     <br>
  10     <div data-offset-y="5" style="float:left; width:100%; margin-top:5px; background:blue;">
  11         <div data-offset-y="5">
  12             <br><br>
  13         </div>
  14     </div>
  15 </div>
  16 <script>
  17     checkLayout("#test");
  18 </script>