1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 15:27:34 +00:00

LibWeb: Do not require box to be positioned to create stacking context

Instead of implementing stacking context painting order exactly as it
is defined in CSS2.2 "Appendix E. Elaborate description of Stacking
Contexts" we need to account for changes in the latest standards where
a box can establish a stacking context without being positioned, for
example, by having an opacity different from 1.

Fixes https://github.com/SerenityOS/serenity/issues/21137
This commit is contained in:
Aliaksandr Kalenik 2024-01-02 20:05:35 +01:00 committed by Alexander Kalenik
parent aa769d95df
commit 49fcc5dcd8
3 changed files with 55 additions and 25 deletions

View file

@ -0,0 +1,19 @@
<!doctype html><link rel="match" href="reference/abspos-z-index-painting-order-ref.html" /><style>
* {
font-size: 60px;
}
body {
/* NOTE: This is flex in order to force div.text to create a stacking context. */
display: flex;
}
.abspos {
position: absolute;
width: 100px;
height: 100px;
background: gray;
z-index: 0;
}
.text {
z-index: 1;
}
</style><body><div class="abspos"></div><div class="text">hello friends</div>

View file

@ -0,0 +1,18 @@
<!doctype html><html lang="en"><style>
* {
font-size: 60px;
}
body {
display: grid;
grid-template-areas: "content";
}
.abspos {
grid-area: content;
background: gray;
width: 100px;
height: 100px;
}
.text {
grid-area: content;
}
</style><body><div class="abspos"></div><div class="text">hello friends</div></body>