1837790 - Wrong CSS rules being crossed out in "Style" tab of developer tools

Status: RESOLVED DUPLICATE of bug 1824652

(DevTools :: Inspector: Rules, defect)

Description

[Sam]

Attachment: a screenshot of the Style tab and the greyed and crossed out rules

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/113.0

Steps to reproduce:

Inspecting an example in MDN "Cascade layers" article at: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers#precedence_order_of_regular_cascade_layers
with developer tools to learn how the Cascade algorithm behaves, I got the wrong rules crossed out, but the render result is correct.

Actual results:

It shows the wrong css rules crossed out. In the example provided, the rules "box-shadow: -5px -5px lightblue !important;" and "font-weight: normal !important;" inside "@layer A" are greyed and crossed out, even though they're the ones winning the conflict (theoretically) and being rendered correctly.

Also, the same bug is present in Chrome.

Expected results:

It shouldn't have crossed the above rules. Layer A should have the 2 rules win the precedence conflict. But again, the render is correct, so only the debugging info displayed in the developer tools are wrong.