commit 0e8888cdbb97763730c35aa48b46dc9b2e163514
parent cf03438176fb29d12403147de7676a951a8fe4da
Author: Anders Hartvoll Ruud <andruud@chromium.org>
Date: Mon, 27 Oct 2025 10:07:39 +0000
Bug 1996258 [wpt PR 55638] - [@mixin] Add WPT for @mixin within @layer, a=testonly
Automatic update from web-platform-tests
[@mixin] Add WPT for @mixin within @layer
Note that while @mixin is valid within @layer, @layer is not valid
within @mixin [1]. @layer-in-@mixin is covered by another WPT
(mixin-parsing.html).
I'm deliberately not testing edge-cases related to order-dependent
mixins, since it's not clear yet how committed we are to this approach.
Bug: 406935599
[1] https://github.com/w3c/csswg-drafts/issues/12417
Change-Id: Ib1701cb6d77a1f5d4f8f5037b3b4ded652849a19
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7080105
Reviewed-by: Steinar H Gunderson <sesse@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1534922}
--
wpt-commits: 6d3dfbb94eab624408566d6884fa404db3d22ef3
wpt-pr: 55638
Diffstat:
1 file changed, 105 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-mixins/mixin-layers.html b/testing/web-platform/tests/css/css-mixins/mixin-layers.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Mixins: @layer</title>
+ <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#mixin-preamble">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+
+ <!-- Note that the layer order is fixed across all sub-tests: -->
+ <style>
+ @layer one, two;
+ </style>
+
+
+ <style>
+ @layer one {
+ @mixin --m1() {
+ color: green;
+ }
+ }
+
+ #e1 {
+ @apply --m1();
+ }
+ </style>
+ <div id="e1">This text should be green.</div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e1).color, 'rgb(0, 128, 0)');
+ }, 'Mixins work inside layers');
+ </script>
+
+
+ <style>
+ @layer {
+ @mixin --m2() {
+ color: green;
+ }
+ }
+
+ #e2 {
+ @apply --m2();
+ }
+ </style>
+ <div id="e2">This text should be green.</div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e2).color, 'rgb(0, 128, 0)');
+ }, 'Mixins work inside layers (anonymous)');
+ </script>
+
+
+ <style>
+ @layer two {
+ @mixin --m3() {
+ color: green;
+ }
+ }
+
+ @layer one {
+ @mixin --m3() {
+ color: red;
+ }
+ }
+
+ #e3 {
+ @apply --m3();
+ }
+ </style>
+ <div id="e3">This text should be green.</div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e3).color, 'rgb(0, 128, 0)');
+ }, 'Mixins in stronger layer wins');
+ </script>
+
+
+ <style>
+ @layer one {
+ @mixin --m4() {
+ color: red;
+ }
+ }
+
+ @layer two {
+ @mixin --m4() {
+ color: green;
+ }
+ }
+
+ #e4 {
+ @apply --m4();
+ }
+ </style>
+ <div id="e4">This text should be green.</div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e4).color, 'rgb(0, 128, 0)');
+ }, 'Mixins in stronger layer wins (source order matching layer order)');
+ </script>
+
+ </body>
+</html>
