Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/svg/dom/SVGLocatable-getCTM-svg-root.html 

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                width: 750px;
                height: 550px;
            }

            .testCase {
                float: left;
                margin: 5px;
            }
            
            svg {
                padding: 10px;
                border: 5px solid grey;
                margin: 5px;
                background-color: blue;
            }
        </style>
        <script>window.enablePixelTesting = true;</script>
        <script src="../../resources/js-test.js"></script>
        <script>
            function matrixToString(m)
            {
                return "[" + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + "]";
            }

            function getCTMById(id)
            {
                return matrixToString(document.getElementById(id).getCTM());
            }
        </script>
    </head>
    <body>
        <div id="description"></div>
        <script>description("This test checks getCTM() on SVG root elements with borders, paddings, and margins.");</script>
        
        <div id="console"></div>

        <hr/>

        <svg id="svgRoot1" class="testCase" width="50" height="50" viewbox="0 0 50 50"></svg>
        <script>shouldBeEqualToString("getCTMById('svgRoot1')", "[1 0 0 1 0 0]");</script>

        <svg id="svgRoot2" class="testCase" width="50" height="50" viewbox="0 0 100 100"></svg>
        <script>shouldBeEqualToString("getCTMById('svgRoot2')", "[0.5 0 0 0.5 0 0]");</script>

        <svg id="svgRoot3" class="testCase" width="50" height="50" viewbox="0 0 25 25"></svg>
        <script>shouldBeEqualToString("getCTMById('svgRoot3')", "[2 0 0 2 0 0]");</script>

        <div class="testCase" style="width: 90px; height: 90px;">
            <div style="width: 50px; height: 50px; background-color: green;">
                <svg id="svgRoot4" width="100%" height="100%" viewbox="0 0 50 50"></svg>
            </div>
        </div>
        <script>shouldBeEqualToString("getCTMById('svgRoot4')", "[1 0 0 1 0 0]");</script>

        <div class="testCase" style="width: 100px; height: 100px; background-color: green;">
            <svg id="svgRoot5" width="50%" height="50%" viewbox="0 0 50 50"></svg>
        </div>
        <script>shouldBeEqualToString("getCTMById('svgRoot5')", "[1 0 0 1 0 0]");</script>

        <div class="testCase" style="width: 100px; height: 100px; background-color: green;">
            <svg id="svgRoot6" width="50%" height="50%" viewbox="0 0 100 100"></svg>
        </div>
        <script>shouldBeEqualToString("getCTMById('svgRoot6')", "[0.5 0 0 0.5 0 0]");</script>

    </body>
</html>