LibWeb: Apply corner clip before scroll offset for PaintableWithLines

Fixes bug when corner clip mask moves along with the scrolled text.
kalenikaliaksandr · May 25, 2024 · 907a8fe · 907a8fe
1 parent ed8d036
commit 907a8fe
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/Tests/LibWeb/Ref/reference/scrolled-text-with-clipped-corners-ref.html b/Tests/LibWeb/Ref/reference/scrolled-text-with-clipped-corners-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html" />
+<style>
+    * {
+        scrollbar-width: none;
+    }
+
+    #container {
+        width: 300px;
+        height: 300px;
+        border: 5px solid black;
+        border-radius: 50%;
+        overflow: hidden;
+    }
+
+    #text-container {
+        overflow: scroll;
+        width: 300px;
+        height: 300px;
+        font-size: 40px;
+    }
+</style>
+<div id="container">
+    <div id="text-container">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices neque eu nisi facilisis
+        viverra. Integer lacinia, lacus vel condimentum suscipit, lacus felis porta nulla, eget
+        lacinia sem neque ut neque. In sagittis, eros vel interdum porta, quam ex rhoncus lectus,
+        vitae suscipit risus orci sit amet velit. Praesent imperdiet condimentum rutrum. Cras vitae
+        nisl sapien. Curabitur ligula diam, tincidunt congue tincidunt nec, sodales nec orci.
+        Vestibulum tincidunt non elit in vehicula. Etiam malesuada neque eu porta rhoncus. Curabitur
+        vel nunc finibus ligula posuere venenatis.
+    </div>
+</div>
+<script>
+    const scrollContainer = document.getElementById("text-container");
+    scrollContainer.scrollTop = 300;
+</script>
diff --git a/Tests/LibWeb/Ref/scrolled-text-with-clipped-corners.html b/Tests/LibWeb/Ref/scrolled-text-with-clipped-corners.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/scrolled-text-with-clipped-corners-ref.html" />
+<style>
+    * {
+        scrollbar-width: none;
+    }
+
+    #container {
+        width: 300px;
+        height: 300px;
+        border: 5px solid black;
+        border-radius: 50%;
+        overflow: scroll;
+        font-size: 40px;
+    }
+</style>
+<div id="container">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices neque eu nisi facilisis
+    viverra. Integer lacinia, lacus vel condimentum suscipit, lacus felis porta nulla, eget lacinia
+    sem neque ut neque. In sagittis, eros vel interdum porta, quam ex rhoncus lectus, vitae suscipit
+    risus orci sit amet velit. Praesent imperdiet condimentum rutrum. Cras vitae nisl sapien.
+    Curabitur ligula diam, tincidunt congue tincidunt nec, sodales nec orci. Vestibulum tincidunt
+    non elit in vehicula. Etiam malesuada neque eu porta rhoncus. Curabitur vel nunc finibus ligula
+    posuere venenatis.
+</div>
+<script>
+    const scrollContainer = document.getElementById("container");
+    scrollContainer.scrollTop = 300;
+</script>
diff --git a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
@@ -679,8 +679,6 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
         context.recording_painter().save();
         // FIXME: Handle overflow-x and overflow-y being different values.
         context.recording_painter().add_clip_rect(context.rounded_device_rect(clip_box).to_type<int>());
-        auto scroll_offset = context.rounded_device_point(this->scroll_offset());
-        context.recording_painter().translate(-scroll_offset.to_type<int>());
 
         auto border_radii = normalized_border_radii_data(ShrinkRadiiForBorders::Yes);
         CornerRadii corner_radii {
@@ -693,6 +691,9 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
             corner_clip_id = context.allocate_corner_clipper_id();
             context.recording_painter().sample_under_corners(*corner_clip_id, corner_radii, context.rounded_device_rect(clip_box).to_type<int>(), CornerClip::Outside);
         }
+
+        auto scroll_offset = context.rounded_device_point(this->scroll_offset());
+        context.recording_painter().translate(-scroll_offset.to_type<int>());
     }
 
     // Text shadows