ellipse-hittest.html (3191B)
1 <!DOCTYPE html> 2 <title>elementFromPoint(...) on <ellipse>s with continuous strokes</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 #ell1:hover, 8 #ell2:hover, 9 #ell3:hover { 10 stroke: #9f9; 11 } 12 </style> 13 <svg id="svg" width="450" height="300"> 14 <rect id="border" x="0.5" y="0.5" width="449" height="299" stroke="#000" stroke-width="1" fill="none"/> 15 16 <ellipse id="ell1" cx="130" cy="30" rx="100" ry="15" stroke="#ccf" fill="none" stroke-width="20"/> 17 <ellipse pointer-events="none" cx="130" cy="30" rx="110" ry="25" stroke="gray" fill="none"/> 18 <ellipse pointer-events="none" cx="130" cy="30" rx="90" ry="5" stroke="gray" fill="none"/> 19 20 <ellipse id="ell2" cx="130" cy="180" rx="100" ry="100" stroke="#ccf" fill="none" stroke-width="30"/> 21 <ellipse pointer-events="none" cx="130" cy="180" rx="115" ry="115" stroke="gray" fill="none"/> 22 <ellipse pointer-events="none" cx="130" cy="180" rx="85" ry="85" stroke="gray" fill="none"/> 23 24 <ellipse id="ell3" cx="340" cy="155" rx="15" ry="100" stroke="#ccf" fill="none" stroke-width="20" transform="rotate(30 340 155)"/> 25 <ellipse pointer-events="none" cx="340" cy="155" rx="25" ry="110" stroke="gray" fill="none" transform="rotate(30 340 155)"/> 26 <ellipse pointer-events="none" cx="340" cy="155" rx="5" ry="90" stroke="gray" fill="none" transform="rotate(30 340 155)"/> 27 </svg> 28 <script> 29 // Points are relative to the client rect of the <svg> root. 30 const tests = [ 31 { x: 27, y: 46, expectedElemId: "svg" }, 32 { x: 98, y: 33, expectedElemId: "svg" }, 33 { x: 202, y: 53, expectedElemId: "svg" }, 34 { x: 98, y: 142, expectedElemId: "svg" }, 35 { x: 130, y: 180, expectedElemId: "svg" }, 36 { x: 91, y: 247, expectedElemId: "svg" }, 37 { x: 27, y: 240, expectedElemId: "svg" }, 38 { x: 336, y: 166, expectedElemId: "svg" }, 39 { x: 337, y: 214, expectedElemId: "svg" }, 40 41 { x: 31, y: 18, expectedElemId: "ell1" }, 42 { x: 209, y: 31, expectedElemId: "ell1" }, 43 { x: 132, y: 47, expectedElemId: "ell1" }, 44 { x: 229, y: 43, expectedElemId: "ell1" }, 45 46 { x: 245, y: 180, expectedElemId: "ell2" }, 47 { x: 45, y: 180, expectedElemId: "ell2" }, 48 { x: 130, y: 95, expectedElemId: "ell2" }, 49 { x: 130, y: 295, expectedElemId: "ell2" }, 50 { x: 212, y: 255, expectedElemId: "ell2" }, 51 52 { x: 280, y: 235, expectedElemId: "ell3" }, 53 { x: 301, y: 247, expectedElemId: "ell3" }, 54 { x: 378, y: 88, expectedElemId: "ell3" }, 55 { x: 335, y: 122, expectedElemId: "ell3" }, 56 { x: 333, y: 190, expectedElemId: "ell3" }, 57 { x: 377, y: 66, expectedElemId: "ell3" } 58 ]; 59 60 setup(() => { 61 const svg = document.getElementById("svg"); 62 const svgBounds = svg.getBoundingClientRect(); 63 window.svgOrigin = { 64 x: svgBounds.left << 0, 65 y: svgBounds.top << 0, 66 }; 67 }); 68 69 tests.forEach(testcase => { 70 test(t => { 71 const expectedElem = document.getElementById(testcase.expectedElemId); 72 const hitElem = document.elementFromPoint(svgOrigin.x + testcase.x, svgOrigin.y + testcase.y); 73 assert_equals(hitElem, expectedElem); 74 }, `${document.title}, element at (${testcase.x}, ${testcase.y})`); 75 }); 76 </script>