1874042 - :is containing :has/:nth-child(of) may not invalidate correctly

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Mayank]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:121.0) Gecko/20100101 Firefox/121.0

Steps to reproduce:

1. Apply some styles under this selector: :is([data-pressed=true], :has(.stuff)).
2. Use JS to toggle data-pressed.

See playground (press button): https://developer.mozilla.org/en-US/play?id=Q82Vp%2FpR%2Bzyvu9fwfTudUzpPjXseTppN65OFbz7Wh0C1YjAlMH86s4FVMPcf0%2BaqgpMz4d5UBodeRz8n

Actual results:

Selector is matched correctly on initial load, but not for future updates.

If :has(.stuff) is removed from the selector list, then it works correctly.

(Also works correctly in Blink and Webkit)

Expected results:

Selector should continue to match the correct state for both initial loads and future updates.

Comment 1

[Mayank]

Side note: I'm not sure if there are performance concerns with using :has inside :is. If that is the case, it would be nice if devtools showed a 🐢warning, similar to how it does for unconstrained selectors like :has(*).

Comment 2

[Daniel Holbert [:dholbert]]

dshin, mind taking a look?

I do see a behavior difference between Firefox vs. WebKit/Chrome here; in the linked MDN playground, we keep the hotpink outline after the button is pressed whereas it disappears when "off" is showing (e.g. after 1 press) in WebKit/Chrome.

Comment 3

[David Shin[:dshin] (PTO Til 17th)]

Oh... Ouch.
We always return true for :has() in invalidation context because we're just marking for invalidation and we'll match later while styling.
So in this case we have :is(non-has-selector, has-selector), where non-has-selector initially matches, but then no longer does. Our invalidator examines now vs then matches for the element, only marking for invalidation if it changed. For the "then" match, non-has-selector matches, and for the "now" match, has-selector matches, so we don't end up marking the element for invalidation.

:nth-child(N of selector) has the same issue.

Comment 4

[David Shin[:dshin] (PTO Til 17th)]

Attachment: Minimum Reproducible Case

STR: Load the test case, wait 1 second
Expected: Purple square should disappear
Actual: Purple square does not disappear (Unless you force restyle by e.g. opening the inspector)

Comment 5

[David Shin[:dshin] (PTO Til 17th)]

Attachment: Smiliar case with :nth-child(of)

Comment 6

[Raluca Popovici, Desktop QA]

I was able to reproduce this issue with the test case from comment 4 on MacOS 13.2.1 using Fx 121.0.1, 122.0b9 and Nightly 123.0a1(2024-01-14). I noticed that the issue is not reproducible on Fx 120.0.1.

Comment 7

[David Shin[:dshin] (PTO Til 17th)]

(Sorry - late reply) Ah, :has shipped on release 121.

Comment 8

[David Shin[:dshin] (PTO Til 17th)]

Attachment: Bug 1874042: Refactor KleeneValue for use in selector invalidation. r=#style

Comment 9

[David Shin[:dshin] (PTO Til 17th)]

Attachment: Bug 1874042: Add support for unknown match result for invalidation by comparing now/then. r=#style

Depends on D205256

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3b319cf7f343
Refactor KleeneValue for use in selector invalidation. r=firefox-style-system-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/068df8e3c3c6
Add support for unknown match result for invalidation by comparing now/then. r=firefox-style-system-reviewers,emilio

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/45482 for changes under testing/web-platform/tests

Comment 12

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/3b319cf7f343
https://hg.mozilla.org/mozilla-central/rev/068df8e3c3c6

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot