hr-with-float.html | Explore in Territory

<!DOCTYPE html>
<style>
    .child { float:left; width:100%; height:100px; }
</style>
<p>There should be a blue square below.</p>
<div style="position:relative; width:100px;">
    <div style="float:left; width:50px; height:100px; background:blue;"></div>
    <hr id="hr" style="width:50px; border:none; background:blue;">
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    // The HTML parser auto-terminates HR elements, so we need to add a child
    // like this:
    var child = document.createElement("div");
    child.className = "child";
    document.getElementById("hr").appendChild(child);

    test(() => {
	var hr = document.getElementById("hr");
        assert_equals(hr.offsetLeft, 50);
        assert_equals(hr.offsetHeight, 100);
    }, "HR establishes a block formatting context");
</script>

chromium/third_party/blink/web_tests/fast/block/hr-with-float.html