Make :is(:host) work.

This should work per spec, see w3c/csswg-drafts#9509. Tweak a bit the selector flags set up so that checking for :host selectors during CascadeData rebuilds is cheap. Differential Revision: https://phabricator.services.mozilla.com/D191570 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1850974 gecko-commit: 8b16994e8df5ba96e720e00a4f0289fdb3a83708 gecko-reviewers: zrhoffman
web-platform-tests · Nov 2, 2023 · 8c1c9d5 · 8c1c9d5
1 parent 910f2ed
commit 8c1c9d5
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 0 deletions.
diff --git a/css/css-nesting/host-nesting-001.html b/css/css-nesting/host-nesting-001.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (basic) </title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host {
+        .nested {
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      }
+    </style>
+    <div class="nested"></div>
+  `;
+</script>
diff --git a/css/css-nesting/host-nesting-002.html b/css/css-nesting/host-nesting-002.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (bare declarations)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host {
+        @media (width >= 0) {
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      }
+    </style>
+  `;
+</script>
diff --git a/css/css-nesting/host-nesting-003.html b/css/css-nesting/host-nesting-003.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (combined with something else)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      .nested {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+      :host(#not-host), #host {
+        .nested {
+          background-color: red;
+        }
+      }
+    </style>
+    <div class="nested"></div>
+  `;
+</script>
diff --git a/css/css-nesting/host-nesting-004.html b/css/css-nesting/host-nesting-004.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (combined with something else, bare declarations)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+      :host(#not-host), #host {
+        @media (width >= 0) {
+          background-color: red;
+        }
+      }
+    </style>
+  `;
+</script>
diff --git a/css/css-nesting/host-nesting-005.html b/css/css-nesting/host-nesting-005.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and nesting (with pseudos)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host {
+        &::before {
+          display: block;
+          content: "";
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      }
+    </style>
+  `;
+</script>
diff --git a/css/css-scoping/host-is-001.html b/css/css-scoping/host-is-001.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and :is (basic) </title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/selectors/#featureless">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :is(:host) .nested {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+    </style>
+    <div class="nested"></div>
+  `;
+</script>
diff --git a/css/css-scoping/host-is-002.html b/css/css-scoping/host-is-002.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and :is (basic)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/selectors/#featureless">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :is(:host) {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+    </style>
+  `;
+</script>
diff --git a/css/css-scoping/host-is-003.html b/css/css-scoping/host-is-003.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and :is() (combined with something else)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/selectors/#featureless">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      .nested {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+      :is(:host(#not-host), #host) .nested {
+        background-color: red;
+      }
+    </style>
+    <div class="nested"></div>
+  `;
+</script>
diff --git a/css/css-scoping/host-is-004.html b/css/css-scoping/host-is-004.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and :is (combined with something else)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/selectors/#featureless">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+      :is(:host(#not-host), #host) {
+        background-color: red;
+      }
+    </style>
+  `;
+</script>
diff --git a/css/css-scoping/host-is-005.html b/css/css-scoping/host-is-005.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host and :is() (with pseudos)</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/selectors/#featureless">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="host"></div>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :is(:host)::before {
+        display: block;
+        content: "";
+        width: 100px;
+        height: 100px;
+        background-color: green;
+      }
+    </style>
+  `;
+</script>