scroll-with-border-radius.html (1528B)
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 #scroller { 13 border-radius: 100px; 14 overflow: auto; 15 width: 300px; 16 height: 300px; 17 border: 2px solid blue; 18 will-change: scroll-position; 19 } 20 21 .spacer { 22 height: 200vh; 23 } 24 25 </style> 26 27 <div id="scroller"> 28 <div class="spacer"></div> 29 </div> 30 <div class="spacer"></div> 31 32 <script> 33 promise_test(async (t) => { 34 await waitForCompositorCommit(); 35 let scrolled = new Promise((resolve) => { 36 let scrollers = [window, document.getElementById("scroller")]; 37 let onscroll = (evt) => { 38 for (const scroller of scrollers) { 39 scroller.removeEventListener("scroll", onscroll); 40 } 41 resolve(evt.target.id || "root"); 42 } 43 for (const scroller of scrollers) { 44 scroller.addEventListener("scroll", onscroll); 45 } 46 }); 47 const actions = new test_driver.Actions().scroll(20, 20, 0, 50, { duration: 50 }); 48 actions.send(); 49 assert_equals(await scrolled, "root", "Incorrect element scrolled"); 50 }, "Wheel-scroll out of rounded corner skips that scroller"); 51 </script>