| <!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> |
