<!DOCTYPE html>

<html>
<head>
    <style>
        body {
            height: 3000px;
            width: 2000px;
        }
        #fixed {
            position: fixed;
            top: 10px;
            left: 12px;
            width: 30px;
            height: 20px;
            background-color: silver;
        }
        #absolute {
            position: absolute;
            top: 100px;
            left: 120px;
            width: 50px;
            height: 25px;
            background-color: blue;
        }
    </style>
    <script src="../../resources/js-test-pre.js"></script>
    <script>
        description("This test zooms and scrolls the page and checks that client rects are correct.");

        if (window.internals)
            internals.settings.setVisualViewportEnabled(true);

        window.jsTestIsAsync = true;

        function stringFromRect(domRect)
        {
            return `${domRect.x.toFixed(2)}, ${domRect.y.toFixed(2)} - ${domRect.width.toFixed(2)} x ${domRect.height.toFixed(2)}`;
        }

        function dumpRects()
        {
            var fixed = document.getElementById('fixed');
            var absolute = document.getElementById('absolute');

            if (window.internals) {
                debug('layoutViewport: ' + stringFromRect(internals.layoutViewportRect()));
                debug('visualViewportRect: ' + stringFromRect(internals.visualViewportRect()));
            }

            debug('fixed client bounds: ' + stringFromRect(fixed.getBoundingClientRect()));
            debug('fixed client rect: ' + stringFromRect(fixed.getClientRects()[0]));

            debug('absolute client bounds: ' + stringFromRect(absolute.getBoundingClientRect()));
            debug('absolute client rect: ' + stringFromRect(absolute.getClientRects()[0]));
        }

        function doTest()
        {
            if (window.eventSender)
                eventSender.zoomPageIn();

            dumpRects();

            debug('');
            window.scrollTo(120, 100);

            debug('Scrolled to ' + window.scrollX + ', ' + window.scrollY);
            dumpRects();

            window.scrollTo(0, 0);

            finishJSTest();
        }
        
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
    <div id="fixed"></div>
    <div id="absolute"></div>
    <script src="../../resources/js-test-post.js"></script>
</body>
</html>