mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-22 02:26:11 +00:00
20de69693b
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.
77 lines
1.7 KiB
HTML
77 lines
1.7 KiB
HTML
<!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>
|