float-on-line-large-and-small-float-below.html

<!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>
chromium/third_party/blink/web_tests/fast/block/float/float-on-line-large-and-small-float-below.html
