commit fdf69353da66ac077e5d29f6cc92a6f2469a3343 parent 798e02e901e02bb6f70957517ebb30b1eeeff79b Author: Psychpsyo (Cameron) <60073468+Psychpsyo@users.noreply.github.com> Date: Wed, 12 Nov 2025 08:51:34 +0000 Bug 1999476 [wpt PR 55975] - Add test for transform-style creating a stacking context, a=testonly Automatic update from web-platform-tests Add test for transform-style creating a stacking context (#55975) -- wpt-commits: 1c27fe9f5462e2d4a69652ca412f33701941d0c6 wpt-pr: 55975 Diffstat:
| A | testing/web-platform/tests/css/css-transforms/transform-style-stacking-context.html | | | 30 | ++++++++++++++++++++++++++++++ |
1 file changed, 30 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-transforms/transform-style-stacking-context.html b/testing/web-platform/tests/css/css-transforms/transform-style-stacking-context.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<title>'transform-style: preserve-3d' establishes a stacking context.</title> +<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> +<link rel="match" href="transform-lime-square-ref.html"> +<style> + div { + width: 100px; + height: 100px; + } + #front { + background-color: lime; + /* makes a stacking context and puts this on top */ + position: absolute; + z-index: 10; + } + #back { + transform-style: preserve-3d; + } + #notOnTop { + background-color: red; + /* z-index is higher than on #front, but this should still be covered up because it is inside #back, which has 'transform-style: preserve-3d' */ + position: absolute; + z-index: 1000; + } +</style> +<div id="front"></div> +<div id="back"> + <div id="notOnTop"></div> +</div>