LibWeb: Do not consume scroll event in PaintableBox without overflow

Specifically, without scrollable overflow. Fixes SerenityOS#24009, both on brave.com and on the reduction.
matjojo · May 7, 2024 · aef14f5 · aef14f5
1 parent 7f0bafd
commit aef14f5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/Tests/LibWeb/Ref/box-without-scrollable-overflow-should-not-consume-scroll-events.html b/Tests/LibWeb/Ref/box-without-scrollable-overflow-should-not-consume-scroll-events.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/box-without-scrollable-overflow-should-not-consume-scroll-events-ref.html" />
+<style>
+    .item {
+        width: 100px;
+        height: 100px;
+        box-sizing: border-box;
+        border: 1px solid black;
+    }
+    .item1 { overflow: auto; }
+    .scrollable {
+        overflow-y: scroll;
+        width: 100px;
+        height: 300px;
+        scrollbar-width: none;
+    }
+</style>
+<div class="scrollable">
+    <div class="item item1">1</div>
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+</div>
+<script>
+    internals.wheel(10, 10, 0, 100);
+</script>
diff --git a/...b/Ref/reference/box-without-scrollable-overflow-should-not-consume-scroll-events-ref.html b/...b/Ref/reference/box-without-scrollable-overflow-should-not-consume-scroll-events-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+    .scrollable {
+        overflow-y: scroll;
+        width: 100px;
+        height: 300px;
+        scrollbar-width: none;
+    }
+    .item {
+        width: 100px;
+        height: 100px;
+        box-sizing: border-box;
+        border: 1px solid black;
+    }
+</style>
+<div class="scrollable">
+    <div class="item">2</div>
+    <div class="item">3</div>
+    <div class="item">4</div>
+</div>
diff --git a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
@@ -731,6 +731,11 @@ bool PaintableBox::handle_mousewheel(Badge<EventHandler>, CSSPixelPoint, unsigne
 {
     if (!layout_box().is_user_scrollable())
         return false;
+
+    // TODO: Vertical and horizontal scroll overflow should be handled seperately.
+    if (!has_scrollable_overflow())
+        return false;
+
     scroll_by(wheel_delta_x, wheel_delta_y);
     return true;
 }