diff --git a/css/css-cascade/resources/scope.css b/css/css-cascade/resources/scope.css
new file mode 100644
index 00000000000000..780e90fb67b996
--- /dev/null
+++ b/css/css-cascade/resources/scope.css
@@ -0,0 +1,4 @@
+@scope {
+  :scope { z-index:1; }
+  .a { z-index:2; }
+}
diff --git a/css/css-cascade/scope-implicit-external.html b/css/css-cascade/scope-implicit-external.html
new file mode 100644
index 00000000000000..d1ac738b778da3
--- /dev/null
+++ b/css/css-cascade/scope-implicit-external.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>@scope - implicit scope root (external sheet)</title>
+    <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <div class="a outside"><div>
+    <div id=root>
+      <link rel="stylesheet" href="resources/scope.css">
+      <div class=a></div>
+    </div>
+    <div class="a outside"><div>
+
+    <script>
+      test((t) => {
+        assert_equals(getComputedStyle(root).zIndex, '1');
+        assert_equals(getComputedStyle(document.querySelector('#root > .a')).zIndex, '2');
+
+        let outside = document.querySelectorAll('.outside');
+        assert_equals(outside.length, 2);
+        for (let div of outside) {
+          assert_equals(getComputedStyle(div).zIndex, 'auto');
+        }
+      }, '@scope with external stylesheet');
+    </script>
+  </body>
+</html>
diff --git a/css/css-cascade/scope-implicit.html b/css/css-cascade/scope-implicit.html
new file mode 100644
index 00000000000000..805a91eba36754
--- /dev/null
+++ b/css/css-cascade/scope-implicit.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<title>@scope - implicit scope root</title>
+<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<main id=main></main>
+
+<template id=test_basic>
+  <div>
+    <style>
+      @scope {
+        .a { z-index:1; }
+      }
+    </style>
+    <div id=inner class=a></div>
+  </div>
+  <div id=outer class=a></div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_basic.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(inner).zIndex, '1');
+  assert_equals(getComputedStyle(outer).zIndex, 'auto');
+}, '@scope without prelude implicitly scopes to parent of owner node');
+</script>
+
+<template id=test_scope_pseudo>
+  <div>
+    <div></div>
+  </div>
+  <div>
+    <div id=root>
+      <style>
+        @scope {
+          :scope { z-index:1; }
+        }
+      </style>
+      <div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div></div>
+  </div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_scope_pseudo.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(root).zIndex, '1');
+
+  // Only #root should be affected.
+  for (let div of main.querySelectorAll('div:not(#root)')) {
+    assert_equals(getComputedStyle(div).zIndex, 'auto');
+  }
+}, ':scope can style implicit root');
+</script>
+
+<template id=test_duplicate>
+  <div>
+    <style>
+      @scope {
+        .a { z-index:1; }
+      }
+    </style>
+    <div id=first class=a></div>
+  </div>
+  <div>
+    <style>
+      @scope {
+        .a { z-index:1; }
+      }
+    </style>
+    <div id=second class=a></div>
+  </div>
+  <div id=outer class=a></div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_duplicate.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(first).zIndex, '1');
+  assert_equals(getComputedStyle(second).zIndex, '1');
+  assert_equals(getComputedStyle(outer).zIndex, 'auto');
+}, '@scope works with two identical stylesheets');
+</script>
