1946199 - DevTools shows incorrect applied CSS in Styles panel when using layers and !important

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect)

Description

[Christopher Kirk-Nielsen]

Attachment: demo.png

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

Steps to reproduce:

1. Create an element with an inline style set to important
2. Create a <style> with a layer that sets the same property as inline, but to a different value, also using important (e.g.: <p style="color: blue !important"> and @layer { p { color: red !important; }}`)
3. Inspect the element via DevTools and compare the Styles panel and Computed panel reported values

Live demo: https://codepen.io/chriskirknielsen/pen/yyBdXPo?editors=0100

Actual results:

The Styles panel and Computed panel report a different "winning" style value.

Expected results:

The Styles and Computed panels should report the same style value.

Comment 1

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

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

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the report. I thought we handled those cases correctly in Bug 1824652, but I guess I missed this

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1946199 - [devtools] Fix overridden declaration on element style with similar declaration in layer. r=#devtools.

From https://www.w3.org/TR/css-cascade-5/#style-attr:

declarations that are attached directly to an element (such as the contents
of a style attribute) rather than indirectly mapped by means of a style rule
selector take precedence over declarations the same importance that are mapped
via style rule.

this comes before the layer ordering, so an important property in the style
attribute will always win against an important property in a layer rule (which
differs from "regular" rules, where important property in layer wins over
important property not in a layer)

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6840deb4efa9
[devtools] Fix overridden declaration on element style with similar declaration in layer. r=devtools-reviewers,jdescottes.

Comment 5

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/6840deb4efa9