Split out :has(:host-context()) invalidation tests

https://bugs.webkit.org/show_bug.cgi?id=261098 rdar://114918695 Reviewed by Cameron McCormack. We intentionally don't implement :host-context(). * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/host-context-pseudo-class-in-has-expected.txt: Copied from LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has-expected.txt. * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/host-context-pseudo-class-in-has.html: Copied from LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has.html. * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has.html: Canonical link: https://commits.webkit.org/267603@main Identifier: 267603@main
WebKit · Sep 4, 2023 · d99b06a · d99b06a
1 parent 0dab8bb
commit d99b06a
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 29 deletions.
diff --git a/...b-platform-tests/css/selectors/invalidation/host-context-pseudo-class-in-has-expected.txt b/...b-platform-tests/css/selectors/invalidation/host-context-pseudo-class-in-has-expected.txt
@@ -0,0 +1,8 @@
+
+PASS Before adding 'a' to #host_parent: Check #subject1 color
+PASS Before adding 'a' to #host_parent: Check #subject2 color
+FAIL After adding 'a' to #host_parent: Check #subject1 color assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL After adding 'a' to #host_parent: Check #subject2 color assert_equals: expected "rgb(0, 0, 255)" but got "rgb(255, 0, 0)"
+PASS After removing 'a' from #host_parent: Check #subject1 color
+PASS After removing 'a' from #host_parent: Check #subject2 color
+
diff --git a/...d/w3c/web-platform-tests/css/selectors/invalidation/host-context-pseudo-class-in-has.html b/...d/w3c/web-platform-tests/css/selectors/invalidation/host-context-pseudo-class-in-has.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: Invalidation for :host-context() inside :has()</title>
+<link rel="author" title="Byungwoo" href="mailto:blee@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="host_parent"><div id="host"></div></div>
+<script>
+  var shadow = host.attachShadow({ mode: 'open' });
+  shadow.innerHTML = `
+    <style>
+      .subject {
+        color: red;
+      }
+      .subject:has(:is(:host-context(.a) > .foo .bar)) { color: green }
+      .subject:has(:is(:host-context(.a) .bar)) { color: blue }
+    </style>
+    <div class="foo">
+      <div id="subject1" class="subject">
+        <div class="bar"></div>
+      </div>
+    </div>
+    <div>
+      <div class="foo">
+        <div id="subject2" class="subject">
+          <div class="bar"></div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const red = "rgb(255, 0, 0)";
+  const green = "rgb(0, 128, 0)";
+  const blue = "rgb(0, 0, 255)";
+
+  function checkColor(test_name, subject_id, subject_color) {
+    test(function() {
+      let subject = shadow.querySelector("#" + subject_id);
+      assert_equals(getComputedStyle(subject).color, subject_color);
+    }, test_name + ": Check #" + subject_id + " color");
+  }
+
+  checkColor("Before adding 'a' to #host_parent", "subject1", red);
+  checkColor("Before adding 'a' to #host_parent", "subject2", red);
+
+  host_parent.classList.add('a');
+
+  checkColor("After adding 'a' to #host_parent", "subject1", green);
+  checkColor("After adding 'a' to #host_parent", "subject2", blue);
+
+  host_parent.classList.remove('a');
+
+  checkColor("After removing 'a' from #host_parent", "subject1", red);
+  checkColor("After removing 'a' from #host_parent", "subject2", red);
+</script>
diff --git a/...d/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has-expected.txt b/...d/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has-expected.txt
@@ -1,10 +1,6 @@
 
-PASS Before adding 'a' to #host_parent: Check #subject1 color
-PASS Before adding 'a' to #host_parent: Check #subject2 color
-FAIL After adding 'a' to #host_parent: Check #subject1 color assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
-FAIL After adding 'a' to #host_parent: Check #subject2 color assert_equals: expected "rgb(0, 0, 255)" but got "rgb(255, 0, 0)"
-PASS After removing 'a' from #host_parent: Check #subject1 color
-PASS After removing 'a' from #host_parent: Check #subject2 color
-FAIL After adding 'a' to #host: Check #subject1 color assert_equals: expected "rgb(154, 205, 50)" but got "rgb(255, 0, 0)"
-FAIL After adding 'a' to #host: Check #subject2 color assert_equals: expected "rgb(135, 206, 235)" but got "rgb(255, 0, 0)"
+PASS Before adding 'a' to #host: Check #subject1 color
+PASS Before adding 'a' to #host: Check #subject2 color
+FAIL After adding 'a' to #host: Check #subject1 color assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL After adding 'a' to #host: Check #subject2 color assert_equals: expected "rgb(0, 0, 255)" but got "rgb(255, 0, 0)"
 
diff --git a/.../imported/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has.html b/.../imported/w3c/web-platform-tests/css/selectors/invalidation/host-pseudo-class-in-has.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Test: Invalidation for :host() and :host-context() inside :has()</title>
+<title>CSS Test: Invalidation for :host() inside :has()</title>
 <link rel="author" title="Byungwoo" href="mailto:blee@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/selectors/#relational">
 <script src="/resources/testharness.js"></script>
@@ -13,10 +13,8 @@
       .subject {
         color: red;
       }
-      .subject:has(:is(:host-context(.a) > .foo .bar)) { color: green }
-      .subject:has(:is(:host(.a) > .foo .bar)) { color: yellowgreen }
-      .subject:has(:is(:host-context(.a) .bar)) { color: blue }
-      .subject:has(:is(:host(.a) .bar)) { color: skyblue }
+      .subject:has(:is(:host(.a) > .foo .bar)) { color: green }
+      .subject:has(:is(:host(.a) .bar)) { color: blue }
     </style>
     <div class="foo">
       <div id="subject1" class="subject">
@@ -34,9 +32,7 @@
 
   const red = "rgb(255, 0, 0)";
   const green = "rgb(0, 128, 0)";
-  const yellowgreen = "rgb(154, 205, 50)";
   const blue = "rgb(0, 0, 255)";
-  const skyblue = "rgb(135, 206, 235)";
 
   function checkColor(test_name, subject_id, subject_color) {
     test(function() {
@@ -45,21 +41,11 @@
     }, test_name + ": Check #" + subject_id + " color");
   }
 
-  checkColor("Before adding 'a' to #host_parent", "subject1", red);
-  checkColor("Before adding 'a' to #host_parent", "subject2", red);
-
-  host_parent.classList.add('a');
-
-  checkColor("After adding 'a' to #host_parent", "subject1", green);
-  checkColor("After adding 'a' to #host_parent", "subject2", blue);
-
-  host_parent.classList.remove('a');
-
-  checkColor("After removing 'a' from #host_parent", "subject1", red);
-  checkColor("After removing 'a' from #host_parent", "subject2", red);
+  checkColor("Before adding 'a' to #host", "subject1", red);
+  checkColor("Before adding 'a' to #host", "subject2", red);
 
   host.classList.add('a');
 
-  checkColor("After adding 'a' to #host", "subject1", yellowgreen);
-  checkColor("After adding 'a' to #host", "subject2", skyblue);
+  checkColor("After adding 'a' to #host", "subject1", green);
+  checkColor("After adding 'a' to #host", "subject2", blue);
 </script>