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