Flex item sizing property UI doesn't report the right CSS property values when !important is used

VERIFIED FIXED in Firefox 65

Status

defect
P2
normal
VERIFIED FIXED
6 months ago
3 months ago

People

(Reporter: pbro, Assigned: mtigley)

Tracking

unspecified
Firefox 65

Firefox Tracking Flags

(firefox65 verified)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

6 months ago
Steps:

- Load this URL in Firefox nightly: data:text/html,<style>.container{display:flex;}.item{flex-grow:1 !important;} .item {flex-grow:0}</style><div class="container"><div class="item">item</div></div>
- Open the inspector
- Select the <div.item> element in the inspector
- Look at the Flex item accordion of the Layout sidebar panel

Actual:

The "Flexibility" section says "flex-grow:0;"

Expected:

It should say "flex-grow:1;" because that's what the actual value for this property is.

The problem is that the flexbox inspector attempts to find "authored" styles to show the actual properties that were defined by the author.
In doing this, it loops through all rules matching the element and stops as soon as it finds the property with the right name.
The problem with this is that even if flex-grow:0 appears first, it actually does not match, because of an !important property that appears in a lower specificity rule.
(Reporter)

Comment 1

6 months ago
(In reply to Patrick Brosset <:pbro> from comment #0)
> It should say "flex-grow:1;" because that's what the actual value for this
> property is.
Or, really it should say "flex-grow: 1 !important;"
(Assignee)

Updated

5 months ago
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
(Reporter)

Updated

5 months ago
Priority: -- → P2

Comment 4

5 months ago
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/df86262bfccd
Modify the Flex Item actor to consider CSS rules using the important keyword. r=pbro

Comment 5

5 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/df86262bfccd
Status: ASSIGNED → RESOLVED
Last Resolved: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65

I reproduced this issue using 65.0a1(2018-10-30), on Windows 10 x64.
I can confirm this issue is fixed, I verified using Fx 65.0b11 on Windows 10 x64, macOS 10.14.3 and Ubuntu 16.04 LTS.
Cheers!

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.