<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
    <title></title>
    <style type="text/css">
        div.ib { display: inline-block; width: 20px; height: 20px; }
    </style>
    <script type="text/javascript">
    function test()
    {
        var a = document.getElementById('a');
        var b = document.getElementById('b');

        document.body.offsetTop;    // force layout
        a.style.width = '40px';
        
        document.body.offsetTop;
        b.style.width = '35px';
    }
    </script>
</head>
<body onload="test()">
    <p>
        This test checks for a regression against <i><a href="https://bugs.webkit.org/show_bug.cgi?id=6276">http://bugzilla.opendarwin.org/show_bug.cgi?id=6276</a>
        Image thumbnails are misplaced on forum.2ostrov.ru</i>.
    </p>
    <hr>
    <p>
        Box 1 and box 2 should be identical.
    </p>
    Box 1:
    <div style="border: 1px black solid; width: 55px; padding: 5px;">
        <div class="ib" style="background: blue;" id="a"></div> A
        <div class="ib" style="background: red;" id="b"></div> B
        <div class="ib" style="background: green;"></div> C
    </div>
    <br>
    Box 2:
    <div style="border: 1px black solid; width: 55px; padding: 5px;">
        <div class="ib" style="background: blue; width: 40px;"></div> A
        <div class="ib" style="background: red; width: 35px;"></div> B
        <div class="ib" style="background: green;"></div> C
    </div>
</body>
</html>
