clip-path-shape-polygon-and-box-shadow.html (995B)
1 <!DOCTYPE html> 2 <title>Hit-test of clip-path polygon combined with box-shadow</title> 3 <link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 body { 8 margin: 0; 9 } 10 .box { 11 width: 100px; 12 height: 100px; 13 background-color: blue; 14 box-shadow: -100px 0px red; 15 clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 16 } 17 </style> 18 <div class="box"></div> 19 <script> 20 function assert_element_at(element, pointlist) { 21 for (let point of pointlist) { 22 let result = document.elementFromPoint(point[0], point[1]); 23 assert_equals(result, element, point.join(',')); 24 } 25 } 26 27 test(function() { 28 let div = document.querySelector('.box'); 29 30 // Points inside clip-path. 31 assert_element_at(div, [[50, 50], [50, 25], [50, 75], [25, 50], [75, 50]]); 32 33 // Points outside clip-path. 34 assert_element_at(document.body, [[20, 20], [80, 20], [20, 80], [80, 80]]); 35 }); 36 </script>