<svg width="500" height="150" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" onclick="click(evt)">
    <rect id="background" width="100%" height="100%" fill="red" />
    <text id="text" x="10" y="1em">Foo <tspan id="tspan">Bar</tspan> Baz</text>
    <defs>
        <style type="text/css">
        <![CDATA[
            @font-face {
                font-family: Ahem;
                src: url(../../resources/Ahem.ttf);
            }
            text {
                font-family: Ahem;
                font-size: 40px;
            }
            ]]>
        </style>
        <script type="text/javascript">
        <![CDATA[
            if (window.testRunner)
                testRunner.waitUntilDone();

            var text = document.getElementById("text");
            setTimeout(function() {
                // The point at 15,15 is contained within the word "Foo", a text node.
                // The point at 120,15 is contained within the word "Bar", a <tspan>.
                if (document.elementFromPoint(15, 15) === text && document.elementFromPoint(110, 15) === document.getElementById("tspan")) {
                    document.getElementById("background").setAttribute("fill", "green");
                    text.remove();
                    if (window.testRunner)
                        testRunner.notifyDone();
                }
            }, 50);
        ]]>
        </script>
    </defs>
</svg>