clip-path-svg-geometry-box.html (2851B)
1 <!DOCTYPE html> 2 <title>Hit-tests of clip-path with geometry-box</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 rect { 11 width: 100px; 12 height: 100px; 13 stroke-width: 50px; 14 stroke: rgba(0, 0, 255, 0.5); 15 fill: lightblue; 16 } 17 </style> 18 <svg id="svg" height="400" width="600"> 19 <rect id="rect_a" x="50" y="50" style="clip-path: inset(0px) fill-box;"></rect> 20 <rect id="rect_b" x="250" y="50" style="clip-path: inset(10px) stroke-box;"></rect> 21 <rect id="rect_c" x="450" y="50" style="clip-path: inset(35px 35px 235px 435px) view-box;"></rect> 22 23 <g style="clip-path: inset(0px) fill-box;"> 24 <rect id="g_rect_a" x="50" y="250"></rect> 25 </g> 26 <g style="clip-path: inset(10px) stroke-box;"> 27 <rect id="g_rect_b" x="250" y="250"></rect> 28 </g> 29 <g style="clip-path: inset(235px 35px 35px 435px) view-box;"> 30 <rect id="g_rect_c" x="450" y="250"></rect> 31 </g> 32 </svg> 33 <script> 34 function assert_element_at(element, point_list) { 35 for (let point of point_list) { 36 let result = document.elementFromPoint(point[0], point[1]); 37 assert_equals(result, element, point.join(',')); 38 } 39 } 40 41 function points_inside_rect(x, y, width, height) { 42 return [ 43 [x + 1, y + 1], 44 [x + width - 1, y + 1], 45 [x + 1, y + height - 1], 46 [x + width - 1, y + height - 1] 47 ]; 48 } 49 50 function points_outside_rect(x, y, width, height) { 51 return [ 52 [x + 1, y - 1], 53 [x + width - 1, y - 1], 54 [x + 1, y + height + 1], 55 [x + width - 1, y - 1], 56 [x - 1, y + 1], 57 [x + width + 1, y + 1], 58 [x - 1, y + height - 1], 59 [x + width + 1, y + height - 1] 60 ]; 61 } 62 63 test(function() { 64 assert_element_at(rect_a, points_inside_rect(50, 50, 100, 100)); 65 assert_element_at(svg, points_outside_rect(50, 50, 100, 100)); 66 67 // 225,25 150x150 inset by 10px on all sides is 235,35 130x130 68 assert_element_at(rect_b, points_inside_rect(235, 35, 130, 130)); 69 assert_element_at(svg, points_outside_rect(235, 35, 130, 130)); 70 71 // 425,25 150x150, inset by 10px on all sides is 435,35 130x130 72 assert_element_at(rect_c, points_inside_rect(435, 35, 130, 130)); 73 assert_element_at(svg, points_outside_rect(435, 35, 130, 130)); 74 75 assert_element_at(g_rect_a, points_inside_rect(50, 250, 100, 100)); 76 assert_element_at(svg, points_outside_rect(50, 250, 100, 100)); 77 78 // 225,225 150x150 inset by 10px on all sides is 235,235 130x130 79 assert_element_at(g_rect_b, points_inside_rect(235, 235, 130, 130)); 80 assert_element_at(svg, points_outside_rect(235, 235, 130, 130)); 81 82 // 425,225 150x150 inset by 10px on all sides is 435,235 130x130 83 assert_element_at(g_rect_c, points_inside_rect(435, 235, 130, 130)); 84 assert_element_at(svg, points_outside_rect(435, 235, 130, 130)); 85 }); 86 </script>