system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-09 06:20:46 +00:00
Code Issues Projects Releases Wiki Activity

LibWeb: Fix hidden overflow clipping with nested CSS transforms

Browse Source 
This is a fix for regression introduced in
0bf82f748f

All CSS transforms need to be removed from the clip rectangle before
applying it. However, it is still necessary to calculate it with
applied transforms to find the correct intersection of all clip
rectangles in the containing block chain.
This commit is contained in:
Aliaksandr Kalenik 2024-01-29 03:27:38 +01:00 committed by Andreas Kling
parent e1d1aac7bc
commit 20de69693b
3 changed files with 90 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
Tests/LibWeb/Ref/overflow-hidden-6.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<link rel="match" href="reference/overflow-hidden-6-ref.html" />
<style>
.display-flex-position-relative {
display: flex;
flex-direction: column;
position: relative;
}
.display-block {
display: block
}
.overflow-hidden {
overflow: hidden
}
.width-1050px {
width: 100px
}
.width-100-percent {
width: 100%
}
.left-0px {
left: 0px
}
.bottom-0px {
bottom: 0px
}
.height-100-percent {
height: 100%
}
.top-50-percent {
top: 50%
}
.left-50-percent {
left: 50%
}
.transform-50-percent {
transform: translateX(-50%) translateY(-50%);
}
.position-absolute {
position: absolute
}
.height-auto {
height: auto
}
.padding-bottom-100-percent {
padding-bottom: 100%;
}
</style>
<div class="display-flex-position-relative width-1050px">
<div class="width-100-percent padding-bottom-100-percent"></div>
<div class="position-absolute width-100-percent height-100-percent">
<div
class="height-100-percent width-100-percent position-absolute left-50-percent top-50-percent transform-50-percent">
<div
class="overflow-hidden position-absolute left-50-percent top-50-percent transform-50-percent width-100-percent height-100-percent ">
<div class="display-block width-100-percent padding-bottom-100-percent"></div>
<div class="bottom-0px left-0px position-absolute top-0px width-100-percent height-100-percent "
style="background-color: green;"></div>
</div>
</div>
</div>
</div>

11
Tests/LibWeb/Ref/reference/overflow-hidden-6-ref.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<link rel="match" href="reference/overflow-hidden-6-ref.html" />
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div class="box"></div>

8
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
View File

@ -399,12 +399,10 @@ void PaintableBox::apply_clip_overflow_rect(PaintContext& context, PaintPhase ph
for (auto const* ancestor = &this->layout_box(); ancestor; ancestor = ancestor->containing_block()) {
auto affine_transform = Gfx::extract_2d_affine_transform(ancestor->paintable_box()->transform());
if (!affine_transform.is_identity()) {
// NOTE: Because the painting command executor applies CSS transform of the nearest stacking context
// and the m_clip_rect is determined considering CSS transforms, here transform of the nearest
// stacking context need to be compensated.
// This adjustment ensures the transform is accounted for just once.
// NOTE: Since the painting command executor applies a CSS transform and the clip rect is calculated
// with this transform in account, we need to remove the transform from the clip rect.
// Otherwise, the transform will be applied twice to the clip rect.
overflow_clip_rect.translate_by(-affine_transform.translation().to_type<CSSPixels>());
break;
}
}