<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
    #spacer {
        width: 1000px;
        height: 1000px;
    }
    #target {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 200px;
        top: 200px;
        background-color: green;
        z-index: -1;
    }
    body {
        margin: 0px;
    }
</style>
<script>
    var rect;
    var rectAfterScaleAndScroll;
    var layoutXScroll = 20;
    var layoutYScroll = 30;
    var xPos = 200;
    var yPos = 200;
    var visualXScroll = 40;
    var visualYScroll = 50;
    var expectedX = xPos - layoutXScroll;
    var expectedY = yPos - layoutYScroll;

    onload = function() {
        description("This test ensures that getBoundingClientRect remains relative to the layout viewport under page scale.");

        var target = document.getElementById('target');
        rect = target.getBoundingClientRect();

        shouldBe('rect.left', 'xPos');
        shouldBe('rect.top', 'yPos');

        if (window.internals) {
            window.scrollTo(layoutXScroll, layoutYScroll);

            internals.setPageScaleFactor(2.0);
            internals.setVisualViewportOffset(visualXScroll, visualYScroll);
        }

        debug(' ');
        debug('===getBoundingClientRect===');
        debug(' ');
        rectAfterScaleAndScroll = target.getBoundingClientRect();

        shouldBe('rectAfterScaleAndScroll.left', 'expectedX');
        shouldBe('rectAfterScaleAndScroll.top', 'expectedY');
        shouldBe('rectAfterScaleAndScroll.width', 'rect.width');
        shouldBe('rectAfterScaleAndScroll.height', 'rect.height');

        rectAfterScaleAndScroll = target.getClientRects()[0];
        debug(' ');
        debug('===getClientRects===');
        debug(' ');

        shouldBe('rectAfterScaleAndScroll.left', 'expectedX');
        shouldBe('rectAfterScaleAndScroll.top', 'expectedY');
        shouldBe('rectAfterScaleAndScroll.width', 'rect.width');
        shouldBe('rectAfterScaleAndScroll.height', 'rect.height');
    }
</script>
<div id="target"></div>
<div id="spacer"></div>