<!DOCTYPE html>
<style>
body { margin: 0px; padding; 0px; }
#div { display:block; width: 50px; height: 50px; background-color: green; }
.float { width: 50px; height: 50px; background-color: green; float: left; }
</style>
<div id="container" style="width: 500px;">
    <div style="height: 50px; width: 50px;"></div>
    <span>X</span>
    <div class="float"></div>
    <div id="div"></div>
    <div id="float" class="float" data-offset-y=50></div>
    <span>X</span>
</div>
<p>crbug.com/585064: Two contiguous anonymous blocks with inline content should be merged together. There should be a single green rectangle below.</p>
<script src="../../../resources/check-layout.js"></script>
<script>
document.body.offsetTop;
document.getElementById("div").style.float = 'left';
checkLayout("#container");
</script>