261366 2023-09-08 19:56:02 -0700 Elements with :has(+ sibling) selectors do not update when their siblings change 2023-10-21 14:24:56 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Mac (Intel) macOS 13 NEW InRadar P2 Normal --- 1 tlf webkit-unassigned benjamin.mark.adam heycam karlcow koivisto ntim webkit-bug-importer oldest_to_newest 1976581 0 467614 tlf 2023-09-08 19:56:02 -0700 Created attachment 467614 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. 1976691 1 heycam 2023-09-10 01:10:14 -0700 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. 1976692 2 webkit-bug-importer 2023-09-10 01:16:18 -0700 <rdar://problem/115242090> 1979406 3 benjamin.mark.adam 2023-09-22 11:58:25 -0700 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). 1986704 4 ntim 2023-10-21 14:24:56 -0700 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. 467614 2023-09-08 19:56:02 -0700 2023-09-08 19:56:02 -0700 Simple test case test_case.html text/html 830 tlf PGh0bWw+DQogIDxzdHlsZT4NCiAgICBzcGFuOmhhcygrIHNwYW4pIHsNCiAgICAgIGNvbG9yOiBy ZWQNCiAgICB9DQogIDwvc3R5bGU+DQogIDxib2R5Pg0KICAgIDxkaXY+DQogICAgICA8c3BhbiBj bGFzcz0idGFyZ2V0Ij50YXJnZXQgZWxlbWVudDwvc3Bhbj4NCiAgICAgIDxkaXYgY2xhc3M9ImRl bGV0ZSI+ZGl2IHNpYmxpbmc8L2Rpdj4NCiAgICAgIDxzcGFuPnNwYW4gc2libGluZzwvc3Bhbj4N CiAgICA8L2Rpdj4NCiAgICA8YnV0dG9uIGlkPSJybSI+cmVtb3ZlIHNpYmxpbmc8L2J1dHRvbj4N CiAgICA8YnV0dG9uIGlkPSJyZWZyZXNoIj51cGRhdGUgdGFyZ2V0PC9idXR0b24+DQogICAgPHNj cmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3Rv cigiI3JtIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbiAoKSB7DQogICAgICAg IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIi5kZWxldGUiKS5yZW1vdmUoKTsgIA0KICAgICAgfSk7 DQogICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCIjcmVmcmVzaCIpLmFkZEV2ZW50TGlzdGVu ZXIoImNsaWNrIiwgZnVuY3Rpb24gKCkgew0KICAgICAgICBjb25zdCB0YXJnZXQgPSBkb2N1bWVu dC5xdWVyeVNlbGVjdG9yKCIudGFyZ2V0Iik7DQogICAgICAgIGNvbnN0IHNpYmxpbmcgPSB0YXJn ZXQubmV4dFNpYmxpbmc7DQogICAgICAgIHRhcmdldC5yZW1vdmUoKTsNCiAgICAgICAgc2libGlu Zy5wYXJlbnROb2RlLmluc2VydEJlZm9yZSh0YXJnZXQsIHNpYmxpbmcpOw0KICAgICAgfSk7DQog ICAgPC9zY3JpcHQ+DQogIDwvYm9keT4NCjwvaHRtbD4=