Bug 234561 - [:has() pseudo-class] :has() selector invalidation issue with toggling :checked
Summary: [:has() pseudo-class] :has() selector invalidation issue with toggling :checked
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antti Koivisto
URL:
Keywords: InRadar
: 235451 (view as bug list)
Depends on:
Blocks: 234556 227702
  Show dependency tree / graph
 
Reported: 2021-12-21 05:50 PST by Kyle Bavender
Modified: 2022-01-24 04:16 PST (History)
14 users (show)

See Also:

Attachments
Patch (7.04 KB, patch)
2021-12-22 02:23 PST, Antti Koivisto 		no flags Details | Formatted Diff | Diff
Patch (24.32 KB, patch)
2021-12-22 05:42 PST, Antti Koivisto 		no flags Details | Formatted Diff | Diff
Patch (25.63 KB, patch)
2021-12-22 06:34 PST, Antti Koivisto 		no flags Details | Formatted Diff | Diff
Show Obsolete (2) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Kyle Bavender 2021-12-21 05:50:10 PST 
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.
Comment 1 Bill Criswell 2021-12-21 17:56:16 PST 
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
Comment 2 Antti Koivisto 2021-12-22 02:23:39 PST 
Created attachment 447791 [details]
Patch
Comment 3 EWS Watchlist 2021-12-22 02:25:14 PST 
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
Comment 4 Antti Koivisto 2021-12-22 02:25:35 PST 
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/32168
Comment 5 Antti Koivisto 2021-12-22 05:42:46 PST 
Created attachment 447797 [details]
Patch
Comment 6 Bill Criswell 2021-12-22 06:25:05 PST 
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
Comment 7 Antti Koivisto 2021-12-22 06:34:55 PST 
Created attachment 447801 [details]
Patch
Comment 8 EWS 2021-12-22 10:37:01 PST 
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].
Comment 9 Radar WebKit Bug Importer 2021-12-22 10:38:17 PST 
<rdar://problem/86817296>
Comment 10 Bramus 2022-01-21 12:30:38 PST 
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
Comment 11 Antti Koivisto 2022-01-24 04:12:52 PST 
STP138 was based on a fairly old revision and did not yet include this fix.
Comment 12 Antti Koivisto 2022-01-24 04:16:05 PST 
*** Bug 235451 has been marked as a duplicate of this bug. ***