| <!DOCTYPE html> |
| <p>There should be a blue rectangle centered at the bottom of a brown rectangle.</p> |
| <div id="house" style="position:relative; columns:3; column-gap:0; line-height:20px; width:120px; orphans:1; widows:1; background:brown;"> |
| <br> |
| <br> |
| <br> |
| <div id="doorTop" style="float:left; width:100%; margin-top:20px; background:blue;"><br></div> |
| <div style="clear:both;"> |
| <div id="doorBottom" style="background:blue;"><br></div> |
| <br> |
| <br> |
| </div> |
| </div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| var house = document.getElementById("house"); |
| var doorTop = document.getElementById("doorTop"); |
| var doorBottom = document.getElementById("doorBottom"); |
| assert_equals(house.offsetHeight, 60); |
| assert_equals(doorTop.offsetTop, 20); |
| assert_equals(doorTop.offsetHeight, 20); |
| assert_equals(doorBottom.offsetTop, 40); |
| assert_equals(doorBottom.offsetHeight, 20); |
| }, "Float that should be pushed to the top of the second column."); |
| </script> |
