Closed Bug 1300237 Opened 8 years ago Closed 8 years ago

var() is not recognized inside url()


(Core :: CSS Parsing and Computation, defect)

Not set



Tracking Status
firefox51 --- affected


(Reporter: xidorn, Unassigned)



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.

In Example 11, 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.
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.