pointer-events-none-skip-scroll-scrollbar.html (1542B)
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 } 21 22 .spacer { 23 height: 200vh; 24 } 25 26 </style> 27 28 <div id="scroller"> 29 <div class="spacer"></div> 30 </div> 31 <div class="spacer"></div> 32 33 <script> 34 promise_test(async (t) => { 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 // The cursor is expected on the scrollbar, but if it's not (e.g. if the 48 // scrollbar is overlay and isn't show), the test should still pass. 49 const actions = new test_driver.Actions().scroll(295, 200, 0, 50, { duration: 50 }); 50 actions.send(); 51 assert_equals(await scrolled, "root", "Incorrect element scrolled"); 52 }, "Wheel-scroll over pointer-events: none scroller skips that scroller"); 53 </script>