RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-14 09:24:57 +00:00
Code Issues Activity Actions

LibWeb: Shift button paintable clip rectangle by scroll offset

Browse source 
Rectangles should be recorded using absolute coordinates, including
the scroll offset.
This commit is contained in:
Aliaksandr Kalenik 2024-02-06 11:19:55 +01:00 • committed by Andreas Kling
parent d43dbe2842
commit 4a41a65ec5
4 changed files with 54 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

34
Tests/LibWeb/Ref/button-inside-scroll-container.html Normal file
View file

@ -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
Tests/LibWeb/Ref/reference/button-inside-scroll-container-ref.html Normal file
View file

@ -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" />

4
Userland/Libraries/LibWeb/Painting/ButtonPaintable.cpp
View file

@ -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(),

5
Userland/Libraries/LibWeb/Painting/PaintableBox.h
View file

@ -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; }