1792501 - has selector stays frozen

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Christopher Kirk-Nielsen]

Attachment: The DevTools panel shows us .test exists but the html element does not react to it being toggled unless styles are forcibly reevaluated via manual property toggling.

Cloned from bug #1792270, maybe be related.

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

Steps to reproduce:

1. Enabled layout.css.has-selector.enabled in about:config
2. Set a background on the html element with CSS, create any element (e.g. <i>), and a button.
3. Add JS to toggle a test class on the "any element", i in this example, when clicked.
4. Set the CSS of the root to change the background when .test is found: html:has(.test)
5. Click the button to toggle the class.

DEMO: https://codepen.io/chriskirknielsen/pen/eYryBpx (true existence of .test is shown in the button with a simple sibling CSS selector, not has)

Actual results:

Toggling class name on the queried element in has() does not restyle the background. Furthermore:

• Firefox 105: I need to toggle background/overflow styles in the DevTools to trigger a reevaluation of the styles, or else they stay frozen
• Firefox Nightly 107: The technique used in Firefox 105 to reevaluate does not work, html:has(.test) never matches.

Expected results:

The background should change as the class is toggled, meaning :has()'s truthiness should react to that change accordingly.

Firefox 105: FAIL (:has matches inconsistently, )
Firefox Nightly 107: FAIL (:has never matches)
Safari 16: PASS
Chrome 105: PASS

Comment 1

[Christopher Kirk-Nielsen]

Apologies, I had just updated Firefox Nightly and didn't realise the flag in about:config got reverted. Firefox Nightly 107.0a1 behaves just like Firefox 105 as far as I can tell.

Update:
Firefox 105: FAIL (:has matches inconsistently)
Firefox Nightly 107.0a1: FAIL (:has matches inconsistently)

Comment 2

[David Shin[:dshin]]

Perhaps a dupe of bug 1793012?

Comment 4

[moritz.wohlers]

Another Issue related to this is, that when opening a case like this case (https://codepen.io/matuzo/pen/PoegGKV), where has is used to do things only in a temporary state like a modal is open, after getting the styles provided by has to wok (also possible by changing the value oft the property applied using has) stays applied even if the conditions made in the has-selector are not applied. Happens at lest in Firefox 105.

Comment 5

[Keyacom]

I can confirm that the implementation is partly done in JavaScript. From testing querySelector(), it seems obvious that any of the selectors +, ~ and > are still unsupported as the starting symbol (html:has(i ~ button) works, but i:has(~ button) doesn't). Descendant matching (no symbol) is supported now.

Styles apply, yet Firefox doesn't yet evaluate matching the :has pseudoclass aggressively.

Comment 6

[Keyacom]

The easiest you should do is this in the demo (the iframe's document or any of its descendants be in focus):

console.assert(
  document.querySelector("html:has(i ~ button) i") === document.querySelector("i:has(~ button"), 
  "Your browser does not yet have full support for the ':has()' selector!"
);

Comment 7

[Tomasz Kaźmierczak]

I just found the very same issue in Firefox 109.0, so can confirm. My test case is similar in that I'm also applying a class on an element using JavaScript (jQuery, to be more specific), and then am expecting that the :has() selector detects this change.

My selector is the following:

body:has(.dropdown-content.active) {
	overflow: hidden;
}

In JavaScript I just add/remove the active class to/from a <nav> element when user clicks the menu burger "button".

Compared against Google Chrome 109 (desktop and mobile) and it works there as expected (whenever .dropdown-content.active appears under body, page scrolling is disabled).

Comment 8

[David Shin[:dshin]]

Attachment: Bug 1792501: WIP to find the right place for relative selector related node flags. r=emilio

Comment 10

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 1 - Mark relative selector search path. r=emilio,#layout-reviewers

Comment 11

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 2 - Infrastructure for relative selector invalidation. r=emilio,#layout-reviewers

Comment 12

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 3 - Let :has contribute to dependencies. r=emilio,#layout-reviewers

Comment 13

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 4 - Basic :has invalidation. r=emilio,#layout-reviewers

Comment 14

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 5 - :has DOM mutation invalidation. r=emilio,#layout-reviewers

Comment 15

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 6 - :has invalidation for :empty and :nth (Without of). r=emilio,#layout-reviewers

Comment 16

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 7 - :has invalidation inside :nth-child(of). r=emilio,#layout-reviewers

Comment 17

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 8 - :has invalidation for inner selectors. r=emilio,#layout-reviewers

Comment 18

[David Shin[:dshin]]

Attachment: Bug 1792501: Part 1.5 - Take snapshots for unstyled elements if they're in relative selector search path. r=emilio,#layout-reviewers

Depends on D185674

Comment 19

[Emilio Cobos Álvarez (:emilio)]

Attachment: Testcase that fails with the patches.

This is the "display: none" case discussed offline.

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3f5f59b76a56
Part 1 - Mark relative selector search path. r=emilio
https://hg.mozilla.org/integration/autoland/rev/69f1155100f5
Part 1.5 - Take snapshots for unstyled elements if they're in relative selector search path. r=emilio
https://hg.mozilla.org/integration/autoland/rev/2a7c57a69803
Part 2 - Infrastructure for relative selector invalidation. r=emilio
https://hg.mozilla.org/integration/autoland/rev/f708f940e907
Part 3 - Let :has contribute to dependencies. r=emilio
https://hg.mozilla.org/integration/autoland/rev/27abe13a5a48
Part 4 - Basic :has invalidation. r=emilio,layout-reviewers
https://hg.mozilla.org/integration/autoland/rev/cf9f855ad80c
Part 5 - :has DOM mutation invalidation. r=emilio,layout-reviewers
https://hg.mozilla.org/integration/autoland/rev/7686c9df9ad4
Part 6 - :has invalidation for :empty and :nth (Without of). r=emilio
https://hg.mozilla.org/integration/autoland/rev/993b0e6567e6
Part 7 - :has invalidation inside :nth-child(of). r=emilio

Comment 22

[Sandor Molnar[:smolnar]]

Backed out for causing wpt failures on /css/selectors/...

Backout link: https://hg.mozilla.org/integration/autoland/rev/efd00170d5228445ceb123c48bfcfa7656331feb

Push with failures

Failure log WR -> TEST-UNEXPECTED-FAIL | /css/selectors/invalidation/nth-child-of-attr.html

Failure log wpt ->TEST-UNEXPECTED-TIMEOUT | /css/selectors/invalidation/has-complexity.html | TestRunner hit external timeout (this may indicate a hang)

Comment 23

[David Shin[:dshin]]

Fixed, WPT run here

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1746b0d41da4
Part 1 - Mark relative selector search path. r=emilio
https://hg.mozilla.org/integration/autoland/rev/65999f9a344c
Part 1.5 - Take snapshots for unstyled elements if they're in relative selector search path. r=emilio
https://hg.mozilla.org/integration/autoland/rev/af0f8eaebfc1
Part 2 - Infrastructure for relative selector invalidation. r=emilio
https://hg.mozilla.org/integration/autoland/rev/2fa142acab00
Part 3 - Let :has contribute to dependencies. r=emilio
https://hg.mozilla.org/integration/autoland/rev/f601de4d577c
Part 4 - Basic :has invalidation. r=emilio,layout-reviewers
https://hg.mozilla.org/integration/autoland/rev/b1aa6a98b0fc
Part 5 - :has DOM mutation invalidation. r=emilio,layout-reviewers
https://hg.mozilla.org/integration/autoland/rev/4b261890418a
Part 6 - :has invalidation for :empty and :nth (Without of). r=emilio
https://hg.mozilla.org/integration/autoland/rev/80b1c6393b00
Part 7 - :has invalidation inside :nth-child(of). r=emilio

Comment 25

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/1746b0d41da4
https://hg.mozilla.org/mozilla-central/rev/65999f9a344c
https://hg.mozilla.org/mozilla-central/rev/af0f8eaebfc1
https://hg.mozilla.org/mozilla-central/rev/2fa142acab00
https://hg.mozilla.org/mozilla-central/rev/f601de4d577c
https://hg.mozilla.org/mozilla-central/rev/b1aa6a98b0fc
https://hg.mozilla.org/mozilla-central/rev/4b261890418a
https://hg.mozilla.org/mozilla-central/rev/80b1c6393b00

Comment 26

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

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

Comment 28

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

Upstream PR merged by moz-wptsync-bot

Comment 30

[Alex Finder]

(In reply to Sandor Molnar from comment #22)

Backed out for causing wpt failures on /css/selectors/...

Backout link: https://hg.mozilla.org/integration/autoland/rev/efd00170d5228445ceb123c48bfcfa7656331feb

Push with failures

Failure log WR -> TEST-UNEXPECTED-FAIL | /css/selectors/invalidation/nth-child-of-attr.html

Failure log wpt ->TEST-UNEXPECTED-TIMEOUT | /css/selectors/invalidation/has-complexity.html | TestRunner hit external timeout (this may indicate a hang)

== Change summary for alert #39616 (as of Wed, 20 Sep 2023 05:06:10 GMT) ==

Regressions:

Ratio	Test	Platform	Options	Absolute values (old vs new)
0.34%	installer size	osx-aarch64-shippable	aarch64 nightly	83,539,506.50 -> 83,822,874.25
0.31%	installer size	osx-aarch64-shippable	aarch64 nightly	83,509,832.83 -> 83,766,753.67

For up to date results, see: https://treeherder.mozilla.org/perfherder/alerts?id=39616