RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 19:07:34 +00:00
Code Issues Activity Actions

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
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>