chromium/third_party/blink/web_tests/svg/hittest/text-with-multiple-tspans.svg

<svg onload="runTest()" xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150">
    <script src="../../resources/ahem.js"></script>
    <rect id="background" width="100%" height="100%" fill="blue" />
    <text id="text">
        <tspan id="tspan1" x="10" dy="1em">Foo</tspan>
        <tspan id="tspan2" x="10" dy="1.2em">Foo bar baz</tspan>
    </text>
    <defs>
        <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();

                // (170,30) is within a glyph cell of #tspan1, (170,30) is not.
                // (50,60) and (250,60) are bothin within a glyph cell of #tspan2.
                var text = document.getElementById("text");
                var tspan1 = document.getElementById("tspan1");
                var tspan2 = document.getElementById("tspan2");
                var background = document.getElementById("background");
                if (document.elementFromPoint(50, 30) === tspan1
                        && document.elementFromPoint(170, 30) === background
                        && document.elementFromPoint(50, 60) === tspan2
                        && document.elementFromPoint(250, 60) === tspan2)
                    text.textContent = "PASS";
                else
                    text.textContent = "FAIL";
            }
        ]]>
        </script>
    </defs>
</svg>