Closed Bug 1300237 Opened 8 years ago Closed 8 years ago

var() is not recognized inside url()

Categories

(Core :: CSS Parsing and Computation, defect)

defect
Not set
normal

Tracking

()

RESOLVED INVALID
Tracking Status
firefox51 --- affected

People

(Reporter: xidorn, Unassigned)

References

Details

Something like this
> div {
>   --pic: "picture.jpg";
>   background-image: url(var(--pic));
> }
doesn't work.

I guess it should, per spec [1]
> The 'var()' function can be used in place of any part of a value in any property on an element.

But things inside url() could be parsed as a <url-token> [2]. Not sure how these specs interact.


[1] https://drafts.csswg.org/css-variables/#using-variables
[2] https://drafts.csswg.org/css-values/#urls
In Example 11, https://drafts.csswg.org/css-variables/#using-variables says:

> Similarly, you can’t build up a single token where part of it is provided by a variable:
> 
> .foo {
>   --gap: 20;
>   margin-top: var(--gap)px;
> }
> 
> Again, this is not equivalent to setting margin-top: 20px; (a length). Instead, it’s
> equivalent to margin-top: 20 px; (a number followed by an ident), which is simply an
> invalid value for the margin-top property.

It should probably be clearer in the non-example parts of the spec that variable substitution is intended to introduce a sequence of tokens.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → INVALID
Hmmm, I guess it is arguable. "url" and "(" are tokens, and thus there is a chance "var()" can be parsed as a token. That says, something like
> --pic: picture.jpg;
> background-image: url(var(--pic));
may not work because "<url> <(> <picture.jpg> <)>" is not a valid token stream, but "url(var(--pic))" itself should probably be parsable, given '<url> <(> <"picture.jpg"> <)>' is a valid token stream.
You need to log in before you can comment on or make changes to this bug.