<!DOCTYPE html>
<style>
body {
    margin: 0px;
}
.inner{
    float: left;
    display: none;
    width: 100px;
    height: 50px;
    background-color: green;
}
.clear {
    clear: both;
}
</style>
<div style="width: 100px;">
    <div>
        <div class="inner"></div>
        <div class="clear"></div>
    </div>
    <div style="margin-top: -20px;">
        <div class="clear" id="clear" style="width: 100px; height:50px; background-color: blue" data-offset-y=50></div>
    </div>
</div>
<div id="test-output"></div>
<script src="../../../resources/check-layout.js"></script>
<script>
    document.body.offsetTop;
    document.querySelector('.inner').style.display = 'block';
    window.checkLayout("#clear", document.getElementById("test-output"));
</script>
<p>crbug.com/530644 : Clear floats added dynamically to previous siblings. There should be a blue bar below the green bar and both should be 50px high.</p>