Clarify support for ::slotted(:has(...)) as established by WebKit (#5…

…0337)
web-platform-tests · Jan 28, 2025 · 1b476ff · 1b476ff
1 parent ed2d678
commit 1b476ff
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 0 deletions.
diff --git a/css/css-scoping/slotted-has-001.html b/css/css-scoping/slotted-has-001.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:has-slotted</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586">
+<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">
+    <template shadowrootmode="open">
+      <style>
+        slot {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: red;
+        }
+        ::slotted(:has(:first-child)) {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      </style>
+      <slot></slot>
+    </template>
+    <div><div></div></div>
+</div>
diff --git a/css/css-scoping/slotted-has-002.html b/css/css-scoping/slotted-has-002.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:has-slotted</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586">
+<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">
+    <template shadowrootmode="open">
+      <style>
+        slot {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: red;
+        }
+        ::slotted(:has(:last-child)) {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      </style>
+      <slot></slot>
+    </template>
+    <div><div></div></div>
+</div>
diff --git a/css/css-scoping/slotted-has-003.html b/css/css-scoping/slotted-has-003.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:has-slotted</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586">
+<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">
+    <template shadowrootmode="open">
+      <style>
+        slot {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: red;
+        }
+        ::slotted(:has(:first-child:last-child)) {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      </style>
+      <slot></slot>
+    </template>
+    <div><div></div></div>
+</div>
diff --git a/css/css-scoping/slotted-has-004.html b/css/css-scoping/slotted-has-004.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>:has-slotted</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/10586">
+<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">
+    <template shadowrootmode="open">
+      <style>
+        slot {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: red;
+        }
+        ::slotted(:not(:has(:first-child:last-child))) {
+          display: block;
+          width: 100px;
+          height: 100px;
+          background-color: green;
+        }
+      </style>
+      <slot></slot>
+    </template>
+    <div></div>
+</div>
diff --git a/css/selectors/parsing/parse-slotted.html b/css/selectors/parsing/parse-slotted.html
@@ -14,6 +14,7 @@
   test_valid_selector('::slotted(:not(:nth-last-of-type(2)):not([slot="foo"]))');
   test_valid_selector("::slotted(:first-child)");
   test_valid_selector("::slotted(:hover)");
+  test_valid_selector("::slotted(:has(:first-child:last-child))");
   test_invalid_selector("::slotted");
   test_invalid_selector("::slotted()");
   test_invalid_selector("::slotted(0)");