<!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>
Codebase Browser
chromium