Bug 273125

Summary:

:has(:is(...)) / :has(:where(...)) is broken when there are multiple :has() rules on the same selector

Product:

WebKit

Reporter:

Benoît Rouleau <benoit.rouleau>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Critical

CC:

karlcow, kizmarh, koivisto, nicole, simon.fraser, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari Technology Preview

Hardware:

All

OS:

All

Attachments:

Description	Flags
test case	none
actual test case (ignore the other one, forgot to save -_-)	none
rendering in safari, firefox, chrome	none

Benoît Rouleau

Reported 2024-04-23 09:26:44 PDT

Created attachment 471070 [details] test case Maybe related to bug #253944 See the attached test case. The `.container` element should be blue (like in Chrome and Firefox), but it's red in all the versions of Safari that I tested it in. Notice that if you remove the first rule (the `.card:has(button)` one), then it is blue as expected. Marked this as critical because this has the potential to break whole features that rely on `:has()` being supported (which it now is in all the big browsers).

Attachments
test case (590 bytes, text/html) 2024-04-23 09:26 PDT, Benoît Rouleau	no flags	Details
actual test case (ignore the other one, forgot to save -_-) (656 bytes, text/html) 2024-04-23 09:39 PDT, Benoît Rouleau	no flags	Details
rendering in safari, firefox, chrome (84.87 KB, image/png) 2024-04-23 19:44 PDT, Karl Dubost	no flags	Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Benoît Rouleau

Comment 1 2024-04-23 09:39:56 PDT

Created attachment 471071 [details] actual test case (ignore the other one, forgot to save -_-)

Karl Dubost

Comment 2 2024-04-23 19:44:48 PDT

Created attachment 471098 [details] rendering in safari, firefox, chrome confirmed

Radar WebKit Bug Importer

Comment 3 2024-04-23 19:45:24 PDT

<rdar://problem/126960335>

Roman Komarov

Comment 4 2024-09-05 05:34:50 PDT

Wanted to report a similar bug, my repro: https://codepen.io/kizu/pen/abMbrya (in my case I was able to work around it by adding an extra `&, &` nesting level, not sure why it did work)

Benoît Rouleau

Comment 5 2024-09-05 06:47:21 PDT

A valid CSS selector that doesn't match what it should seems pretty critical to me. 🫠

Note You need to log in before you can comment on or make changes to this bug.