clear-nested-float-more-than-one-previous-sibling-away.html

<!DOCTYPE html>
<style>
html, body { margin: 0; padding: 0 }
#float {
    float: right;
    background: green;
    width: 100px;
    height: 50px;
}

#test {
    width: 100px;
    height: 50px;
    overflow: hidden;
    margin-top: -50px;
    background: green;
}

.clear {
    display: block;
    clear: both;
    height: 0px;
}

#red {
    position:absolute;
    width:100px;
    height:100px;
    background-color: red;
    top:0px;
    z-index: -1;
}
</style>
<div id="red"></div>
<div style="width: 100px;">
    <div>
        <div id="float"></div>
        <div class="clear">Test</div>
    </div>
    <div>Test</div>
</div>
<div id="test" data-offset-y=50></div>
<script src="../../../resources/check-layout.js"></script>
<script>
window.checkLayout("#test", document.getElementById("test-output"));
</script>
<p>crbug.com/535381 : Clear floats nested in earlier siblings. There should be a green box and no red.</p>

chromium/third_party/blink/web_tests/fast/block/margin-collapse/clear-nested-float-more-than-one-previous-sibling-away.html