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

Status: VERIFIED FIXED

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

Description

[Olivier Jaquemet]

Attachment: 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

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

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.

Comment 2

[Xidorn Quan [:xidorn] UTC+10]

Attachment: Bug 1363292 - Have unprefixed linear-gradient accept zero as angle value.

Review commit: https://reviewboard.mozilla.org/r/143714/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/143714/

Comment 3

[Xidorn Quan [:xidorn] UTC+10]

 https://treeherder.mozilla.org/#/jobs?repo=try&revision=08cbdcd29a3ee1baab99fd1606217bb6bf1686ba

Comment 4

[Daniel Holbert [:dholbert]]

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

Comment 5

[Daniel Holbert [:dholbert]]

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 6

[yisibl]

Add comments for "unitless 0 for angles"

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient$compare?locale=en-US&to=1250729&from=1229635
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient$compare?locale=en-US&to=1250731&from=1228579

Comment 7

[Xidorn Quan [:xidorn] UTC+10]

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

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/143714/diff/1-2/

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/73abfac22f01
Have unprefixed linear-gradient accept zero as angle value. r=dholbert

Comment 9

[Mozilla Autoland]

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)

Comment 10

[Xidorn Quan [:xidorn] UTC+10]

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

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/190658a95c3c
followup - Update the test. r=dholbert

Comment 12

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/73abfac22f01
https://hg.mozilla.org/mozilla-central/rev/190658a95c3c

Comment 13

[Olivier Jaquemet]

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