Bug 234733

Summary: [:has() pseudo-class] Not matching elements it should
Product: WebKit Reporter: Brandon McConnell <brandon>
Component: CSSAssignee: Nobody <webkit-unassigned>
Severity: Critical CC: koivisto
Priority: P2    
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 11   

Description Brandon McConnell 2021-12-28 14:42:07 PST
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)`
Comment 1 Antti Koivisto 2022-01-03 07:04:36 PST
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.
Comment 2 Antti Koivisto 2022-01-03 07:05:18 PST
rules 9 and 10 I mean.
Comment 3 Antti Koivisto 2022-01-03 07:13:39 PST
Neat test case.
Comment 4 Brandon McConnell 2022-01-03 09:04:10 PST
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!