From d17651485ade649a77305beaeb00942b710b6f88 Mon Sep 17 00:00:00 2001
From: "Steinar H. Gunderson" <sesse@chromium.org>
Date: Tue, 5 Aug 2025 10:16:23 -0700
Subject: [PATCH] Reapply "Support @contents in mixins."

This reverts commit 043e18fb9af4b93e26460f809d27970ddfba5d76.

Original change's description:
> Support @contents in mixins.
>
> Change-Id: I7570ba2a653949ef05ce50fe6aa91a78c3fa6135
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6703359
> Commit-Queue: Steinar H Gunderson <sesse@chromium.org>
> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
> Cr-Commit-Position: refs/heads/main@{#1482586}

Change-Id: I9d288901c7980b6dcb710bd9c27405de37adf656
---
 css/css-mixins/contents-rule.html | 87 +++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 css/css-mixins/contents-rule.html
diff --git a/css/css-mixins/contents-rule.html b/css/css-mixins/contents-rule.html
new file mode 100644
index 00000000000000..abd380e14e49fc
--- /dev/null
+++ b/css/css-mixins/contents-rule.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Mixins: Mixins depending on other mixins</title>
+    <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#apply-rule">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      @mixin --m1(@contents) {
+        @contents;
+      }
+      #e1 {
+        color: red;
+        @apply --m1 { color: green; }
+      }
+
+      @mixin --m2(@contents) {
+        @contents
+      }
+      #e2 {
+        color: red;
+        @apply --m1 { color: green; }
+      }
+
+      @mixin --m3(@contents) {
+        &.a {
+          @contents { color: blue; }
+        }
+      }
+      .b {
+        color: red;
+        @apply --m3 { color: green; }
+      }
+
+      @mixin --m4(@contents) {
+        &.c {
+          @contents { color: green; }
+        }
+      }
+      .d {
+        color: red;
+        @apply --m4;
+      }
+
+      @mixin --m5 {
+        @contents { color: red !important; }
+        color: green;
+      }
+      #e4 {
+        @apply --m5 { color: red !important; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="e1">This text should be green.</div>
+    <div id="e2">This text should be green.</div>
+    <div class="a b" id="e3">This text should be green.</div>
+    <div class="c d" id="e4">This text should be green.</div>
+    <div id="e5">This text should be green.</div>
+  <script>
+    test(() => {
+      let target = document.getElementById('e1');
+      assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+    }, 'Simple @contents with no fallback');
+
+    test(() => {
+      let target = document.getElementById('e2');
+      assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+    }, 'Implicit semicolon after @contents, at end of block');
+
+    test(() => {
+      let target = document.getElementById('e3');
+      assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+    }, 'Block in @apply overrides fallback');
+
+    test(() => {
+      let target = document.getElementById('e4');
+      assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+    }, 'Fallback is used if @apply has no block');
+
+    test(() => {
+      let target = document.getElementById('e5');
+      assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+    }, '@contents is ignored if there is no @contents parameter');
+  </script>
+  </body>
+</html>
