<!DOCTYPE html>

<html>
<head>
    <style>
        .container {
            zoom: 2.3;
        }

        #inside-zoom-box {
            position: absolute;
            left: 18px;
            top: 150px;
            height: 50px;
            width: 40px;
            background-color: rgba(0, 0, 0, 0.1);
        }

        #outside-zoom-box {
            position: absolute;
            left: 21px;
            top: 150px;
            height: 50px;
            width: 40px;
            background-color: rgba(0, 0, 0, 0.1);
        }
    </style>
    <script src="../../resources/js-test-pre.js"></script>
    <script>
        description("Tests getBoundingClient rect with both CSS zoom and page zoom");

        var box;
        var bounds;
        function doTest()
        {
            if (window.eventSender) {
                eventSender.zoomPageIn();
                eventSender.zoomPageIn();
            } else {
                debug('This tests uses eventSender to zoom in twice');
            }
            
            box = document.getElementById('inside-zoom-box');
            bounds = box.getBoundingClientRect();

            debug('');
            debug('Testing box with CSS zoom on an ancestor')
            shouldBeEqualToString('bounds.left.toFixed(2)', '18.00');
            shouldBeEqualToString('bounds.top.toFixed(2)', '150.00');
            shouldBeEqualToString('bounds.width.toFixed(2)', '40.00');
            shouldBeEqualToString('bounds.height.toFixed(2)', '50.00');

            box = document.getElementById('outside-zoom-box');
            bounds = box.getBoundingClientRect();

            debug('');
            debug('Testing box without CSS zoom on an ancestor');
            shouldBeEqualToString('bounds.left.toFixed(2)', '21.00');
            shouldBeEqualToString('bounds.top.toFixed(2)', '150.00');
            shouldBeEqualToString('bounds.width.toFixed(2)', '40.00');
            shouldBeEqualToString('bounds.height.toFixed(2)', '50.00');
        }
        
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
    <div class="container">
        <div id="inside-zoom-box"></div>
    </div>
    <div id="outside-zoom-box"></div>
    <script src="../../resources/js-test-post.js"></script>
</body>
</html>