svg-small-big-path.html (1195B)
1 <!DOCTYPE html> 2 <title>Hit-test on a path whose x/y ranges have different magnitude</title> 3 <link rel="help" href="https://svgwg.org/svg2-draft/interact.html#hit-testing"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 svg { 8 margin: 0px; 9 padding: 0px; 10 position: absolute; 11 top: 0px; 12 left: 0px; 13 } 14 </style> 15 <svg> 16 <svg x="-250000" width="500000" height="500"> 17 <path id="path" d="M 250005 104 l 19 0 l 3 3 l -3 3 l -19 0 z"/> 18 </svg> 19 </svg> 20 <script> 21 const pointsInPath = [ 22 {x: 5, y: 104}, 23 {x: 5, y: 107}, 24 {x: 5, y: 110} 25 ]; 26 27 const pointsNotInPath = [ 28 {x: 5, y: 103}, 29 {x: 5, y: 111} 30 ]; 31 32 setup(() => { 33 window.pathElement = document.getElementById("path"); 34 }); 35 36 pointsInPath.forEach(point => { 37 test(t => { 38 assert_equals(pathElement, document.elementFromPoint(point.x, point.y)); 39 }, `${document.title}, path contains point at (${point.x}, ${point.y})`); 40 }); 41 42 pointsNotInPath.forEach(point => { 43 test(t => { 44 assert_not_equals(pathElement, document.elementFromPoint(point.x, point.y)); 45 }, `${document.title}, path does not contain point at (${point.x}, ${point.y})`); 46 }); 47 </script>