elementsFromPoint-svg.html (2794B)
1 <!DOCTYPE HTML> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="resources/elementsFromPoint.js"></script> 5 <style> 6 html, body { 7 margin: 0; 8 padding: 0; 9 } 10 #svg { 11 margin: 100px; 12 background-color: rgba(0,180,0,0.2); 13 } 14 rect { 15 fill: rgba(180,0,0,0.2); 16 } 17 #topLeftRect2NoHitTest { 18 pointer-events: none; 19 } 20 </style> 21 <div id='sandbox'> 22 <svg id='svg' width='300' height='300'> 23 <rect id='topLeftRect1' x='5' y='5' width='90' height='90'/> 24 <rect id='topLeftRect2NoHitTest' x='10' y='10' width='80' height='80'/> 25 <rect id='topLeftRect3' x='15' y='15' width='70' height='70'/> 26 27 <g id='middleG1'> 28 <g id='middleG2'> 29 <rect id='middleRect1' x='105' y='105' width='90' height='90'/> 30 <rect id='middleRect2' x='110' y='110' width='80' height='80'/> 31 </g> 32 </g> 33 34 <g id='bottomLeftG'> 35 <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>'/> 36 <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>'/> 37 </g> 38 39 <g id='bottomRightG1' transform='translate(300, 300)'> 40 <g id='bottomRightG2' transform='translate(-100, -100)'> 41 <rect id='bottomRightRect1' x='5' y='5' width='90' height='90'/> 42 <rect id='bottomRightRect2' x='110' y='110' width='80' height='80' transform='translate(-100, -100)'/> 43 </g> 44 </g> 45 </svg> 46 </div> 47 <script> 48 test(function() { 49 assertElementsFromPoint('document', 125, 125, 50 [topLeftRect3, topLeftRect1, svg, sandbox, document.body, document.documentElement]); 51 }, 'elementsFromPoint for a point inside two rects'); 52 53 test(function() { 54 assertElementsFromPoint('document', 225, 225, 55 [middleRect2, middleRect1, svg, sandbox, document.body, document.documentElement]); 56 }, 'elementsFromPoint for a point inside two rects that are inside a <g>'); 57 58 test(function() { 59 assertElementsFromPoint('document', 125, 325, 60 [bottomLeftImage2, bottomLeftImage1, svg, sandbox, document.body, document.documentElement]); 61 }, 'elementsFromPoint for a point inside two images'); 62 63 test(function() { 64 assertElementsFromPoint('document', 325, 325, 65 [bottomRightRect2, bottomRightRect1, svg, sandbox, document.body, document.documentElement]); 66 }, 'elementsFromPoint for a point inside transformed rects and <g>'); 67 </script>