Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 05:30:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

Improve logic for establishing a stacking context (#35947)

Browse source 
In particular:
 - `z-index` will now work on unpositioned grid items.
 - `will-change: z-index` will only establish a stacking context if
   `z-index` applies, i.e. if the box is positioned or a flex/grid item.
 - The conditions in `establishes_stacking_context()` are reordered,
   so that the most likely ones are checked first.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-03-13 07:49:08 +01:00 • committed by GitHub
parent 205b97d5ed
commit f93006af95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 233 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

39
tests/wpt/meta/MANIFEST.json vendored
View file

@ -307667,6 +307667,45 @@
{}
]
],
"will-change-stacking-context-z-index-2.html": [
"9379185048a78b031e8ac290bd7bb3e5df24fa5f",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"will-change-stacking-context-z-index-3.html": [
"4ec40ae1a430a095ea6f703c8c27698e04792220",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"will-change-stacking-context-z-index-4.html": [
"d8a87b23415c3c10a6f4875f16cd63301e789152",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"will-change-transform-add-content.html": [
"1d8568ee629e48adfe99abab2e2194a73ae1301a",
[

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-001.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-005.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-overlapped-items-001.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-overlapped-items-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-overlapped-items-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-overlapped-items-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-overlapped-items-005.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-inline-z-axis-ordering-overlapped-items-006.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-layout-z-order-a.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-layout-z-order-a.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-layout-z-order-b.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-layout-z-order-b.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-001.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-001.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-002.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-004.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-005.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-005.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-overlapped-items-001.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-overlapped-items-002.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-overlapped-items-003.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-overlapped-items-004.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-overlapped-items-005.html]
expected: FAIL

2
tests/wpt/meta/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html.ini vendored
View file

@ -1,2 +0,0 @@
[grid-z-axis-ordering-overlapped-items-006.html]
expected: FAIL

2
tests/wpt/meta/css/css-will-change/will-change-stacking-context-z-index-3.html.ini vendored Normal file
View file

@ -0,0 +1,2 @@
[will-change-stacking-context-z-index-3.html]
prefs: ["layout_grid_enabled:true"]

29
tests/wpt/tests/css/css-will-change/will-change-stacking-context-z-index-2.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>CSS Test: `will-change: z-index`</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#painting">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11827">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
`will-change: z-index` establishes a stacking context on a flex item.
">
<style>
.test {
will-change: z-index;
width: 100px;
background: red;
}
.test::before {
content: "";
display: block;
position: relative;
z-index: -1;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex">
<div class="test"></div>
</div>

29
tests/wpt/tests/css/css-will-change/will-change-stacking-context-z-index-3.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>CSS Test: `will-change: z-index`</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident">
<link rel="help" href="https://www.w3.org/TR/css-grid-2/#z-order">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11827">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
`will-change: z-index` establishes a stacking context on a grid item.
">
<style>
.test {
will-change: z-index;
width: 100px;
background: red;
}
.test::before {
content: "";
display: block;
position: relative;
z-index: -1;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: grid">
<div class="test"></div>
</div>

28
tests/wpt/tests/css/css-will-change/will-change-stacking-context-z-index-4.html vendored Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<title>CSS Test: `will-change: z-index`</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident">
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11827">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
`will-change: z-index` doesn't establish a stacking context on a non-positioned block box,
because `z-index` doesn't apply in that case.
">
<style>
.test {
will-change: z-index;
width: 100px;
background: green;
}
.test::before {
content: "";
display: block;
position: relative;
z-index: -1;
height: 100px;
background: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="test"></div>