1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 05:57:44 +00:00

LibWeb: Clean previous border radii clips in refresh_clip_state()

The list of border radii clips needs to be reset before being populated
with new clips that have refreshed positions. Besides fixing painting,
this also improves performance because the number of sample/blit
commands does not increase as we scroll.
This commit is contained in:
Aliaksandr Kalenik 2024-02-28 11:57:52 +01:00 committed by Tim Flynn
parent 91378ded96
commit c74fc4c171
4 changed files with 67 additions and 0 deletions

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<link rel="match" href="reference/corner-clip-inside-scrollable-ref.html" />
<style>
* {
scrollbar-width: none;
}
.box {
width: 100px;
height: 100px;
border: 5px solid black;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
}
.inner-box {
width: 100px;
height: 100px;
background-color: magenta;
}
#scroll {
overflow: scroll;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
<div id="scroll">
<div class="box" id="a"><div class="inner-box" id="aa"></div></div>
<div class="box" id="b"><div class="inner-box" id="bb"></div></div>
<div class="box" id="c"><div class="inner-box" id="cc"></div></div>
</div>
<script>
const scroll = document.getElementById("scroll");
scroll.scrollTop = 100;
</script>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<style>
.box {
width: 100px;
height: 100px;
border: 5px solid black;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
}
.inner-box {
width: 100px;
height: 100px;
background-color: magenta;
}
#container {
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
<div id="container">
<div class="box" id="a"><div class="inner-box" id="aa"></div></div>
<div class="box" id="b"><div class="inner-box" id="bb"></div></div>
</div>

View file

@ -28,6 +28,7 @@ struct ClipFrame : public RefCounted<ClipFrame> {
}
m_border_radii_clips.append(border_radii_clip);
}
void clear_border_radii_clips() { m_border_radii_clips.clear(); }
CSSPixelRect rect() const { return m_rect; }
void set_rect(CSSPixelRect rect) { m_rect = rect; }

View file

@ -143,6 +143,7 @@ void ViewportPaintable::refresh_clip_state()
// Start from CSS clip property if it exists.
Optional<CSSPixelRect> clip_rect = paintable_box.get_clip_rect();
clip_frame.clear_border_radii_clips();
if (overflow_x != CSS::Overflow::Visible && overflow_y != CSS::Overflow::Visible) {
auto overflow_clip_rect = paintable_box.compute_absolute_padding_rect_with_css_transform_applied();
for (auto const* block = &paintable_box.layout_box(); !block->is_viewport(); block = block->containing_block()) {