Bug 1867893: Do not skip invalidation for :has if the stand-in elem…

…ent can be an anchor. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D195444

servo/components/style/invalidation/element/relative_selector.rs

@@ -170,7 +170,18 @@ impl<'a, E: TElement> OptimizationContext<'a, E> {
             // element we're mutating.
             // e.g. Given `:has(... .a ~ .b ...)`, we're the mutating element matching `... .a`,
             // if we find a sibling that matches the `... .a`, it can stand in for us.
-            return true;
+            debug_assert!(dependency.parent.is_some(), "No relative selector outer dependency?");
+            return dependency.parent.as_ref().map_or(false, |par| {
+                // ... However, if the standin sibling can be the anchor, we can't skip it, since
+                // that sibling should be invlidated to become the anchor.
+                !matches_selector(
+                    &par.selector,
+                    par.selector_offset,
+                    None,
+                    &sibling,
+                    &mut matching_context
+                )
+            });
         }
         // Ok, there's no standin element - but would this element have matched the upstream
         // selector anyway? If we don't, either the match exists somewhere far from us

testing/web-platform/tests/css/selectors/invalidation/has-sibling-insertion-removal.html

@@ -19,6 +19,7 @@
 #subject10:has(+ #sibling10_2 ~ #sibling10_3) { color: green }
 #subject11:has(+ #sibling11_1 + #sibling11_2 ~ #sibling11_3 > #siblingchild11_3_1) { color: blue }
 #subject12:has(+ #sibling12_2 ~ #sibling12_3 > #siblingchild12_3_1) { color: yellow }
+.sibling13:has(~ .sibling13) { color: green }
 </style>
 
 <main id="main">
@@ -103,6 +104,10 @@
     </div>
     <div id="sibling12_4"></div>
   </div>
+  <div id="parent13">
+    <div class="sibling13"></div>
+    <div id="subject13" class="sibling13"></div>
+  </div>
 </main>
 <script>
 
@@ -183,4 +188,11 @@
 sibling12_1.remove();
 testColor(`subject12: color after #sibling12_1 removed should be ${yellow}`,
           subject12, yellow);
+
+testColor(`subject13: initial color should be ${grey}`, subject13, grey);
+const d = document.createElement("div");
+d.classList.add("sibling13");
+parent13.appendChild(d);
+testColor(`subject13: color after #sibling12_1 removed should be ${green}`,
+          subject13, green);
 </script>