| <!DOCTYPE html> |
| <script src="../../resources/check-layout.js"></script> |
| <p>Test that space is reserved for the top margin of a float that is pushed to the next column. It |
| gets pushed to next column because it's unbreakable and too tall to fit at its designated |
| position in the first column.</p> |
| <p>There should be a blue rectangle below.</p> |
| <div id="test" style="position:relative; -webkit-columns:3; -webkit-column-gap:0; column-fill:auto; width:150px; height:90px; line-height:20px;"> |
| <div style="margin-top:5px; margin-bottom:15px; height:40px; background:blue;"></div> |
| <div data-offset-y="5" style="float:left; width:100%; margin-top:5px; -webkit-column-break-inside:avoid; background:blue;"> |
| <div data-offset-y="5"> |
| <br><br> |
| </div> |
| </div> |
| </div> |
| <script> |
| checkLayout("#test"); |
| </script> |
