[:has() pseudo-class] Not matching elements it should

• Component: CSS
• Status: RESOLVED INVALID

[Brandon McConnell]

In my testing of the `:has()` pseudo-class, I discovered a few cases where `:has()` is not matching elements that it should.

Check example #'s 9 and 10 at this example URL (https://codepen.io/brandonmcconnell/pen/a93e58403165e721481e7fc4fe3fb676?editors=1100):
 * Example 9
 * Example 10

In both of those examples, you will see under "Should be" the squares which should be filled (by matching the selector under "Implementation") which are also not being filled in the actual render, under "Actually rendered".

Example 9 selector: `y:has(+ x, + * + x, + * + * + x)`
Example 10 selector: `y:has(~ * + * + x)`

[Antti Koivisto]

There is a small bug in the test case. There is a comma missing after

&_09 y:has(+ x, + * + x, + * + * + x)

which makes rules 8 and 9 invalid. With that fixed everything seems to work at least in trunk.

[Antti Koivisto]

rules 9 and 10 I mean.

[Antti Koivisto]

Neat test case.

[Brandon McConnell]

Ah yes, where would be without careless bugs like this 🤦🏻‍♂️

Thank you for finding that. Glad there wasn't an additional bug to resolve. Best case scenario. It appears most remaining bugs surrounding :has() will be resolved once the fix on Bug #234531 (https://bugs.webkit.org/show_bug.cgi?id=234531) is pushed.

Thanks again!