mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 17:17:45 +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:
parent
aa769d95df
commit
49fcc5dcd8
3 changed files with 55 additions and 25 deletions
19
Tests/LibWeb/Ref/abspos-z-index-painting-order.html
Normal file
19
Tests/LibWeb/Ref/abspos-z-index-painting-order.html
Normal 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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue