Bug 273125 - :has(:is(...)) / :has(:where(...)) is broken when there are multiple :has() rules on the same selector
Summary: :has(:is(...)) / :has(:where(...)) is broken when there are multiple :has() r...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Critical
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-04-23 09:26 PDT by Benoît Rouleau
Modified: 2024-09-05 06:47 PDT (History)
6 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Benoît Rouleau 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).
Comment 1 Benoît Rouleau 2024-04-23 09:39:56 PDT 
Created attachment 471071 [details]
actual test case (ignore the other one, forgot to save -_-)
Comment 2 Karl Dubost 2024-04-23 19:44:48 PDT 
Created attachment 471098 [details]
rendering in safari, firefox, chrome

confirmed
Comment 3 Radar WebKit Bug Importer 2024-04-23 19:45:24 PDT 
<rdar://problem/126960335>
Comment 4 Roman Komarov 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)
Comment 5 Benoît Rouleau 2024-09-05 06:47:21 PDT 
A valid CSS selector that doesn't match what it should seems pretty critical to me. 🫠