51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
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>
|