<!DOCTYPE html>
<style>
body {
    margin: 0px;
}
#container {
    position: absolute;
    top: 50px;
    width: 300px;
    font: 10px/1 Ahem;
}
</style>
<p>crbug.com/487775: There should be a green square to the right (and no assertion failures).</p>
<div id="container">
    <div id="firstChild" style="display:inline-block; width:100px;"></div>
    <div style="display:inline-block; width:100%; height:100px;"></div>
    <div style="float:right;">
        <div id="elm" style="width:100px; height:10px; background:green;"></div>
    </div>
</div>
<script>
    onload = function() {
        document.body.offsetTop;
        document.getElementById("elm").style.height = "100px";
        document.getElementById("firstChild").style.width = "101px";
    }
</script>