Bug 235451

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.