1822432 - Pseudo-elements do not change style when parent ::part() attribute name is changed

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[[:DaeCatt]]

Steps to reproduce:

I've created a custom element using part attributes to allow for styling different parts of the element. To indicate state in the element I change the part attribute for a node, and style these states using the ::part() selector. Additionally I use an ::after pseudo element to hold an icon.

This jsfiddle recreates the bug: https://jsfiddle.net/epvz1ot8/1/

Specifically clicking the colored rectangle alternates the part attribute in the custom element between "a" and "b". As a result the background of the pseudo element should be red when the attribute is "a", and blue when the attribute is "b".

Occasionally opening and/or closing the developer console may update the pseudo-element to reflect its actual css properties.

Actual results:

After changing the part attribute of the element the css properties of the ::after pseudo element are not updated.

Expected results:

The css properties of the ::after pseudo element should be updated, as the previous selector no longer applies.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Hani Yacoub, Desktop QA]

Managed to reproduce the issue on Windows 10 x64, macOS 11.6 and on Ubuntu 20.04 x64.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1822432 - Restyle pseudo-elements as well on part attribute changes. r=#style,#layout

Refactor a bit the code to unify how we deal with this conditional
restyling (we had similar code for
MustCascadeChildrenIfInheritResetStyle).

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/80c57ba0f41b
Restyle pseudo-elements as well on part attribute changes. r=jwatt

Comment 5

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

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

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/80c57ba0f41b

Comment 7

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

Upstream PR merged by moz-wptsync-bot

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox112 to wontfix.

For more information, please visit auto_nag documentation.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

This touches rather hot code.

Comment 10

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproduced on a 2023-03-25 Nightly build on macOS 12.
Verified as fixed on Firefox 113.0(build ID: 20230504192738) and Nightly 114.0a1(build ID: 20230504215417) on macOS 12, Windows 10, Ubuntu 22.