css/cssom-view/elementsFromPoint-svg-text.html

<!DOCTYPE HTML>
<title>Document.prototype.elementsFromPoint on SVG text content elements</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementsfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/elementsFromPoint.js"></script>
<style>
html, body {
    margin: 0;
    padding: 0;
}
#svg {
    margin: 100px;
    background-color: rgba(0,180,0,0.2);
}
text {
    font-size: 50px;
}
</style>
<div id='sandbox'>
  <svg id='svg' width='300' height='300'>
    <defs>
      <path id="path" d="M10,170h1000"/>
    </defs>
    <text id="text1" x="10" y="50">Some text</text>
    <text id="text2" x="10" y="110"><tspan id="tspan1">Some text</tspan></text>
    <text id="text3"><textPath id="textpath1" xlink:href="#path">Some text</textPath></text>
    <text id="text4" x="10" y="230">Text under<tspan id="tspan2" x="10">Text over</tspan></text>
  </svg>
</div>
<script>
test(function() {
    assertElementsFromPoint('document', 125, 125,
        [text1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside a <text>');

test(function() {
    assertElementsFromPoint('document', 125, 185,
        [tspan1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside a <tspan> nested in a <text> without content');

test(function() {
    assertElementsFromPoint('document', 125, 245,
        [textpath1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside a <textPath> nested in a <text> without content');

test(function() {
    assertElementsFromPoint('document', 125, 305,
        [tspan2, text4, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside an overlapping <tspan> nested in a <text>');
</script>