<!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>