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

layout: Let individual transform properties establish a stacking context (#36749)

Browse source 
Non-initial values for the `scale`, `rotate` and `translate` properties
should establish a stacking context, just like `transform`.

Testing: adding new WPT tests.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-05-02 04:30:32 -07:00 • committed by GitHub
parent 46f59e329c
commit 00b40bbdaf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 135 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -278370,6 +278370,45 @@
{}
]
],
"stacking-context-002.html": [
"ff1d06dcc11ff445abc8ecaebe305836aa6ab14f",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"stacking-context-003.html": [
"6852722ed79183119f2a3fb142077b9e7c638e91",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"stacking-context-004.html": [
"6d7ec896736db0dc813a6e80ac4c75b7066e12e0",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"translate-fill-box.html": [
"8892d63327964cf1e9c16a3febaecf5af4d1cceb",
[

29
tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-002.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>CSS Test: Individual transform properties create stacking context</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
Setting `rotate` to a value different than `none` establishes a stacking context.
">
<style>
.transform {
width: 100px;
height: 100px;
background: red;
rotate: 0deg;
}
.child {
width: 100px;
height: 100px;
background: green;
position: relative;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="transform">
<div class="child"></div>
</div>

29
tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-003.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>CSS Test: Individual transform properties create stacking context</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
Setting `scale` to a value different than `none` establishes a stacking context.
">
<style>
.transform {
width: 100px;
height: 100px;
background: red;
scale: 1;
}
.child {
width: 100px;
height: 100px;
background: green;
position: relative;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="transform">
<div class="child"></div>
</div>

29
tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-004.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>CSS Test: Individual transform properties create stacking context</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
Setting `translate` to a value different than `none` establishes a stacking context.
">
<style>
.transform {
width: 100px;
height: 100px;
background: red;
translate: 0px;
}
.child {
width: 100px;
height: 100px;
background: green;
position: relative;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="transform">
<div class="child"></div>
</div>