LayoutTests/fast/dom/Element/getBoundingClientRect-getClientRects-relative-to-viewport.html

<script src="../../../resources/js-test-pre.js"></script>
<style>
    #pusher {
        width: 1000px;
        height: 1000px;
        outline: 1px solid black;
    }
</style>
<div id="console"></div>
<div id="testArea">
    <br>
    <p id="test">Test content</p>
    <div id="pusher">This box is here to create scrollbars.</div>
</div>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    var element = document.getElementById('test');

    // Get base numbers
    var unScrolledBoundingBox = element.getBoundingClientRect();
    var unScrolledBoundingBoxes = element.getClientRects();

    // Test scrolling down
    window.scrollBy(0, 50);
    var scrolledDownBoundingBox = element.getBoundingClientRect();
    var scrolledDownBoundingBoxes = element.getClientRects();

    // Reset
    window.scrollTo(0, 0);

    // Test scrolling right
    window.scrollBy(50, 0);
    var scrolledRightBoundingBox = element.getBoundingClientRect();
    var scrolledRightBoundingBoxes = element.getClientRects();

    // Reset
    window.scrollTo(0, 0);

    shouldBe("unScrolledBoundingBox.top - scrolledDownBoundingBox.top", "50");
    shouldBe("unScrolledBoundingBoxes[0].top - scrolledDownBoundingBoxes[0].top", "50");
    shouldBe("unScrolledBoundingBox.left - scrolledRightBoundingBox.left", "50");
    shouldBe("unScrolledBoundingBoxes[0].left - scrolledRightBoundingBoxes[0].left", "50");

    if (window.testRunner) {
        var area = document.getElementById('testArea');
        area.parentNode.removeChild(area);
    }
</script>
<script src="../../../resources/js-test-post.js"></script>