Open Bug 1403316 Opened 7 years ago Updated 2 years ago

Inspector's "rules" view incorrectly treats radial-gradient(circle gold,red) as a valid value for background-image

Categories

(DevTools :: Inspector: Rules, defect, P3)

Product:
DevTools
Component:
Inspector: Rules
Type:
defect

Tracking

(firefox57 fix-optional)

Tracking Flags:
Tracking Status
firefox57 --- fix-optional

People

(Reporter: dholbert, Unassigned)

Details

STR:
 0. Be sure you have stylo enabled. (about:config pref layout.css.servo.enabled should be true)

 1. Visit https://bug1383323.bmoattachments.org/attachment.cgi?id=8888982 , which has this invalid CSS:
>    background-image: radial-gradient(circle gold,red);

 2. Right-click the page and choose "Inspect Element", and click the "body" element & the rules tab.

ACTUAL RESULTS:
 - The page renders without any background (which is correct), and your Browser Console shows "Error in parsing value for ‘background-image’.  Declaration dropped."

 - BUT, devtools shows the "background-image" declaration as being valid & accepted.

EXPECTED RESULTS:
Devtools' rules inspector should show the background-image declaration as being struck-out and invalid.
Note that this particular testcase is a scenario where Stylo fixed a bug in Gecko.  The old Gecko CSS parser incorrectly treated this gradient expression as valid, but Stylo rejects it.  (This is tracked in bug 1383323, though we'll probably just resolve that bug as fixed-by-stylo.)

So: to keep devtools consistent with our rendering, we need to change its behavior for this case (and maybe swap it to use the stylo parser under the hood, or something?)
(In reply to Daniel Holbert [:dholbert] from comment #0)
>  2. Right-click the page and choose "Inspect Element", and click the "body"
> element & the rules tab.

Er, sorry, I meant to say the <html> element, not the <body> element.
We discussed this on irc.

The problem is that rule validity is checked on the client-side in the inspector.
https://dxr.mozilla.org/mozilla-central/rev/33b7b8e81b4befcba503c0e48cd5370aeb715085/devtools/shared/fronts/css-properties.js#118

However, stylo isn't used there, hence the discrepancy.

Fixing this in the inspector was non-trivial the last time we tried.
That was just a piece of the de-chrome-ing project though; I think ideally it should
be tried again, but this time without the time constraints.
status-firefox57: --- → fix-optional
Priority: -- → P3
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.