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

LibWeb: Clean previous border radii clips in refresh_clip_state()

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

38
Tests/LibWeb/Ref/corner-clip-inside-scrollable.html Normal file
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>

27
Tests/LibWeb/Ref/reference/corner-clip-inside-scrollable-ref.html Normal file
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>

1
Userland/Libraries/LibWeb/Painting/ClipFrame.h
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; }

1
Userland/Libraries/LibWeb/Painting/ViewportPaintable.cpp
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()) {