Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/elementsFromPoint-svg.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<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);
}
rect {
fill: rgba(180,0,0,0.2);
}
#topLeftRect2NoHitTest {
pointer-events: none;
}
</style>
<div id='sandbox'>
<svg id='svg' width='300' height='300'>
<rect id='topLeftRect1' x='5' y='5' width='90' height='90'/>
<rect id='topLeftRect2NoHitTest' x='10' y='10' width='80' height='80'/>
<rect id='topLeftRect3' x='15' y='15' width='70' height='70'/>
<g id='middleG1'>
<g id='middleG2'>
<rect id='middleRect1' x='105' y='105' width='90' height='90'/>
<rect id='middleRect2' x='110' y='110' width='80' height='80'/>
</g>
</g>
<g id='bottomLeftG'>
<image id='bottomLeftImage1' x='5' y='205' width='90' height='90' xlink:href='data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="rgba(180,0,0,0.2)"/></svg>'/>
<image id='bottomLeftImage2' x='10' y='210' width='80' height='80' xlink:href='data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="rgba(180,0,0,0.2)"/></svg>'/>
</g>
<g id='bottomRightG1' transform='translate(300, 300)'>
<g id='bottomRightG2' transform='translate(-100, -100)'>
<rect id='bottomRightRect1' x='5' y='5' width='90' height='90'/>
<rect id='bottomRightRect2' x='110' y='110' width='80' height='80' transform='translate(-100, -100)'/>
</g>
</g>
</svg>
</div>
<script>
test(function() {
assertElementsFromPoint('document', 125, 125,
[topLeftRect3, topLeftRect1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside two rects');
test(function() {
assertElementsFromPoint('document', 225, 225,
[middleRect2, middleRect1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside two rects that are inside a <g>');
test(function() {
assertElementsFromPoint('document', 125, 325,
[bottomLeftImage2, bottomLeftImage1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside two images');
test(function() {
assertElementsFromPoint('document', 325, 325,
[bottomRightRect2, bottomRightRect1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside transformed rects and <g>');
</script>