| <!DOCTYPE html> |
| <p>There should be a smaller hotpink square below a larger blue |
| square. They should not overlap.</p> |
| <div style="position:relative; width:100px;"> |
| <span id="inlineBlock" style="display:inline-block; width:40px; height:10px;"></span> |
| <div id="onLine" style="float:left; width:40px; height:40px;"></div> |
| <div id="largeBelow" style="float:left; width:100px; height:100px; background:blue;"></div> |
| <div id="smallBelow" style="float:left; width:40px; height:40px; background:hotpink;"></div> |
| </div> |
| <div style="clear:both;"></div> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| var inlineBlock = document.getElementById("inlineBlock"); |
| var onLine = document.getElementById("onLine"); |
| var largeBelow = document.getElementById("largeBelow"); |
| var smallBelow = document.getElementById("smallBelow"); |
| assert_equals(inlineBlock.offsetLeft, 40); |
| assert_equals(onLine.offsetLeft, 0); |
| assert_equals(onLine.offsetTop, 0); |
| assert_equals(largeBelow.offsetLeft, 0); |
| assert_equals(largeBelow.offsetTop, 40); |
| assert_equals(smallBelow.offsetLeft, 0); |
| assert_equals(smallBelow.offsetTop, 140); |
| }, "Large and smaller float pushed below line with float"); |
| </script> |
