| <!DOCTYPE html> |
| <title>Hit-testing with stroke-width: 0</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <svg height="220"> |
| <defs> |
| <g id="primitives"> |
| <rect width="100" height="100"/> |
| <circle cx="150" cy="50" r="50"/> |
| <path d="M200,0h100v100h-100z"/> |
| </g> |
| </defs> |
| <use href="#primitives" fill="none" stroke-width="0" stroke="red"/> |
| <use href="#primitives" fill="none" stroke-width="0" pointer-events="stroke" |
| transform="translate(0, 110)"/> |
| </svg> |
| <script> |
| function absolutePoint(element, p) { |
| return { x: p.x + element.clientLeft, y: p.y + element.clientTop }; |
| } |
| |
| [ |
| { x: 50, y: 50, description: 'center of rect with stroke' }, |
| { x: 150, y: 50, description: 'center of circle with stroke' }, |
| { x: 250, y: 50, description: 'center of path with stroke' }, |
| |
| { x: 50, y: 160, description: 'center of rect with "pointer-events: stroke"' }, |
| { x: 150, y: 160, description: 'center of circle with "pointer-events: stroke"' }, |
| { x: 250, y: 160, description: 'center of path with "pointer-events: stroke"' }, |
| |
| { x: 50, y: 100, description: 'edge of rect with stroke' }, |
| { x: 150, y: 100, description: 'edge of circle with stroke' }, |
| { x: 250, y: 100, description: 'edge of path with stroke' }, |
| |
| { x: 50, y: 210, description: 'edge of rect with "pointer-events: stroke"' }, |
| { x: 150, y: 210, description: 'edge of circle with "pointer-events: stroke"' }, |
| { x: 250, y: 210, description: 'edge of path with "pointer-events: stroke"' }, |
| ].forEach(function(item) { |
| test(function() { |
| let svg = document.querySelector('svg'); |
| let point = absolutePoint(svg, item); |
| assert_equals(document.elementFromPoint(point.x, point.y), svg); |
| }, document.title + ', ' + item.description); |
| }); |
| </script> |
