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

layout: Non-auto z-index should always make stacking contexts for flex items (#32961)

Browse source 
Fixes #32756.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Martin Robinson 2024-08-12 14:15:20 +02:00 • committed by GitHub
parent d29e937f7e
commit 564ba5969f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 87 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -167777,6 +167777,19 @@
{}
]
],
"flex-item-z-ordering-002.html": [
"349c508e7c544ed31dc73f81e11e9058cf8febdb",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"flex-lines": {
"multi-line-wrap-reverse-column-reverse.html": [
"48c18fc5362af607854e03fc79fab9abc408fe36",

2
tests/wpt/meta/css/css-flexbox/flex-item-z-ordering-001.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-flexbox/flexbox-items-as-stacking-contexts-001.xhtml.ini vendored
View file

@ -1,2 +0,0 @@
[flexbox-items-as-stacking-contexts-001.xhtml]
expected: FAIL

2
tests/wpt/meta/css/css-flexbox/flexbox-paint-ordering-002.xhtml.ini vendored
View file

@ -1,2 +0,0 @@
[flexbox-paint-ordering-002.xhtml]
expected: FAIL

32
tests/wpt/tests/css/css-flexbox/flex-item-z-ordering-002.html vendored Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Flex painting order with z-index</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#painting">
<meta name="assert"
content="z-index works on flex items even though they do not have `position: relative`" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
#flex {
display: flex;
width: 100px;
height: 100px;
}
#flex > div {
width: 0px;
height: 0px;
}
#flex > div > div {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
</p>
<div id="flex">
<div><div style="background: green"></div></div>
<div style="z-index: -10"><div style="background: red;"></div></div>
</div>