浏览代码

LibWeb: Shift button paintable clip rectangle by scroll offset

Rectangles should be recorded using absolute coordinates, including
the scroll offset.
Aliaksandr Kalenik 1 年之前
父节点
当前提交
4a41a65ec5

+ 34 - 0
Tests/LibWeb/Ref/button-inside-scroll-container.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/button-inside-scroll-container-ref.html" />
+<style>
+    #scrollable {
+        height: 300px;
+        overflow: scroll;
+    }
+
+    input[type="submit"] {
+        display: block;
+        width: 100px;
+        height: 100px;
+        background-color: green;
+        outline: none;
+        border: 5px solid magenta;
+        box-sizing: border-box;
+    }
+</style>
+<div id="scrollable">
+    <input type="submit" value="1" />
+    <input type="submit" value="2" />
+    <input type="submit" value="3" />
+    <input type="submit" value="4" />
+    <input type="submit" value="5" />
+    <input type="submit" value="6" />
+    <input type="submit" value="7" />
+    <input type="submit" value="8" />
+    <input type="submit" value="9" />
+    <input type="submit" value="10" />
+</div>
+<script>
+    const scrollContainer = document.getElementById("scrollable");
+    scrollContainer.scrollTop = 100;
+</script>

+ 15 - 0
Tests/LibWeb/Ref/reference/button-inside-scroll-container-ref.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+    input[type="submit"] {
+        display: block;
+        width: 100px;
+        height: 100px;
+        background-color: green;
+        outline: none;
+        border: 5px solid magenta;
+        box-sizing: border-box;
+    }
+</style>
+<input type="submit" value="2" />
+<input type="submit" value="3" />
+<input type="submit" value="4" />

+ 3 - 1
Userland/Libraries/LibWeb/Painting/ButtonPaintable.cpp

@@ -60,7 +60,9 @@ void ButtonPaintable::paint(PaintContext& context, PaintPhase phase) const
         // Paint button text clipped to button rect
         auto& painter = context.recording_painter();
         painter.save();
-        painter.add_clip_rect(button_rect.to_type<int>());
+        auto clip_rect = absolute_rect();
+        clip_rect.translate_by(enclosing_scroll_frame_offset().value_or({}));
+        painter.add_clip_rect(context.enclosing_device_rect(clip_rect).to_type<int>());
         painter.draw_text(
             text_rect.to_type<int>(),
             static_cast<HTML::HTMLInputElement const&>(dom_node).value(),

+ 2 - 3
Userland/Libraries/LibWeb/Painting/PaintableBox.h

@@ -199,6 +199,8 @@ public:
     void set_corner_clip_radii(BorderRadiiData const& corner_radii) { m_corner_clip_radii = corner_radii; }
 
     Optional<int> scroll_frame_id() const { return m_scroll_frame_id; }
+    Optional<CSSPixelPoint> enclosing_scroll_frame_offset() const { return m_enclosing_scroll_frame_offset; }
+    Optional<CSSPixelRect> clip_rect() const { return m_clip_rect; }
 
 protected:
     explicit PaintableBox(Layout::Box const&);
@@ -211,9 +213,6 @@ protected:
     virtual CSSPixelRect compute_absolute_rect() const;
     virtual CSSPixelRect compute_absolute_paint_rect() const;
 
-    Optional<CSSPixelPoint> enclosing_scroll_frame_offset() const { return m_enclosing_scroll_frame_offset; }
-    Optional<CSSPixelRect> clip_rect() const { return m_clip_rect; }
-
 private:
     [[nodiscard]] virtual bool is_paintable_box() const final { return true; }