Adjust the size limit for Interaction Regions

https://bugs.webkit.org/show_bug.cgi?id=260659 <rdar://114216114> Reviewed by Tim Horton. Tweak the maximum size threshold (relative to the frame area) before we skip Interaction Regions. * Source/WebCore/page/InteractionRegion.cpp: (WebCore::interactionRegionForRenderedRegion): Make the maximum 1/3rd instead of half of the frame area. * LayoutTests/interaction-region/interaction-region-size-limit-expected.txt: Added. * LayoutTests/interaction-region/interaction-region-size-limit.html: Added. Add a test with some mockup UI. Canonical link: https://commits.webkit.org/267277@main
WebKit · Aug 25, 2023 · 05a5d83 · 05a5d83
1 parent 5023d70
commit 05a5d83
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 1 deletion.
diff --git a/LayoutTests/interaction-region/interaction-region-size-limit-expected.txt b/LayoutTests/interaction-region/interaction-region-size-limit-expected.txt
@@ -0,0 +1,22 @@
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (drawsContent 1)
+      (backgroundColor #FFFFFF)
+      (event region
+        (rect (0,0) width=800 height=600)
+
+      (interaction regions [
+        (interaction (0,0) width=395 height=295)
+        (borderRadius 0.00),
+        (interaction (0,305) width=395 height=295)
+        (borderRadius 0.00)])
+      )
+    )
+  )
+)
+
diff --git a/LayoutTests/interaction-region/interaction-region-size-limit.html b/LayoutTests/interaction-region/interaction-region-size-limit.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<style>
+    section {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+
+        cursor: pointer;
+
+        background: gray;
+    }
+
+    div {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        background: purple;
+    }
+
+    div > div {
+        background: blue;
+    }
+
+</style>
+<body>
+<section>
+    <div>
+        <div>
+        </div>
+        <div>
+        </div>
+    </div>
+    <div></div>
+</section>
+<pre id="results"></pre>
+<script>
+document.body.addEventListener("click", function(e) {
+    console.log(e, "event delegation");
+});
+
+if (window.testRunner)
+    testRunner.dumpAsText();
+
+window.onload = function () {
+    if (window.internals)
+       results.textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_EVENT_REGION | internals.LAYER_TREE_INCLUDES_ROOT_LAYER_PROPERTIES);
+};
+</script>
+</body>
+</html>
diff --git a/Source/WebCore/page/InteractionRegion.cpp b/Source/WebCore/page/InteractionRegion.cpp
@@ -252,7 +252,7 @@ std::optional<InteractionRegion> interactionRegionForRenderedRegion(RenderObject
     // FIXME: Consider also allowing elements that only receive touch events.
     bool hasListener = renderer.style().eventListenerRegionTypes().contains(EventListenerRegionType::MouseClick);
     bool hasPointer = cursorTypeForElement(*matchedElement) == CursorType::Pointer || shouldAllowNonPointerCursorForElement(*matchedElement);
-    bool isTooBigForInteraction = checkedRegionArea.value() > frameViewArea / 2;
+    bool isTooBigForInteraction = checkedRegionArea.value() > frameViewArea / 3;
 
     auto elementIdentifier = matchedElement->identifier();