| <!doctype html> |
| <meta charset=utf-8> |
| <title>pointer-events: none correctly targets scrolls</title> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| |
| <div style="pointer-events: none"> |
| <iframe id="iframe"></iframe> |
| </div> |
| <div style="height: 200vh"></div> |
| |
| <script> |
| promise_test(async (t) => { |
| let iframe = document.getElementById("iframe"); |
| await new Promise((resolve) => { |
| iframe.onload = resolve; |
| iframe.srcdoc = ` |
| <style> |
| #scroller { |
| overflow: auto; |
| height: 100px; |
| border: 2px solid blue; |
| will-change: scroll-position; |
| } |
| .spacer { |
| height: 200vh; |
| } |
| </style> |
| <div id="scroller"> |
| <div class="spacer"></div> |
| </div> |
| <div class="spacer"></div> |
| `; |
| }); |
| let scrolled = new Promise((resolve) => { |
| let scrollers = [ |
| window, |
| iframe.contentWindow, |
| iframe.contentDocument.getElementById("scroller") |
| ]; |
| let onscroll = (evt) => { |
| for (const scroller of scrollers) { |
| scroller.removeEventListener("scroll", onscroll); |
| } |
| resolve(evt.target.id || "root"); |
| } |
| for (const scroller of scrollers) { |
| scroller.addEventListener("scroll", onscroll); |
| } |
| }); |
| const actions = new test_driver.Actions().scroll(50, 50, 0, 50, { duration: 50 }); |
| actions.send(); |
| assert_equals(await scrolled, "root", "Incorrect element scrolled"); |
| }, "Wheel-scroll over pointer-events: none scroller skips that scroller"); |
| </script> |