[@scope] Support implicit scoping roots

This CL makes it possible to specify a @scope rule without any prelude, scoping the rules implicitly to the parent of the owner node. This is implemented by storing a StyleSheetContents in each StyleScope, and treating each owner-parent-node of the StyleSheetContents as a scoping root. The following likely doesn't work, and is postponed for future CLs: - Constructed stylesheets - An owner node whose parent node is a ShadowRoot w3c/csswg-drafts#7349 Bug: 1379844 Change-Id: Icbfae88636662e9a16dd11f9c7a371c997447f60 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4161741 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1093015}
web-platform-tests · Jan 16, 2023 · 5500fdc · 5500fdc
1 parent 7bd7915
commit 5500fdc
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/css/css-cascade/resources/scope.css 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
@@ -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
@@ -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>