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>
