[Webkit-unassigned] [Bug 235451] New: [:has() pseudo-class] :has() selector invalidation issue with toggling :checked on select elements

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=235451

            Bug ID: 235451
           Summary: [:has() pseudo-class] :has() selector invalidation
                    issue with toggling :checked on select elements
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: bramus at bram.us

I see that https://bugs.webkit.org/show_bug.cgi?id=234561 got closed as RESOLVED FIXED, but I have similar a demo that's not working properly: https://codepen.io/bramus/pen/exrYVW

When changing the value of the first dropdown, it should enable the corresponding dropdown which is a sibling. 

```html
<select>
  <option value="0">Choose …</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
  <option value="3">Ford</option>
  <option value="4">Mercedes</option>
</select>

<select data-showwhen="1">
  <option value="0">Choose type of Audi …</option>
  …
</select>

<select data-showwhen="2">
  <option value="0">Choose type of BMW …</option>
  …
</select>

<select data-showwhen="3">
  <option value="0">Choose type of Ford …</option>
  …
</select>

<select data-showwhen="4">
  <option value="0">Choose type of Mercedes …</option>
  …
</select>
```

```css
select[data-showwhen] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

select:not([data-showwhen]):has(option[value="1"]:checked) ~ select[data-showwhen="1"],
select:not([data-showwhen]):has(option[value="2"]:checked) ~ select[data-showwhen="2"],
select:not([data-showwhen]):has(option[value="3"]:checked) ~ select[data-showwhen="3"],
select:not([data-showwhen]):has(option[value="4"]:checked) ~ select[data-showwhen="4"] {
  cursor: default;
  pointer-events: auto;
  opacity: 1;
}
```

When changing the value of the first dropdown, nothing happens, although it should. Perhaps it has to do that these are select elements, and not input elements?

Forcing a style recall + repaint does not help:

```js
// Force a repaint on change
document.querySelector('select').addEventListener('input', (e) => {
        document.documentElement.className = 'reflow_' + (new Date()).getTime();
});
```


What does work is opening Web Inspector: after changing the value of the first dropdown and then focussing Web Inspector, the page seems to get restyled and pained. The confirms that the CSS itself works.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220121/7c01ccbb/attachment.htm>