Files
ladybird/Tests/LibWeb/Text/input/display_list/abspos-inside-opacity-inside-relpos.html
Aliaksandr Kalenik da2c07c66d LibWeb: Apply intermediate stacking context effects to abspos elements
Previously, absolutely positioned elements jumped directly to their
containing block's accumulated visual context, skipping effects
(opacity, mix-blend-mode, isolation) from intermediate ancestors. Per
CSS spec, these properties create stacking contexts that abspos elements
cannot escape — they only escape scroll containers and overflow clips.
2026-02-04 20:54:47 +01:00

32 lines
576 B
HTML

<!DOCTYPE html>
<script src="../include.js"></script>
<style>
.relpos {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.opacity {
opacity: 0.5;
}
.abspos {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: black;
}
</style>
<div class="relpos">
<div class="opacity">
<div class="abspos"></div>
</div>
</div>
<script>
test(() => {
println(internals.dumpDisplayList());
});
</script>