WebKit export: [CSS] Fix the matching of :host combined with :not() (#…

…49611) https://bugs.webkit.org/show_bug.cgi?id=282960
web-platform-tests · Jan 3, 2025 · 8bcb543 · 8bcb543
1 parent eb3144c
commit 8bcb543
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 0 deletions.
diff --git a/css/css-scoping/host-descendant-003.html b/css/css-scoping/host-descendant-003.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host combined with :not</title>
+<link rel="help" href="https://drafts.csswg.org/selectors/#featureless">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+my-host {
+  display: block;
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<my-host id="host"></my-host>
+<script>
+  host.attachShadow({mode: "open"}).innerHTML = `
+    <style>
+      :host > div {
+        background-color: red;
+        width: 100%;
+        height: 100%;
+      }
+      :host > :not(span) {
+        background-color: green;
+      }
+    </style>
+    <div></div>
+  `;
+
+</script>
diff --git a/css/css-scoping/host-multiple-002.html b/css/css-scoping/host-multiple-002.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host</title>
+<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: red;
+      }
+      :not(:not(:host)):host {
+        background-color: green;
+      }
+    </style>
+  `;
+
+</script>
diff --git a/css/css-scoping/host-multiple-003.html b/css/css-scoping/host-multiple-003.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host</title>
+<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: red;
+      }
+      :is(div, :host) {
+        background-color: green;
+      }
+    </style>
+  `;
+
+</script>
diff --git a/css/css-scoping/host-multiple-004.html b/css/css-scoping/host-multiple-004.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host</title>
+<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: red;
+      }
+      :not(div, :not(:host)) {
+        background-color: green;
+      }
+    </style>
+  `;
+
+</script>
diff --git a/css/css-scoping/host-multiple-005.html b/css/css-scoping/host-multiple-005.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host</title>
+<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: red;
+      }
+      :is(:host):host {
+        background-color: green;
+      }
+    </style>
+  `;
+
+</script>
diff --git a/css/css-scoping/host-multiple-006.html b/css/css-scoping/host-multiple-006.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host</title>
+<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: red;
+      }
+      :not(:not(:host)):host {
+        background-color: green;
+      }
+    </style>
+  `;
+
+</script>
diff --git a/css/css-scoping/host-not-001.html b/css/css-scoping/host-not-001.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:host combined with :not</title>
+<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;
+      }
+      div:host {
+        background-color: red;
+      }
+      :not(div):host {
+        background-color: red;
+      }
+      :host:not(div) {
+        background-color: red;
+      }
+      :host:is(div) {
+        background-color: red;
+      }
+      :is(div):host {
+        background-color: red;
+      }
+      :host:not(:hover) {
+        background-color: red;
+      }
+      :host:not(:defined) {
+        background-color: red;
+      }
+    </style>
+  `;
+
+</script>