computed-offset-with-zoom.html | Explore in Territory

<!DOCTYPE html>
<html>
    <head>
        <style>
            #container {
                width: 500px;
                height: 500px;
                position: relative;
            }
            #container > div {
                position: relative;
                border: 1px solid red;
                font-size: 20px;
                width: 100px;
                height: 100px;
            }
            #test-fixed  {
                left: 100px;
                right: 100px;
                top: 100px;
                bottom: 100px;
            }
            #test-percentage {
                left: 20%;
                right: 20%;
                top: 10%;
                bottom: 10%;
            }
            #test-viewport {
                left: 10vw;
                right: 10vw;
                top: 10vh;
                bottom: 10vh;
            }
        </style>
        <script src="../../resources/js-test.js"></script>
    </head>
    <body>
        <p>
            Reported computed offset should not change with zoom level.
        </p>
        <div id="container">
            <div id="test-fixed"></div>
            <div id="test-percentage"></div>
            <div id="test-viewport"></div>
        </div>
        <script>
            var fixedElement = document.getElementById('test-fixed');
            var percentageElement = document.getElementById('test-percentage');
            var viewportElement = document.getElementById('test-viewport');
            function test(zoomLevel)
            {
                    document.body.style.zoom = zoomLevel;
                    var windowWidth = "'" + (window.innerWidth / 10) + "px'";
                    var windowHeight = "'" + (window.innerHeight / 10) + "px'";
                    
                    shouldBe("window.getComputedStyle(fixedElement).top", "'100px'");
                    shouldBe("window.getComputedStyle(fixedElement).right", "'100px'");
                    shouldBe("window.getComputedStyle(fixedElement).bottom", "'100px'");
                    shouldBe("window.getComputedStyle(fixedElement).left", "'100px'");
                    
                    shouldBe("window.getComputedStyle(percentageElement).top", "'50px'");
                    shouldBe("window.getComputedStyle(percentageElement).right", "'100px'");
                    shouldBe("window.getComputedStyle(percentageElement).bottom", "'50px'");
                    shouldBe("window.getComputedStyle(percentageElement).left", "'100px'");
                    
                    shouldBe("window.getComputedStyle(viewportElement).top", windowHeight);
                    shouldBe("window.getComputedStyle(viewportElement).right", windowWidth);
                    shouldBe("window.getComputedStyle(viewportElement).bottom", windowHeight);
                    shouldBe("window.getComputedStyle(viewportElement).left", windowWidth);
            }
            test(0.5);
            test(1.25);
            test(1.0);
        </script>
    </body>
</html>
chromium/third_party/blink/web_tests/fast/css/computed-offset-with-zoom.html
