Bug 234561

Summary: [:has() pseudo-class] :has() selector invalidation issue with toggling :checked
Product: WebKit Reporter: Kyle Bavender <kyle.bavender>
Component: CSSAssignee: Antti Koivisto <koivisto>
Status: RESOLVED FIXED    
Severity: Normal CC: billcriswell, bramus, cdumez, changseok, clopez, esprehn+autocc, ews-watchlist, gyuyoung.kim, koivisto, kyle.bavender, mifenton, simon.fraser, webkit-bug-importer, youennf
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://github.com/web-platform-tests/wpt/pull/32168
https://bugs.webkit.org/show_bug.cgi?id=235451
Bug Depends on:    
Bug Blocks: 234556, 227702    
Attachments:
Description Flags
Patch
none
Patch
none
Patch none

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