pointer-events-none-skip-scroll-will-change-scrollbar.html (1576B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>pointer-events: none correctly targets scrolls</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <style> 10 body { 11 margin: 0; 12 } 13 14 #scroller { 15 overflow: auto; 16 width: 300px; 17 height: 300px; 18 border: 2px solid blue; 19 pointer-events: none; 20 will-change: scroll-position; 21 } 22 23 .spacer { 24 height: 200vh; 25 } 26 27 </style> 28 29 <div id="scroller"> 30 <div class="spacer"></div> 31 </div> 32 <div class="spacer"></div> 33 34 <script> 35 promise_test(async (t) => { 36 let scrolled = new Promise((resolve) => { 37 let scrollers = [window, document.getElementById("scroller")]; 38 let onscroll = (evt) => { 39 for (const scroller of scrollers) { 40 scroller.removeEventListener("scroll", onscroll); 41 } 42 resolve(evt.target.id || "root"); 43 } 44 for (const scroller of scrollers) { 45 scroller.addEventListener("scroll", onscroll); 46 } 47 }); 48 // The cursor is expected on the scrollbar, but if it's not (e.g. if the 49 // scrollbar is overlay and isn't show), the test should still pass. 50 const actions = new test_driver.Actions().scroll(295, 200, 0, 50, { duration: 50 }); 51 actions.send(); 52 assert_equals(await scrolled, "root", "Incorrect element scrolled"); 53 }, "Wheel-scroll over pointer-events: none scroller skips that scroller"); 54 </script>