Support invalidation for location pseudo classes inside :has()

Support invalidation for :link, :any-link and :target pseudo class inside :has(). Invalidation for :visited inside :has() is not needed since :visited is not matched inside :has() to prevent leaking visitedness. Ignored invalidation of :scope inside :has() due to an issue in the csswg-draft. - w3c/csswg-drafts#7211 Bug: 669058, 1324834 Change-Id: Ice42f0113f0cdc69a8054c2778c9cab3cdd5ef10 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3645177 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Byungwoo Lee <blee@igalia.com> Cr-Commit-Position: refs/heads/main@{#1003038} NOKEYCHECK=True GitOrigin-RevId: 1d9eb9e8bb664b1f3117b788f1ab48bcc89648ee
mjfroman · May 13, 2022 · d3bad40 · d3bad40
1 parent a69b64a
commit d3bad40
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 12 deletions.
diff --git a/blink/renderer/core/dom/element.cc b/blink/renderer/core/dom/element.cc
@@ -4301,19 +4301,22 @@ struct Element::AffectedByPseudoStateChange {
             element.AncestorsOrSiblingsAffectedByActiveInHas();
         break;
 
+      case CSSSelector::kPseudoAnyLink:
       case CSSSelector::kPseudoChecked:
       case CSSSelector::kPseudoDefault:
       case CSSSelector::kPseudoDisabled:
       case CSSSelector::kPseudoEnabled:
       case CSSSelector::kPseudoIndeterminate:
       case CSSSelector::kPseudoInRange:
       case CSSSelector::kPseudoInvalid:
+      case CSSSelector::kPseudoLink:
       case CSSSelector::kPseudoOutOfRange:
       case CSSSelector::kPseudoOptional:
       case CSSSelector::kPseudoPlaceholderShown:
       case CSSSelector::kPseudoReadOnly:
       case CSSSelector::kPseudoReadWrite:
       case CSSSelector::kPseudoRequired:
+      case CSSSelector::kPseudoTarget:
       case CSSSelector::kPseudoValid:
         ancestors_or_siblings = true;
         break;

diff --git a/blink/web_tests/external/wpt/css/selectors/invalidation/link-pseudo-in-has.html b/blink/web_tests/external/wpt/css/selectors/invalidation/link-pseudo-in-has.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Selectors Invalidation: :link, :visited :any-link, pseudo-class in :has() argument</title>
+<link rel="author" title="Byungwoo Lee" href="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>
+<style>
+  #parent { color: blue; }
+  #grandparent { color: blue; }
+  #parent:has(> :not(:link)) { color: grey; }
+  #parent:has(> :link) { color: green; }
+  #parent:has(> :visited) { color: red; }
+  #grandparent:has(:not(:any-link)) { color: grey; }
+  #grandparent:has(:any-link) { color: green; }
+</style>
+<div id="grandparent"></div>
+<script>
+  const BLUE = "rgb(0, 0, 255)";
+  const GREY = "rgb(128, 128, 128)";
+  const GREEN = "rgb(0, 128, 0)";
+  const RED = "rgb(255, 0, 0)";
+
+  function checkColor(id, color, target_matches) {
+    let element = document.getElementById(id);
+    let message = ["location.hash ==", location.hash, ": #" + id, "should be",
+                   color, (target_matches ? "with" : "without"),
+                   ":target"].join(" ");
+    assert_equals(getComputedStyle(element).color, color, message);
+  }
+
+  promise_test(async () => {
+    assert_equals(getComputedStyle(grandparent).color, BLUE,
+                  "grandparent should be blue without any element");
+
+    let parent = document.createElement("div");
+    parent.id = "parent";
+    grandparent.appendChild(parent);
+
+    assert_equals(getComputedStyle(grandparent).color, GREY,
+                  "grandparent should be grey after parent added");
+    assert_equals(getComputedStyle(parent).color, BLUE,
+                  "parent should be blue without any link");
+
+    let div = document.createElement("div");
+    parent.appendChild(div);
+
+    assert_equals(getComputedStyle(grandparent).color, GREY,
+                  "grandparent should be grey after div added");
+    assert_equals(getComputedStyle(parent).color, GREY,
+                  "parent should be grey after div added");
+
+    let visited = document.createElement("a");
+    visited.href = "";
+    parent.appendChild(visited);
+
+    assert_equals(getComputedStyle(grandparent).color, GREEN,
+                  "grandparent should be green after visited link added");
+    assert_equals(getComputedStyle(parent).color, GREEN,
+                  "parent should be green after visited link added");
+
+    let unvisited = document.createElement("a");
+    unvisited.href = "unvisited";
+    parent.appendChild(unvisited);
+
+    assert_equals(getComputedStyle(grandparent).color, GREEN,
+                  "grandparent should be green after unvisited link added");
+    assert_equals(getComputedStyle(parent).color, GREEN,
+                  "parent should be green after unvisited link added");
+
+    unvisited.remove();
+
+    assert_equals(getComputedStyle(grandparent).color, GREEN,
+                  "grandparent should be green after unvisited link removed");
+    assert_equals(getComputedStyle(parent).color, GREEN,
+                  "parent should be blue after unvisited link removed");
+
+    visited.remove();
+
+    assert_equals(getComputedStyle(grandparent).color, GREY,
+                  "grandparent should be grey after visited link removed");
+    assert_equals(getComputedStyle(parent).color, GREY,
+                  "parent should be grey after visited link removed");
+
+    div.remove();
+
+    assert_equals(getComputedStyle(grandparent).color, GREY,
+                  "grandparent should be grey after div removed");
+    assert_equals(getComputedStyle(parent).color, BLUE,
+                  "parent should be blue after div removed");
+
+    parent.remove();
+
+    assert_equals(getComputedStyle(grandparent).color, BLUE,
+                  "grandparent should be blue after parent removed");
+  });
+</script>
diff --git a/...pecific/highdpi/external/wpt/css/selectors/invalidation/target-pseudo-in-has-expected.txt b/...pecific/highdpi/external/wpt/css/selectors/invalidation/target-pseudo-in-has-expected.txt
diff --git a/...latform/generic/external/wpt/css/selectors/invalidation/target-pseudo-in-has-expected.txt b/...latform/generic/external/wpt/css/selectors/invalidation/target-pseudo-in-has-expected.txt
diff --git a/...rm/mac-mac10.14/external/wpt/css/selectors/invalidation/target-pseudo-in-has-expected.txt b/...rm/mac-mac10.14/external/wpt/css/selectors/invalidation/target-pseudo-in-has-expected.txt