mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-22 02:26:11 +00:00
0bf82f748f
With this change, clip rectangles for boxes with hidden overflow or the clip property are no longer calculated during the recording of painting commands. Instead, it has moved to the "pre-paint" phase, along with the assignment of scrolling offsets, and works in the following way: 1. The paintable tree is traversed to collect all paintable boxes that have hidden overflow or use the CSS clip property. For each of these boxes, the "final" clip rectangle is calculated by intersecting clip rectangles in the containing block chain for a box. 2. The paintable tree is traversed another time, and a clip rectangle is assigned for each paintable box contained by a node with hidden overflow or the clip property. This way, clipping becomes much easier during the painting commands recording phase, as it only concerns the use of already assigned clip rectangles. The same approach is applied to handle scrolling offsets. Also, clip rectangle calculation is now implemented more correctly, as we no longer stop at the stacking context boundary while intersecting clip rectangles in the containing block chain. Fixes: https://github.com/SerenityOS/serenity/issues/22932 https://github.com/SerenityOS/serenity/issues/22883 https://github.com/SerenityOS/serenity/issues/22679 https://github.com/SerenityOS/serenity/issues/22534
31 lines
626 B
HTML
31 lines
626 B
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<link rel="match" href="reference/overflow-hidden-5-ref.html" />
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.wrapper {
|
|
margin-top: 100px;
|
|
margin-left: 100px;
|
|
width: 900px;
|
|
border: 5px solid magenta;
|
|
}
|
|
|
|
.container {
|
|
overflow: hidden;
|
|
display: block;
|
|
height: 400px;
|
|
}
|
|
|
|
.box {
|
|
background-color: darkblue;
|
|
width: 256px;
|
|
height: 256px;
|
|
transform: translate3d(-50px, -50px, 0px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<div class="wrapper"><div class="container"><div class="box"></div></div></div>
|