diff --git a/components/layout/style_ext.rs b/components/layout/style_ext.rs index 023db6b07f1..68a4481a2be 100644 --- a/components/layout/style_ext.rs +++ b/components/layout/style_ext.rs @@ -712,15 +712,19 @@ impl ComputedValuesExt for ComputedValues { // From // > 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. + // + // From + // > all other values […] create a stacking context and containing block for all + // > descendants, per usual for transforms. + // + // From + // > any value other than none establishes a stacking context. + // // From // > 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. - // From - // > any value other than none establishes a stacking context. - // TODO: handle individual transform properties (`translate`, `scale` and `rotate`). - // 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 || will_change_bits .intersects(WillChangeBits::TRANSFORM | WillChangeBits::PERSPECTIVE)) diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index 5385c0403b4..2d18197596c 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -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", [ diff --git a/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-002.html b/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-002.html new file mode 100644 index 00000000000..ff1d06dcc11 --- /dev/null +++ b/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-002.html @@ -0,0 +1,29 @@ + +CSS Test: Individual transform properties create stacking context + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
diff --git a/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-003.html b/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-003.html new file mode 100644 index 00000000000..6852722ed79 --- /dev/null +++ b/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-003.html @@ -0,0 +1,29 @@ + +CSS Test: Individual transform properties create stacking context + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
diff --git a/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-004.html b/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-004.html new file mode 100644 index 00000000000..6d7ec896736 --- /dev/null +++ b/tests/wpt/tests/css/css-transforms/individual-transform/stacking-context-004.html @@ -0,0 +1,29 @@ + +CSS Test: Individual transform properties create stacking context + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+