| <!DOCTYPE HTML> |
| <script src="../../../resources/js-test.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); |
| } |
| #topRightSvg, #middleG1, #middleG2, #bottomLeftG, #bottomRightG1, #bottomRightG2 { |
| pointer-events: bounding-box; |
| } |
| #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'/> |
| |
| <foreignObject id="fo" x="210" y="110" width="80" height="80"> |
| <div id="foDiv" style="width: 80px; height: 80px; background-color: rgba(180,0,0,0.2)"></div> |
| </foreignObject> |
| |
| <svg id='topRightSvg' x='205' y='5' width='90' height='90'> |
| <rect id='topRightRect1' x='5' y='5' width='80' height='80'/> |
| <rect id='topRightRect2' x='10' y='10' width='70' height='70'/> |
| </svg> |
| |
| <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> |
| <div id="console"></div> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| onload = function() { |
| // Verify two overlapping rects can be hit. |
| assertElementsFromPoint('document.elementsFromPoint(125, 125)', [topLeftRect3, topLeftRect1, svg, sandbox, document.body, document.documentElement]); |
| |
| // Verify two rects inside an svg element with pointer-events: bounding-box can be hit. |
| assertElementsFromPoint('document.elementsFromPoint(325, 125)', [topRightRect2, topRightRect1, topRightSvg, svg, sandbox, document.body, document.documentElement]); |
| |
| // Verify two rects can be hit when inside a <g>. |
| assertElementsFromPoint('document.elementsFromPoint(225, 225)', [middleRect2, middleRect1, middleG2, middleG1, svg, sandbox, document.body, document.documentElement]); |
| |
| // Verify two overlapping images can be hit. |
| assertElementsFromPoint('document.elementsFromPoint(125, 325)', [bottomLeftImage2, bottomLeftImage1, bottomLeftG, svg, sandbox, document.body, document.documentElement]); |
| |
| // Verify transformed <g>s and <rect>s can be hit. |
| assertElementsFromPoint('document.elementsFromPoint(325, 325)', [bottomRightRect2, bottomRightRect1, bottomRightG2, bottomRightG1, svg, sandbox, document.body, document.documentElement]); |
| |
| // Verify <foreignObject>s can be hit. |
| assertElementsFromPoint('document.elementsFromPoint(350, 250)', [foDiv, fo, svg, sandbox, document.body, document.documentElement]); |
| |
| finishJSTest(); |
| } |
| </script> |
