Bug 261366 – Elements with :has(+ sibling) selectors do not update when their siblings change

• Status: NEW
• Component: CSS

Created attachment 467614 [details]
Simple test case

When styling an element using a :has(+ sibling) or :has(~ sibling) selector, adding/removing siblings of the element doesn't invalidate the styles. I originally found and reported this issue in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1851356.

[Cameron McCormack (:heycam)]

I think we'd either need to extend the "invalidate a lot" patch I have in https://bugs.webkit.org/show_bug.cgi?id=253944 to handle such selectors, or (and this is probably better) we need to store :has(+) and :has(~) rules separately on RuleFeature / StyleScopeRuleSet, then look at the style relation bits that we set on elements to determine whether we need to invalidate those rules on some or all of the siblings of the inserted or removed element.

[Radar WebKit Bug Importer]

<rdar://problem/115242090>

[Ben Adam]

Also running into this problem. Here is an example https://o4zyd0.csb.app ... The app has the styles

#form-fields:not(:has(li)) ul,
#form-fields:not(:has(li)) button {
  display: none;
}

but when the form field is added to the fieldset, the query does not match (however subsequent updates to the dom are fast and work).

[Tim Nguyen (:ntim)]

It would good to write a web-platform-test for this if you have time: https://github.com/web-platform-tests/wpt

That would help us fix it.