Bug 276771 – #a:not(:has(#b)) doesn't rerender when #b is added to #a

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Luca Casonato]

Created attachment 471915 [details]
reproduction.html

Take an element with id #hey:

```html
<div id="hey" width=100 height=100></div>
```

And the following CSS:

```css
#hey:not(:has(div)) {
  background: red;
}
```

This element should have a red background as long as it has no `div` children.

Now use the following HTML to add a child:

```js
const div = document.createElement('div');
div.innerHTML = 'Hello World';
hey.appendChild(div);
``

You would expect the red background to disappear, and only the text to remain. However, in WebKit the text appears, but red background does not disappear.

Once the element is forced to re-compute styles for unrelated reasons, like adding a `style:="color: blue"` attribute to the element, the red background correctly disappears.

It seems like WebKit is not correctly watching the DOM under #hey to determine when a selector needs to be recomputed.

See the attached reproduction. It will append the div after 1 second. Pressing the "Re-render" buton will add a class that causes all styles to be re-computed.

[Radar WebKit Bug Importer]

<rdar://problem/132361847>

[Matthieu Dubet]

Thank you for the bug report.

It seems that we have an issue with invalidation of :not(:has(foo)) indeed.

We will look into it.

[Matthieu Dubet]

*** Bug 277230 has been marked as a duplicate of this bug. ***

[[e-mail]]

Is this bug resolved yet? If not, can we get an update when it is resolved and on which version?

It's annoying not having this working as it forces me to write convoluted CSS rather than simple to understand CSS (i.e., "if div not has..." is so much easier to comprehend than unnecessarily setting the default CSS in "if div has..." and having the regular div CSS be the not has).

[Matthieu Dubet]

The bug has been resolved indeed. You can follow Safari Technology Preview updates to test whether your website works with the fix

https://developer.apple.com/safari/technology-preview/