| <!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> |
