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