mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-13 11:39:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Fix clip for boxes nested into a stacking context with transform

Browse source 
Modifies a loop that collects clip rectangles to stop once a box with a
CSS transform is encountered, as its clip still needs to be considered.
This commit is contained in:
Aliaksandr Kalenik 2024-08-14 18:08:04 +02:00 • committed by Alexander Kalenik
commit f9f39477a4
Notes: github-actions[bot] 2024-08-14 19:05:41 +00:00
3 changed files with 57 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

33
Tests/LibWeb/Ref/clip-border-radius-with-css-transform.html Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<link rel="match" href="reference/clip-border-radius-with-css-transform-ref.html" />
<style>
* {
margin: 0;
}
.outer {
position: absolute;
overflow: hidden;
border-radius: 9999px;
width: 300px;
height: 300px;
transform: translateX(-100px);
left: 100px;
}
.middle {
overflow: hidden;
top: 0px;
bottom: 0px;
position: absolute;
width: 300px;
height: 300px;
background-color: transparent;
}
.inner {
position: absolute;
top: 0px;
bottom: 0px;
width: 300px;
height: 300px;
background: mediumspringgreen;
}
</style><body><div class="outer"><div class="middle"><div class="inner"></div>

21
Tests/LibWeb/Ref/reference/clip-border-radius-with-css-transform-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<style>
* {
margin: 0;
}
.outer {
position: absolute;
overflow: hidden;
border-radius: 9999px;
width: 300px;
height: 300px;
}
.inner {
position: absolute;
top: 0px;
bottom: 0px;
width: 300px;
height: 300px;
background: mediumspringgreen;
}
</style><body><div class="outer"><div class="inner"></div>

6
Userland/Libraries/LibWeb/Painting/ViewportPaintable.cpp
View file

@ -178,9 +178,6 @@ void ViewportPaintable::refresh_clip_state()
auto overflow_clip_rect = paintable_box.absolute_padding_box_rect();
clip_frame.add_clip_rect(overflow_clip_rect, paintable_box.normalized_border_radii_data(ShrinkRadiiForBorders::Yes), paintable_box.enclosing_scroll_frame());
for (auto const* block = &paintable_box.layout_box(); !block->is_viewport(); block = block->containing_block()) {
if (block->has_css_transform()) {
break;
}
auto const& block_paintable_box = *block->paintable_box();
auto block_overflow_x = block_paintable_box.computed_values().overflow_x();
auto block_overflow_y = block_paintable_box.computed_values().overflow_y();
@ -191,6 +188,9 @@ void ViewportPaintable::refresh_clip_state()
if (auto css_clip_property_rect = block->paintable_box()->get_clip_rect(); css_clip_property_rect.has_value()) {
clip_frame.add_clip_rect(css_clip_property_rect.value(), {}, block_paintable_box.enclosing_scroll_frame());
}
if (block->has_css_transform()) {
break;
}
}
}
}