mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 12:28:12 +00:00
LibWeb: Account for all clipped border radii in containing block chain
With this change, instead of applying only the border-radius clipping from the closest containing block with hidden overflow, we now collect all boxes within the containing block chain and apply the clipping from all of them.
This commit is contained in:
parent
1ae416fa94
commit
d4932196cc
9 changed files with 133 additions and 32 deletions
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="reference/nested-boxes-with-hidden-overflow-and-border-radius-ref.html" />
|
||||
<style>
|
||||
.outer {
|
||||
overflow: hidden;
|
||||
border-radius: 100px;
|
||||
background-color: magenta;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.middle {
|
||||
overflow: hidden;
|
||||
border-radius: 50px;
|
||||
transform: translate(10px, 10px);
|
||||
background-color: lawngreen;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
</style>
|
||||
<div class="outer">
|
||||
<div class="middle">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue