RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 14:07:45 +00:00
Code Issues Activity Actions

LibWeb: Clamp scroll offset to valid range in set_scroll_offset()

Browse source 
By moving scroll offset clamp from `PaintableBox::scroll_by()` to
`PaintableBox::set_scroll_offset()`, we ensure that updates from
`Element::set_scroll_top()` and `Element::set_scroll_left()` are
constrained to a valid range.
This commit is contained in:
Aliaksandr Kalenik 2024-02-22 01:27:21 +01:00 • committed by Andreas Kling
parent ee4abacde6
commit 155070cfd8
3 changed files with 48 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Text/expected/DOM/Element-set-scroll-left.txt Normal file
View file

@ -0,0 +1,2 @@
Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12 scrollWidth: 1430
scrollLeft: 1130

36
Tests/LibWeb/Text/input/DOM/Element-set-scroll-left.html Normal file
View file

@ -0,0 +1,36 @@
<style>
.scrollable-div {
width: 100%;
overflow-x: auto;
white-space: nowrap;
border: 10px magenta solid;
}
span {
width: 100px;
height: 100px;
display: inline-block;
border: 10px solid #000;
}
body {
width: 300px;
}
</style>
<body>
<div class="scrollable-div">
<span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span
><span>Item 5</span><span>Item 6</span><span>Item 7</span><span>Item 8</span
><span>Item 9</span><span>Item 10</span><span>Item 11</span><span>Item 12</span>
</div>
</body>
<script src="../include.js"></script>
<script>
test(() => {
const scrollableDiv = document.querySelector(".scrollable-div");
const scrollWidth = scrollableDiv.scrollWidth;
println("scrollWidth: " + scrollWidth);
scrollableDiv.scrollLeft = scrollableDiv.scrollWidth;
println("scrollLeft: " + scrollableDiv.scrollLeft);
});
</script>

19
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -66,6 +66,15 @@ CSSPixelPoint PaintableBox::scroll_offset() const
void PaintableBox::set_scroll_offset(CSSPixelPoint offset) void PaintableBox::set_scroll_offset(CSSPixelPoint offset)
{ {
auto scrollable_overflow_rect = this->scrollable_overflow_rect();
if (!scrollable_overflow_rect.has_value())
return;
auto max_x_offset = scrollable_overflow_rect->width() - content_size().width();
auto max_y_offset = scrollable_overflow_rect->height() - content_size().height();
offset.set_x(clamp(offset.x(), 0, max_x_offset));
offset.set_y(clamp(offset.y(), 0, max_y_offset));
// FIXME: If there is horizontal and vertical scroll ignore only part of the new offset // FIXME: If there is horizontal and vertical scroll ignore only part of the new offset
if (offset.y() < 0 || scroll_offset() == offset) if (offset.y() < 0 || scroll_offset() == offset)
return; return;
@ -86,15 +95,7 @@ void PaintableBox::set_scroll_offset(CSSPixelPoint offset)
void PaintableBox::scroll_by(int delta_x, int delta_y) void PaintableBox::scroll_by(int delta_x, int delta_y)
{ {
auto scrollable_overflow_rect = this->scrollable_overflow_rect(); set_scroll_offset(scroll_offset().translated(delta_x, delta_y));
if (!scrollable_overflow_rect.has_value())
return;
auto max_x_offset = scrollable_overflow_rect->width() - content_size().width();
auto max_y_offset = scrollable_overflow_rect->height() - content_size().height();
auto current_offset = scroll_offset();
auto new_offset_x = clamp(current_offset.x() + delta_x, 0, max_x_offset);
auto new_offset_y = clamp(current_offset.y() + delta_y, 0, max_y_offset);
set_scroll_offset({ new_offset_x, new_offset_y });
} }
void PaintableBox::set_offset(CSSPixelPoint offset) void PaintableBox::set_offset(CSSPixelPoint offset)