1300237 - var() is not recognized inside url()

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Xidorn Quan [:xidorn] UTC+10]

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

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.

Comment 2

[Xidorn Quan [:xidorn] UTC+10]

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.