scroll-with-ancestor-border-radius.html (1641B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Should not scroll out of rounded corner</title> 4 <link rel="help" href="https://crbug.com/40277896"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/dom/events/scrolling/scroll_support.js"></script> 11 <style> 12 #container { 13 width: 300px; 14 height: 300px; 15 border-radius: 100px; 16 overflow: hidden; 17 border: 2px solid blue; 18 } 19 20 #scroller { 21 overflow: auto; 22 width: 300px; 23 height: 300px; 24 will-change: scroll-position; 25 } 26 27 .spacer { 28 height: 200vh; 29 } 30 31 </style> 32 33 <div id="container"> 34 <div id="scroller"> 35 <div class="spacer"></div> 36 </div> 37 </div> 38 <div class="spacer"></div> 39 40 <script> 41 promise_test(async (t) => { 42 await waitForCompositorCommit(); 43 let scrolled = new Promise((resolve) => { 44 let scrollers = [window, document.getElementById("scroller")]; 45 let onscroll = (evt) => { 46 for (const scroller of scrollers) { 47 scroller.removeEventListener("scroll", onscroll); 48 } 49 resolve(evt.target.id || "root"); 50 } 51 for (const scroller of scrollers) { 52 scroller.addEventListener("scroll", onscroll); 53 } 54 }); 55 const actions = new test_driver.Actions().scroll(20, 20, 0, 50, { duration: 50 }); 56 actions.send(); 57 assert_equals(await scrolled, "root", "Incorrect element scrolled"); 58 }, "Wheel-scroll out of rounded corner skips that scroller"); 59 </script>