chromium/third_party/blink/web_tests/svg/hittest/rotated-text.svg

<svg onload="runTest()" width="1000" height="300" viewBox="0 0 500 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <script src="../../resources/ahem.js"></script>
    <rect id="background" width="100%" height="100%" fill="blue" />
    <text id="upright" x="1em" y="1em">A B</text>
    <text id="rotated" x="1em" y="3em" rotate="45 -45 -45 0">A B C</text>
    <defs>
        <style type="text/css">
        <![CDATA[
            text {
                font-family: Ahem;
                font-size: 40px;
            }
        ]]>
        </style>
        <script type="text/javascript">
        <![CDATA[
            function elementFromPoint(x, y) {
                return document.elementFromPoint(x * 2, y * 2);
            }

            function runTest() {
                if (window.testRunner)
                    testRunner.dumpAsText();

                var uprightText = document.getElementById("upright");
                var rotatedText = document.getElementById("rotated");
                var background = document.getElementById("background");

                // (135,25) is within a glyph cell of #upright, (165,25) is not.
                if (elementFromPoint(135, 25) === uprightText && elementFromPoint(165, 25) === background)
                    uprightText.textContent = "PASS";
                else
                    uprightText.textContent = "FAIL";

                // (45,100) and (150,110) are both outside the rotated glyph cells of #rotated.
                // (60,140), (125,110), and (220,110) are all inside the rotated glyph cells of #rotated.
                if (elementFromPoint(45, 100) === background
                        && elementFromPoint(150, 110) === background
                        && elementFromPoint(60, 140) === rotatedText
                        && elementFromPoint(125, 110) === rotatedText
                        && elementFromPoint(220, 110) === rotatedText)
                    rotatedText.textContent = "PASS";
                else
                    rotatedText.textContent = "FAIL";
            }
        ]]>
        </script>
    </defs>
</svg>