layout: Make transform-style: preserve-3d establish a containing block for all descendants (#35808)

* layout: Fix behavior of `transform-style: preserve-3d`

This makes `transform-style: preserve-3d` establish a containing block
for all descendants, as specified here:
<https://drafts.csswg.org/css-transforms-2/#transform-style-property>

Signed-off-by: Daniel Hast <hast.daniel@protonmail.com>

* layout: Check for transformable elements

Adds a new `is_transformable` helper method and use this in several other
methods, including the methods for whether the fragment establishes a
new stacking context or a containing block for all descendants.

Signed-off-by: Daniel Hast <hast.daniel@protonmail.com>

* Use generic green square reference for reftest.

Signed-off-by: Daniel Hast <hast.daniel@protonmail.com>

* layout: Fix stacking context & containing block checks.

Only the computed value of `transform-style` should be used to determine
whether the element establishes a stacking context and/or a containing
block, not the used value.

Signed-off-by: Daniel Hast <hast.daniel@protonmail.com>

* Update clip-no-stacking-context test expectation to pass.

Signed-off-by: Daniel Hast <hast.daniel@protonmail.com>

---------

Signed-off-by: Daniel Hast <hast.daniel@protonmail.com>
This commit is contained in:
Daniel Hast 2025-03-07 12:39:59 -05:00 committed by GitHub
parent 991635eefb
commit 34b000c86e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 50 additions and 14 deletions

View file

@ -276759,6 +276759,19 @@
{}
]
],
"preserve3d-containing-block.html": [
"fc74e3874c67a2965b549036dd6699d593eeb3ef",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"preserve3d-nested-perspective.html": [
"368784c74f51c774cf8ea1b6f55127e72fd5854e",
[

View file

@ -1,2 +0,0 @@
[clip-no-stacking-context.html]
expected: FAIL

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS test: "transform-style: preserve-3d" should establish a containing block for all descendants</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The box should be green (not red) because the div establishes a containing block for all descendants.">
<style>
body { transform: scale(1); height: 0 }
div { background: red; width: 100px; height: 100px; }
div::before { content: ""; position: fixed; width: 100%; height: 100%; background: green; }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="transform-style: preserve-3d"></div>