clip-path-shape.html | Explore in Territory

<!DOCTYPE html>
<title>Hit-test of clip-path polygon</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
body {
  margin: 0;
}
#target {
  fill: blue;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
</style>
<svg>
  <rect id="target" x="50" y="25" width="100" height="100"/>
</svg>
<script>
function assert_element_at(element, pointlist) {
  for (var point of pointlist) {
    var result = document.elementFromPoint(point[0], point[1]);
    assert_equals(result, element, point.join(','));
  }
}

test(function() {
  var div = document.querySelector('#target');

  // Points inside clip-path.
  assert_element_at(div, [[100, 75], [100, 50], [100, 100], [75, 75], [125, 75]]);

  // Points outside clip-path.
  assert_element_at(document.querySelector('svg'), [[70, 45], [130, 45], [70, 105], [130, 105]]);
});
</script>

chromium/third_party/blink/web_tests/svg/hittest/clip-path-shape.html