Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00: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

14
components/layout/style_ext.rs
View file

@ -712,15 +712,19 @@ impl ComputedValuesExt for ComputedValues {
// From <https://www.w3.org/TR/css-transforms-1/#transform-rendering> // From <https://www.w3.org/TR/css-transforms-1/#transform-rendering>
// > For elements whose layout is governed by the CSS box model, any value other than // > For elements whose layout is governed by the CSS box model, any value other than
// > `none` for the `transform` property results in the creation of a stacking context. // > `none` for the `transform` property results in the creation of a stacking context.
//
// From <https://www.w3.org/TR/css-transforms-2/#individual-transforms>
// > all other values […] create a stacking context and containing block for all
// > descendants, per usual for transforms.
//
// From <https://www.w3.org/TR/css-transforms-2/#perspective-property>
// > any value other than none establishes a stacking context.
//
// From <https://www.w3.org/TR/css-transforms-2/#transform-style-property> // From <https://www.w3.org/TR/css-transforms-2/#transform-style-property>
// > A computed value of `preserve-3d` for `transform-style` on a transformable element // > A computed value of `preserve-3d` for `transform-style` on a transformable element
// > establishes both a stacking context and a containing block for all descendants. // > establishes both a stacking context and a containing block for all descendants.
// From <https://www.w3.org/TR/css-transforms-2/#perspective-property>
// > any value other than none establishes a stacking context.
// TODO: handle individual transform properties (`translate`, `scale` and `rotate`).
// <https://www.w3.org/TR/css-transforms-2/#individual-transforms>
if self.is_transformable(fragment_flags) && if self.is_transformable(fragment_flags) &&
(!self.get_box().transform.0.is_empty() || (self.has_transform_or_perspective_style() ||
self.get_box().transform_style == ComputedTransformStyle::Preserve3d || self.get_box().transform_style == ComputedTransformStyle::Preserve3d ||
will_change_bits will_change_bits
.intersects(WillChangeBits::TRANSFORM | WillChangeBits::PERSPECTIVE)) .intersects(WillChangeBits::TRANSFORM | WillChangeBits::PERSPECTIVE))

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": [ "translate-fill-box.html": [
"8892d63327964cf1e9c16a3febaecf5af4d1cceb", "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>