<!DOCTYPE>
<html>
<head>
<style>
    body { zoom: 150%; }
    #container { float: left; }
    #container > div { float: left; height: 20px; width: 20px; margin-left: -1px; background: orange; }
    #bottom { clear: both; }
</style>
</head>
<body>

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<div id="bottom">The three blocks above should all be on the same line.</div>

<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    var rect = document.getElementById('container').getBoundingClientRect();
    var height = rect.bottom - rect.top;

    if (height == 20)
        str = 'PASS, the three blocks are all on the same line';
    else
        str = 'FAIL, expected the blocks to all be on one line';

    document.getElementById('bottom').firstChild.nodeValue = str;
</script>

</body>
</html>