chromium/third_party/blink/web_tests/svg/hittest/text-with-text-path.svg

<svg onload="runTest()" width="500" height="150" 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="text">
        <textPath id="textPath" xlink:href="#path">This is text on a path</textPath>
    </text>
    <defs>
        <path id="path"
              d="M 100 200
              C 200 100 300   0 400 100
              C 500 200 600 300 700 200
              C 800 100 900 100 900 100" />
        <style type="text/css">
        <![CDATA[
            text {
                font-family: Ahem;
                font-size: 40px;
            }
        ]]>
        </style>
        <script type="text/javascript">
        <![CDATA[
            function runTest() {
                if (window.testRunner)
                    testRunner.dumpAsText();

                // (160,120) is within #path's glyph cell bounds, (100,100) is not.
                var text = document.getElementById("text");
                var background = document.getElementById("background");
                var textPath = document.getElementById("textPath");
                if (document.elementFromPoint(160, 120) === textPath && document.elementFromPoint(100, 100) === background)
                    text.textContent = "PASS";
                else
                    text.textContent = "FAIL";
            }
        ]]>
        </script>
    </defs>
</svg>