Incorrect wheel event behavior with Shadow DOM

https://bugs.webkit.org/show_bug.cgi?id=264469 rdar://118496293 Reviewed by Ryosuke Niwa and Chris Dumez. `findEnclosingScrollableContainer()` needs to use `parentInComposedTree()` to find the enclosing ScrollableArea for the overflow scroll. * LayoutTests/fast/scrolling/mac/wheel-event-in-overflow-with-shadow-dom-expected.txt: Added. * LayoutTests/fast/scrolling/mac/wheel-event-in-overflow-with-shadow-dom.html: Added. * Source/WebCore/page/mac/EventHandlerMac.mm: (WebCore::findEnclosingScrollableContainer): Canonical link: https://commits.webkit.org/273181@main
WebKit · Jan 18, 2024 · bd33a8e · bd33a8e
1 parent 5556d4c
commit bd33a8e
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 1 deletion.
diff --git a/LayoutTests/fast/scrolling/mac/wheel-event-in-overflow-with-shadow-dom-expected.txt b/LayoutTests/fast/scrolling/mac/wheel-event-in-overflow-with-shadow-dom-expected.txt
@@ -0,0 +1,10 @@
+
+Test scroll over shadow content
+PASS overflowScrollEventCount > 0 is true
+PASS windowScrollEventCount == 0 is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Scrolling over this element should scroll the overflow scroller
+
+
diff --git a/LayoutTests/fast/scrolling/mac/wheel-event-in-overflow-with-shadow-dom.html b/LayoutTests/fast/scrolling/mac/wheel-event-in-overflow-with-shadow-dom.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
+<html>
+<head>
+    <style>
+        body {
+            height: 5000px;
+        }
+
+        .filler {
+            width: 20px;
+            height: 250px;
+            background-color: silver;
+        }
+
+        #container {
+            height: 400px;
+            width: 400px;
+            padding: 10px;
+            border: 1px solid black;
+        }
+
+        #target {
+            border: 1px solid gray;
+            padding: 10px;
+            height: 150px;
+            background-color: orange;
+        }
+    </style>
+    <script src="../../../resources/js-test-pre.js"></script>
+    <script src="../../../resources/ui-helper.js"></script>
+    <script>
+        var jsTestIsAsync = true;
+
+        var overflowScrollEventCount = 0;
+        var windowScrollEventCount = 0;
+
+        async function testScrollOverContent()
+        {
+            debug('');
+            debug('Test scroll over shadow content');
+            await UIHelper.mouseWheelScrollAt(200, 400);
+
+            shouldBe('overflowScrollEventCount > 0', 'true');
+            shouldBe('windowScrollEventCount == 0', 'true');
+        }
+
+        async function scrollTest()
+        {
+            await testScrollOverContent();
+            finishJSTest();
+        }
+
+        function setupCustomElement(target)
+        {
+            target.addEventListener('wheel', () => {});
+
+            class TestContainer extends HTMLElement {
+                connectedCallback() {
+                    const shadow = this.attachShadow({ mode: 'open' });
+                    shadow.innerHTML = `
+                            <div style="height: calc(100% - 20px); overflow: auto; border: 1px solid green; padding: 10px" onscroll="++overflowScrollEventCount">
+                                <slot></slot>
+                            </div>`;
+                }
+            }
+
+            customElements.define('test-container', TestContainer);
+        }
+
+        window.addEventListener('load', () => {
+            setupCustomElement(document.getElementById('target'));
+
+            window.addEventListener('scroll', () => {
+                ++windowScrollEventCount;
+            }, false);
+
+            setTimeout(scrollTest, 0);
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <test-container>
+            <div class="filler"></div>
+            <div id="target">
+                <p>Scrolling over this element should scroll the overflow scroller<p>
+            </div>
+            <div class="filler"></div>
+        </test-container>
+    </div>
+    <script src="../../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/Source/WebCore/page/mac/EventHandlerMac.mm b/Source/WebCore/page/mac/EventHandlerMac.mm
@@ -800,7 +800,7 @@ static bool frameHasPlatformWidget(const LocalFrame& frame)
 {
     // Find the first node with a valid scrollable area starting with the current
     // node and traversing its parents (or shadow hosts).
-    for (ContainerNode* candidate = node; candidate; candidate = candidate->parentOrShadowHostNode()) {
+    for (auto* candidate = node; candidate; candidate = candidate->parentInComposedTree()) {
         if (is<HTMLIFrameElement>(*candidate))
             continue;