commit 6f56baae3316f764da14cd3ce3eac47bb928ddf9
parent 91769f89bfbcc8381f0ac3de13337184017b1a7c
Author: Anders Hartvoll Ruud <andruud@chromium.org>
Date: Mon, 27 Oct 2025 10:01:24 +0000
Bug 1995732 [wpt PR 55589] - [@mixin] Add WPTs for "nested declarations rule" behavior, a=testonly
Automatic update from web-platform-tests
[@mixin] Add WPTs for "nested declarations rule" behavior
Bug: 406935599
Change-Id: Ia116c6294344741e99c3383d4aa192ed2947c398
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7070124
Reviewed-by: Steinar H Gunderson <sesse@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1533505}
--
wpt-commits: 4718e4b4276c0e271cf18bcd367fa26e11bda5dd
wpt-pr: 55589
Diffstat:
2 files changed, 102 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-mixins/apply-nested-declarations.html b/testing/web-platform/tests/css/css-mixins/apply-nested-declarations.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Mixins: @apply rules become nested declarations</title>
+ <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#using-mixins">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+
+ <style>
+ @mixin --m1() {
+ color: green;
+ }
+ #e1::after {
+ content: "AFTER";
+ @apply --m1;
+ }
+ </style>
+ <div id="e1"></div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e1, '::after').color, 'rgb(0, 128, 0)');
+ }, 'Can mix declarations into pseudo-elements');
+ </script>
+
+
+ <style>
+ @mixin --m2() {
+ color: red;
+ }
+ /* Should match <div id=e2> with the specificity of :where(#e2) (zero),
+ not with the specificity of :is(:where(#e2), #u1). */
+ :where(#e2), #u1 {
+ @apply --m2;
+ }
+ :where(#e2) {
+ color: green; /* Wins. */
+ }
+ </style>
+ <div id="e2"></div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e2).color, 'rgb(0, 128, 0)');
+ }, 'Nested declarations have top-level specificity behavior');
+ </script>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-mixins/contents-nested-declarations.html b/testing/web-platform/tests/css/css-mixins/contents-nested-declarations.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Mixins: @contents rules become nested declarations</title>
+ <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#contents-rule">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+
+ <style>
+ @mixin --m1(@contents) {
+ @contents;
+ }
+ #e1::after {
+ content: "AFTER";
+ @apply --m1 {
+ color: green;
+ }
+ }
+ </style>
+ <div id="e1"></div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e1, '::after').color, 'rgb(0, 128, 0)');
+ }, 'Can mix declarations into pseudo-elements via @contents');
+ </script>
+
+
+ <style>
+ @mixin --m2(@contents) {
+ @contents;
+ }
+ /* Should match <div id=e2> with the specificity of :where(#e2) (zero),
+ not with the specificity of :is(:where(#e2), #u1). */
+ :where(#e2), #u1 {
+ @apply --m2 {
+ color: red;
+ }
+ }
+ :where(#e2) {
+ color: green; /* Wins. */
+ }
+ </style>
+ <div id="e2"></div>
+ <script>
+ test(() => {
+ assert_equals(getComputedStyle(e2).color, 'rgb(0, 128, 0)');
+ }, 'Nested declarations from @contents have top-level specificity behavior');
+ </script>
+
+ </body>
+</html>
