[@scope] Support @scope(:host)

In CalculateActivations, we'd previously just call Element.parentElement up the ancestor chain, therefore never reach the host. Additionally, we did not propagate the original SelectorCheckerContext.scope which is needed for :host to match. This CL uses ParentOrShadowHostElement, and adds the concept of "activation ceiling" to deal with the fact that we need to look at one element *above* the current activation root when that root is a ShadowRoot. Note that :scope is supposed to be able to match "virtual" roots [1] (like a ShadowRoot), but Blink does not support this in general. This CL does not address this issue. [1] w3c/csswg-drafts#7261 Bug: 1280240 Change-Id: I2d0be103f4cd02ec576711b959e075a5118e694a
web-platform-tests · Feb 21, 2023 · 44eadaf · 44eadaf
1 parent 2bb6046
commit 44eadaf
Showing 1 changed file with 110 additions and 0 deletions.
diff --git a/css/css-cascade/scope-shadow.html b/css/css-cascade/scope-shadow.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<title>@scope - ShadowDOM</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>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
+<style>
+  #outer {
+    container-type: size;
+    width: 200px;
+    height: 200px;
+  }
+  #direct {
+    container-type: inline-size;
+    width: 50cqw;
+    height: 50cqh;
+  }
+  #nondirect {
+    width: 10cqw;
+    height: 10cqh;
+    background: green;
+  }
+</style>
+<div id=host_plain>
+  <template shadowroot=open>
+    <style>
+      @scope (:host) {
+        .a {
+          z-index: 1;
+        }
+      }
+    </style>
+    <div class=a>
+    </div>
+  </template>
+</div>
+<script>
+  setup(() => {
+    polyfill_declarative_shadow_dom(document);
+  });
+
+  test(() => {
+    let a = host_plain.shadowRoot.querySelector('.a');
+    assert_equals(getComputedStyle(a).zIndex, '1');
+  }, '@scope can match :host');
+</script>
+
+<div id=host_functional>
+  <template shadowroot=open>
+    <style>
+      @scope (:host(div)) {
+        .a {
+          z-index: 1;
+        }
+      }
+      /* Should not match: */
+      @scope (:host(span)) {
+        .a {
+          z-index: 42;
+        }
+      }
+    </style>
+    <div class=a>
+    </div>
+  </template>
+</div>
+<script>
+  setup(() => {
+    polyfill_declarative_shadow_dom(document);
+  });
+
+  test(() => {
+    let a = host_functional.shadowRoot.querySelector('.a');
+    assert_equals(getComputedStyle(a).zIndex, '1');
+  }, '@scope can match :host(...)');
+</script>
+
+<div id=host_scope>
+  <template shadowroot=open>
+    <style>
+      :host {
+        z-index: 1;
+      }
+      @scope (:host) {
+        /*
+           The :scope pseudo should not match: Only :host can match the host
+           within the shadow tree.
+
+           https://drafts.csswg.org/css-scoping-1/#host-element-in-tree
+        */
+        :scope, .a {
+          z-index: 42;
+        }
+      }
+    </style>
+    <div class=a>
+    </div>
+  </template>
+</div>
+<script>
+  setup(() => {
+    polyfill_declarative_shadow_dom(document);
+  });
+
+  test(() => {
+    assert_equals(getComputedStyle(host_scope).zIndex, '1');
+    let a = host_scope.shadowRoot.querySelector('.a');
+    assert_equals(getComputedStyle(a).zIndex, '42');
+  }, 'Selecting :host with :scope');
+</script>