Bug 234561 – [:has() pseudo-class] :has() selector invalidation issue with toggling :checked

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Kyle Bavender]

A simple example:

#myform:has(input:checked) .row { background: rebeccapurple; }

Toggling of the checkbox does not toggle that background color, but it really seems that it should.

I created a test case with more details here: https://codepen.io/kbav/pen/YzrxwBa?editors=1100

This is a new bug created per request from Antti Koivisto on https://bugs.webkit.org/show_bug.cgi?id=227702 , the tracking bug for :has() implementation.

I also just noticed that Lea Verou also opened https://bugs.webkit.org/show_bug.cgi?id=234556 , which seems related, though in my test case, the :has() styling _does_ work at startup for identifying an <input type="checkbox" checked /> is :checked — it just does not correctly identify the toggling of the checkbox and invalidate the style.

[Bill Criswell]

It only recognizes the checked when it's the first input in my experience. Here's  a quick sample I hacked up: https://codesandbox.io/s/silly-gagarin-y0cub?file=/index.html

[Antti Koivisto]

Created attachment 447791 [details]
Patch

[EWS Watchlist]

This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess

[Antti Koivisto]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/32168

[Antti Koivisto]

Created attachment 447797 [details]
Patch

[Bill Criswell]

I experience a lot of similar things for other pseudo-selectors. I am not sure if that's helpful but wanted to get it out there in case it saves some time somewhere. Exact same demo but with `:disabled`: https://codesandbox.io/s/nostalgic-minsky-v0yyi?file=/index.html

[Antti Koivisto]

Created attachment 447801 [details]
Patch

[EWS]

Committed r287363 (245505@main): <https://commits.webkit.org/245505@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 447801 [details].

[Radar WebKit Bug Importer]

<rdar://problem/86817296>

[Bramus]

The problem seems to still be present for select elements. I've opened a separate issue for this: https://bugs.webkit.org/show_bug.cgi?id=235451

[Antti Koivisto]

STP138 was based on a fairly old revision and did not yet include this fix.

[Antti Koivisto]

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