mirror of
https://github.com/SerenityOS/serenity
synced 2024-10-15 12:23:15 +00:00
LibWeb: Fix hidden overflow clipping with nested CSS transforms
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:
parent
e1d1aac7bc
commit
20de69693b
76
Tests/LibWeb/Ref/overflow-hidden-6.html
Normal file
76
Tests/LibWeb/Ref/overflow-hidden-6.html
Normal 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
11
Tests/LibWeb/Ref/reference/overflow-hidden-6-ref.html
Normal 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>
|
|
@ -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()) {
|
for (auto const* ancestor = &this->layout_box(); ancestor; ancestor = ancestor->containing_block()) {
|
||||||
auto affine_transform = Gfx::extract_2d_affine_transform(ancestor->paintable_box()->transform());
|
auto affine_transform = Gfx::extract_2d_affine_transform(ancestor->paintable_box()->transform());
|
||||||
if (!affine_transform.is_identity()) {
|
if (!affine_transform.is_identity()) {
|
||||||
// NOTE: Because the painting command executor applies CSS transform of the nearest stacking context
|
// NOTE: Since the painting command executor applies a CSS transform and the clip rect is calculated
|
||||||
// and the m_clip_rect is determined considering CSS transforms, here transform of the nearest
|
// with this transform in account, we need to remove the transform from the clip rect.
|
||||||
// stacking context need to be compensated.
|
// Otherwise, the transform will be applied twice to the clip rect.
|
||||||
// This adjustment ensures the transform is accounted for just once.
|
|
||||||
overflow_clip_rect.translate_by(-affine_transform.translation().to_type<CSSPixels>());
|
overflow_clip_rect.translate_by(-affine_transform.translation().to_type<CSSPixels>());
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue