Open Bug 1288941 Opened 3 years ago Updated 11 months ago

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

Categories

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

47 Branch
defect

Tracking

()

People

(Reporter: algorithmicimperative, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: css3)

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.
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
Component: Untriaged → CSS Parsing and Computation
OS: Unspecified → Linux
Product: Firefox → Core
Hardware: Unspecified → x86_64
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: css3
OS: Linux → All
Hardware: x86_64 → All
Summary: CSS background radial-gradient does not accept 3 or 4 value position → css-background radial-gradient() does not accept 3 or 4 value <position> syntax
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.