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

VERIFIED FIXED in Firefox 55

Status

()

defect
P2
normal
VERIFIED FIXED
2 years ago
2 years ago

People

(Reporter: olivier.jaquemet, Assigned: xidorn)

Tracking

(Blocks 1 bug)

53 Branch
mozilla55
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox55 fixed)

Details

(Whiteboard: [stylo])

Attachments

(2 attachments)

Reporter

Description

2 years ago
Posted 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 : https://developer.mozilla.org/en-US/docs/Web/CSS/angle ) 

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 : 
https://codepen.io/anon/pen/VbMyNL
https://codepen.io/anon/pen/ZKXvPM
(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 : 
https://github.com/yui/yuicompressor/blob/master/tests/zeros.css
https://github.com/yui/yuicompressor/blob/master/tests/zeros.css.min
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
Assignee

Comment 1

2 years ago
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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Assignee

Updated

2 years ago
No longer blocks: stylo
Priority: -- → P2
Whiteboard: [stylo]
Comment hidden (mozreview-request)
Assignee

Updated

2 years ago
Assignee: nobody → xidorn+moz

Comment 4

2 years ago
mozreview-review
Comment on attachment 8872233 [details]
Bug 1363292 - Have unprefixed linear-gradient accept zero as angle value.

https://reviewboard.mozilla.org/r/143714/#review148034

r=me
Attachment #8872233 - Flags: review?(dholbert) → review+

Comment 5

2 years ago
mozreview-review
Comment on attachment 8872233 [details]
Bug 1363292 - Have unprefixed linear-gradient accept zero as angle value.

https://reviewboard.mozilla.org/r/143714/#review148038

::: 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.)
Comment hidden (mozreview-request)

Comment 8

2 years ago
Pushed by xquan@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/73abfac22f01
Have unprefixed linear-gradient accept zero as angle value. r=dholbert

Comment 9

2 years ago
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/stylo-failures.md
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)
Assignee

Comment 10

2 years ago
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...

Comment 11

2 years ago
Pushed by xquan@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/190658a95c3c
followup - Update the test. r=dholbert

Comment 12

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/73abfac22f01
https://hg.mozilla.org/mozilla-central/rev/190658a95c3c
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla55
Reporter

Comment 13

2 years ago
Thanks! it works perfectly in FF 55.

I just edited the documentation, to update the browser feature compatibility and foonotes with this information
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient$compare?locale=en-US&to=1288577&from=1280379
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.