RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 17:17:45 +00:00
Code Issues Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

19
Tests/LibWeb/Ref/abspos-z-index-painting-order.html Normal file
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>

18
Tests/LibWeb/Ref/reference/abspos-z-index-painting-order-ref.html Normal file
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>