Bug 261366

Summary: Elements with :has(+ sibling) selectors do not update when their siblings change
Product: WebKit Reporter: tlf
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: benjamin.mark.adam, heycam, karlcow, koivisto, ntim, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Mac (Intel)   
OS: macOS 13   
Attachments:
Description Flags
Simple test case none

Description tlf 2023-09-08 19:56:02 PDT 
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.
Comment 1 Cameron McCormack (:heycam) 2023-09-10 01:10:14 PDT 
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.
Comment 2 Radar WebKit Bug Importer 2023-09-10 01:16:18 PDT 
<rdar://problem/115242090>
Comment 3 Ben Adam 2023-09-22 11:58:25 PDT 
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).
Comment 4 Tim Nguyen (:ntim) 2023-10-21 14:24:56 PDT 
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.