1288941 - css-background radial-gradient() does not accept 3 or 4 value <position> syntax

Status: RESOLVED FIXED

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

Description

[Perelandric]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160609214634

Steps to reproduce:

#div1 {
  background: radial-gradient(at top 25px left 25px, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

https://jsfiddle.net/j1L3mp6g/


Actual results:

The `at top 25px left 25px` causes the declaration to fail; no gradient is shown. Using `at top left` displays correctly.


Expected results:

Display gradient with 25px top and left offset.

Comment 1

[Perelandric]

Both older and newer version of the spec state that the position definition is taken from the Backgrounds and Borders Module.

<bg-position> = [
  [ top | bottom ]
|
  [ <percentage> | <length> | left | center | right ]
  [ <percentage> | <length> | top | center | bottom ]?
|
  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]

Newer versions of the spec add the `at` prefix but maintain the same instruction to follow the Backgrounds and Borders Module, which too maintains the same grammar.

Older spec:
https://www.w3.org/TR/2011/WD-css3-images-20110217/#radial-gradients

Newer spec:
https://www.w3.org/TR/css3-images/#radial-gradients

Comment 2

[Miha Vrhovnik]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:48.0) Gecko/20100101 Firefox/48.0

It seems that the new parser is really overzealous.

Here is another one: this one works if I prefix it with -moz-

background-image: radial-gradient(center top, circle farthest-corner, red, green 80%);

Comment 3

[Tim Nguyen :ntim]

Seems fixed to me, likely by Stylo.