1849328 - Bug in CSS Cascade Layers with !important?

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[simube]

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

Steps to reproduce:

I found a strange behaviour in CSS.

@layer test {
    .test {
        background-color: red;
    }

    .test-important {
        background-color: red !important;
    }
}

.test {
    background-color: green;
}

.test-important {
    background-color: green !important;
}

It seems that !important has higher priority within a layer. The CSS-console in the browser shows the styles from the layer as "disabled" but they are still the ones that are applied.

Actual results:

• Box .test is green
• Box .test-important is red.

Expected results:

I expect both boxes to have green background, because CSS not inside a layer should have higher priority.

Comment 1

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

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

Comment 2

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Testcase 1

Comment 3

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

The !important declarations reverse the order of precedence, so the actual result in comment 0 is correct.
https://developer.mozilla.org/en-US/docs/Web/CSS/important#cascade_layers

The CSS-console in the browser shows the styles from the layer as "disabled" but they are still the ones that are applied.

Firefox Nightly 118's devtools does show that the .test-important rule inside @layers test gets applied, which has been fixed by bug 1824652 in Firefox 117 (current Firefox beta). I'm seeing the on Google Chrome and Safari's devtools. You might want file bugs in their bug tracking system.