pointerevent_hit_test_scroll_visible_descendant.html (1632B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>pointer-events: auto descendant 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 height: 200vh; 12 } 13 14 #overlay { 15 overflow: auto; 16 height: 300px; 17 border: 2px solid blue; 18 pointer-events: none; 19 } 20 21 #scrollable { 22 background: white; 23 border: 3px solid green; 24 height: 150px; 25 /* pointer-events: auto; should allow scrolling over this element. */ 26 pointer-events: auto; 27 } 28 29 #spacer { 30 height: 200vh; 31 } 32 33 </style> 34 35 <body id="body"> 36 <div id="overlay"> 37 <div id="scrollable"></div> 38 <div id="spacer"></div> 39 </div> 40 </body> 41 <script> 42 promise_test(async (t) => { 43 let scrolled = new Promise((resolve) => { 44 let scrollers = [window, document.getElementById("overlay")]; 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(50, 50, 0, 50, { duration: 50 }); 56 actions.send(); 57 assert_equals(await scrolled, "overlay", "Incorrect element scrolled"); 58 }, "Wheel-scroll over pointer-events: auto descendant scrolls pointer-events: none scroller."); 59 </script>