1 files changed, 173 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/scope-implicit.html b/testing/web-platform/tests/css/css-cascade/scope-implicit.html
new file mode 100644
index 0000000000..c49abb0a38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-cascade/scope-implicit.html
@@ -0,0 +1,173 @@
+<!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>
+
+
+<template id=test_forgiving>
+  <div>
+    <style>
+      @scope ($invalid) {
+        #a { z-index:1; }
+      }
+    </style>
+    <div id=a></div>
+  </div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_forgiving.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(a).zIndex, 'auto');
+}, '@scope with effectively empty :is() must not match anything');
+</script>
+
+<template id=test_implicit_descendant>
+  <div id=div>
+    <style>
+      @scope {
+        #div { z-index:1; }
+      }
+    </style>
+  </div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_implicit_descendant.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(div).zIndex, 'auto');
+}, 'Implicit @scope has implicitly added :scope descendant combinator');
+</script>
+
+<template id=test_implicit_relative>
+  <div id=outer>
+    <style>
+      @scope {
+        > div { z-index:1; }
+      }
+    </style>
+    <div id=child>
+      <div id=inner></div>
+    </div>
+  </div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_implicit_relative.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(outer).zIndex, 'auto');
+  assert_equals(getComputedStyle(child).zIndex, '1');
+  assert_equals(getComputedStyle(inner).zIndex, 'auto');
+}, 'Implicit @scope with inner relative selector');
+</script>
+
+<template id=test_implicit_descendant_nesting_selector>
+  <div id=div>
+    <style>
+      @scope {
+        /* Behaves like :scope */
+        & { z-index:1; }
+      }
+    </style>
+    <div id=inner></div>
+  </div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_implicit_descendant_nesting_selector.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(div).zIndex, '1');
+  assert_equals(getComputedStyle(inner).zIndex, 'auto');
+}, 'Implicit @scope with inner nesting selector');
+</script>