Bug 234561

Summary:

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

Product:

WebKit

Reporter:

Kyle Bavender <kyle.bavender>

Component:

CSS

Assignee:

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:

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	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 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.