ladybird/Tests/LibWeb/Ref/clip-border-radius-with-css-transform.html
Aliaksandr Kalenik f9f39477a4 LibWeb: Fix clip for boxes nested into a stacking context with transform
Modifies a loop that collects clip rectangles to stop once a box with a
CSS transform is encountered, as its clip still needs to be considered.
2024-08-14 21:04:46 +02:00

33 lines
697 B
HTML

<!doctype html>
<link rel="match" href="reference/clip-border-radius-with-css-transform-ref.html" />
<style>
* {
margin: 0;
}
.outer {
position: absolute;
overflow: hidden;
border-radius: 9999px;
width: 300px;
height: 300px;
transform: translateX(-100px);
left: 100px;
}
.middle {
overflow: hidden;
top: 0px;
bottom: 0px;
position: absolute;
width: 300px;
height: 300px;
background-color: transparent;
}
.inner {
position: absolute;
top: 0px;
bottom: 0px;
width: 300px;
height: 300px;
background: mediumspringgreen;
}
</style><body><div class="outer"><div class="middle"><div class="inner"></div>