<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();
</script>
<body style="margin-left:10px; margin-top:15px;">
    <div style="-webkit-columns:3; columns:3;" id="mc">
        <div id="elm1" class="rodent">elm1</div>
        <br>
        <div>
            <div id="elm2" class="rodent">elm2</div>
            <div id="elm3" class="rodent">elm3</div>
        </div>
        <div id="elm4" class="rodent">elm4</div>
        <div id="elm5" class="rodent">elm5</div>
    </div>
    <p id="console"></p>
    <script>
        var mc = document.getElementById('mc');
        var elm1 = document.getElementById('elm1');
        var elm2 = document.getElementById('elm2');
        var elm3 = document.getElementById('elm3');
        var elm4 = document.getElementById('elm4');
        var elm5 = document.getElementById('elm5');
        shouldBe("mc.offsetLeft", "10");
        shouldBe("mc.offsetTop", "15");

        shouldBe("elm1.offsetLeft", "mc.offsetLeft");
        shouldBe("elm1.offsetTop", "mc.offsetTop");
        shouldBeGreaterThan("elm2.offsetLeft", "elm1.offsetLeft");
        shouldBe("elm2.offsetTop", "elm1.offsetTop");
        shouldBe("elm3.offsetLeft", "elm2.offsetLeft");
        shouldBeGreaterThan("elm3.offsetTop", "elm2.offsetTop");
        shouldBeGreaterThan("elm4.offsetLeft", "elm3.offsetLeft");
        shouldBe("elm4.offsetTop", "elm1.offsetTop");
        shouldBe("elm5.offsetLeft", "elm4.offsetLeft");
        shouldBe("elm5.offsetTop", "elm3.offsetTop");

        var elements = document.getElementsByClassName('rodent');
        for (var i = 0; i < elements.length; i++) {
            var rects = elements[i].getClientRects();
            shouldBe("rects.length", "1");
            shouldBe("rects[0].left", "elements[i].offsetLeft");
            shouldBe("rects[0].top", "elements[i].offsetTop");
        }
    </script>
</body>