hit-test-stacking-context-parent-border-radius.html (3725B)
1 <!DOCTYPE html> 2 <title>Hit Test with Stacking Context</title> 3 <link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-radius"> 5 <link rel="help" href="https://issues.chromium.org/issues/40811639"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #parent { 10 width: 100px; 11 height: 100px; 12 overflow: hidden; 13 border-radius: 50%; 14 } 15 #child { 16 width: 100px; 17 height: 100px; 18 background-color: green; 19 } 20 </style> 21 22 <div id="parent"> 23 <div id="child"></div> 24 </div> 25 26 <script> 27 function elementFromPointOutsideParentBorderRadius() { 28 const rect = document.getElementById('parent').getBoundingClientRect(); 29 return document.elementFromPoint(rect.left + 27, rect.bottom - 5); 30 } 31 function elementFromPointInsideParentBorderRadius() { 32 const rect = document.getElementById('parent').getBoundingClientRect(); 33 return document.elementFromPoint(rect.left + 32, rect.bottom - 10); 34 } 35 36 test(() => { 37 assert_equals(elementFromPointOutsideParentBorderRadius(), document.body); 38 assert_equals(elementFromPointInsideParentBorderRadius(), child); 39 }, 'Hit testing respects border-radius clipping on elements without creating stacking contexts'); 40 41 test(() => { 42 child.style = 'will-change: transform'; 43 assert_equals(elementFromPointOutsideParentBorderRadius(), document.body); 44 assert_equals(elementFromPointInsideParentBorderRadius(), child); 45 child.style = ''; 46 }, 'Hit testing respects border-radius clipping on elements with will-change transform'); 47 48 test(() => { 49 child.style = 'opacity: 0.2'; 50 assert_equals(elementFromPointOutsideParentBorderRadius(), document.body); 51 assert_equals(elementFromPointInsideParentBorderRadius(), child); 52 child.style = ''; 53 }, 'Hit testing respects border-radius clipping on elements with opacity < 1'); 54 55 test(() => { 56 child.style = 'height: 1000px; transform: translate(0, -500px);'; 57 assert_equals(elementFromPointOutsideParentBorderRadius(), document.body); 58 assert_equals(elementFromPointInsideParentBorderRadius(), child); 59 child.style = ''; 60 }, 'Hit testing respects border-radius clipping on elements with a transform property'); 61 62 test(() => { 63 child.style = 'position: relative; top: 30px;'; 64 assert_equals(elementFromPointOutsideParentBorderRadius(), document.body); 65 assert_equals(elementFromPointInsideParentBorderRadius(), child); 66 child.style = ''; 67 }, 'Hit testing respects border-radius clipping on elements with a PaintOffset from the container'); 68 69 test(() => { 70 child.style = 'position: relative; top: 30px; overflow: scroll;'; 71 assert_equals(elementFromPointOutsideParentBorderRadius(), document.body); 72 assert_equals(elementFromPointInsideParentBorderRadius(), child); 73 child.style = ''; 74 }, 'Hit testing respects border-radius clipping on elements with a PaintOffsetTranslation from the container'); 75 76 test(() => { 77 child.style = 'position: relative; top: 30px; overflow: scroll;'; 78 document.body.style.margin = '50px'; 79 const container = document.createElement('div'); 80 container.style.width = '50px'; 81 container.style.height = '50px'; 82 container.style.overflow = 'scroll'; 83 container.appendChild(document.getElementById('parent')); 84 document.body.appendChild(container); 85 container.scrollTop = container.scrollHeight; 86 container.scrollLeft = 0; 87 const offset = container.getBoundingClientRect().left; 88 const curY = offset + 10; 89 assert_equals(document.elementFromPoint(offset, curY), container); 90 assert_equals(document.elementFromPoint(offset + 10, curY), child); 91 child.style = ''; 92 }, 'Hit testing respects border-radius clipping on elements with a different coordinate space'); 93 </script>