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:
parent
91378ded96
commit
c74fc4c171
4 changed files with 67 additions and 0 deletions
38
Tests/LibWeb/Ref/corner-clip-inside-scrollable.html
Normal file
38
Tests/LibWeb/Ref/corner-clip-inside-scrollable.html
Normal 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>
|
|
@ -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>
|
|
@ -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; }
|
||||
|
|
|
@ -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()) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue