zero-stroke-width.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/svg/hittest/zero-stroke-width.html
