Closed Bug 1363292 Opened 7 years ago Closed 7 years ago

Zero (0) angle value without degree unit is not correctly interpreted in linear-gradient


(Core :: CSS Parsing and Computation, defect, P2)

53 Branch



Tracking Status
firefox55 --- fixed


(Reporter: olivier.jaquemet, Assigned: xidorn)


(Blocks 1 open bug)


(Whiteboard: [stylo])


(2 files)

Attached image zerodeg.png
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

Steps to reproduce:

The following linear-gradient syntax without the "deg" unit for the angle value is not correctly interpreted/renderered (even though unit identifier is indicated as optional for zero angles : ) 

div {
  background: linear-gradient(0, red, blue);

Actual results:

A white background is displayed for the div background

Expected results:

A linear gradient with a zero angle value was expected for the div background.

You may compare rendering on the following codepen :
(capture attached for direct comparison)

This cause issues when redenring CSS pre processed with minifiers.
Indeed, zero values with any unit are often replaced by minifier with 0 without any unit.
for example, this is the behavior of YUICompressor, as described in following test suite :
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Unit identifier is not optional for zero angle in general, but for this specific case, unit should be omittable per CSSWG's resolution on w3c/csswg-drafts#1162. Specifically, unitless zero as angle should be supported for gradient and some transform functions.
Ever confirmed: true
No longer blocks: stylo
Priority: -- → P2
Whiteboard: [stylo]
Assignee: nobody → xidorn+moz
Comment on attachment 8872233 [details]
Bug 1363292 - Have unprefixed linear-gradient accept zero as angle value.

Attachment #8872233 - Flags: review?(dholbert) → review+
Comment on attachment 8872233 [details]
Bug 1363292 - Have unprefixed linear-gradient accept zero as angle value.

::: layout/style/test/property_database.js:242
(Diff revision 1)
>    /* no quirks mode lengths */
>    "linear-gradient(red -99, yellow, green, blue 120%)",
> -  /* Unitless 0 is invalid as an <angle> */
> -  "linear-gradient(0, red, blue)",
>    /* There must be a comma between gradient-line (e.g. <angle>) and colors */
>    "linear-gradient(30deg red, blue)",

Actually, one request -- could you resurrect this removed chunk, and just have it use a different unitless value? Maybe s/0/30/?

And adjust the comment to say:
 /* Unitless nonzero numbers are invalid as an <angle> */

(I don't immediately see any nearby testcases for this still-invalid unitless scenario.)
Pushed by
Have unprefixed linear-gradient accept zero as angle value. r=dholbert
We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s f5e7d976a591 -d 73abfac22f01: rebasing 399111:f5e7d976a591 "Bug 1363292 - Have unprefixed linear-gradient accept zero as angle value. r=dholbert" (tip)
merging layout/style/test/property_database.js
merging layout/style/test/
warning: conflicts while merging layout/style/test/property_database.js! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)
Ah, hmmm, I pushed the land button before I publish the changed commit... so autoland lands it without the new test added :/ Probably I should just do another push I guess...
Pushed by
followup - Update the test. r=dholbert
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla55
Thanks! it works perfectly in FF 55.

I just edited the documentation, to update the browser feature compatibility and foonotes with this information$compare?locale=en-US&to=1288577&from=1280379
You need to log in before you can comment on or make changes to this bug.