elementsFromPoint-svg-text.html (1895B)
1 <!DOCTYPE HTML> 2 <title>Document.prototype.elementsFromPoint on SVG text content elements</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementsfrompoint"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/elementsFromPoint.js"></script> 7 <style> 8 html, body { 9 margin: 0; 10 padding: 0; 11 } 12 #svg { 13 margin: 100px; 14 background-color: rgba(0,180,0,0.2); 15 } 16 text { 17 font-size: 50px; 18 } 19 </style> 20 <div id='sandbox'> 21 <svg id='svg' width='300' height='300'> 22 <defs> 23 <path id="path" d="M10,170h1000"/> 24 </defs> 25 <text id="text1" x="10" y="50">Some text</text> 26 <text id="text2" x="10" y="110"><tspan id="tspan1">Some text</tspan></text> 27 <text id="text3"><textPath id="textpath1" xlink:href="#path">Some text</textPath></text> 28 <text id="text4" x="10" y="230">Text under<tspan id="tspan2" x="10">Text over</tspan></text> 29 </svg> 30 </div> 31 <script> 32 test(function() { 33 assertElementsFromPoint('document', 125, 125, 34 [text1, svg, sandbox, document.body, document.documentElement]); 35 }, 'elementsFromPoint for a point inside a <text>'); 36 37 test(function() { 38 assertElementsFromPoint('document', 125, 185, 39 [tspan1, svg, sandbox, document.body, document.documentElement]); 40 }, 'elementsFromPoint for a point inside a <tspan> nested in a <text> without content'); 41 42 test(function() { 43 assertElementsFromPoint('document', 125, 245, 44 [textpath1, svg, sandbox, document.body, document.documentElement]); 45 }, 'elementsFromPoint for a point inside a <textPath> nested in a <text> without content'); 46 47 test(function() { 48 assertElementsFromPoint('document', 125, 305, 49 [tspan2, text4, svg, sandbox, document.body, document.documentElement]); 50 }, 'elementsFromPoint for a point inside an overlapping <tspan> nested in a <text>'); 51 </script>