[css-variables] point to URL

[76creates]

When referring to the URL variable is not recognized.
Neither bellow wont work.

CSS

:root {
    --pic1: url("../img/test/i-06.jpg");
    --pic2: "../img/test/i-07.jpg";
}

#a1 { background-image: var(--pic1); }
#a2 { background-image: url(var(--pic2)); }

[tabatkins]

Both of those are valid declarations. If they don't work, it's a browser bug; please report it on the appropriate browser's bug tracker!

[upsuper]

Things inside url() is parsed as a <url-token> per CSS Syntax. Not sure how these two specs interact.

[upsuper]

It seems @dbaron has different opinion on whether the second declaration (background-image: url(var(--pic2))) should be valid. See this comment.

[plinss]

Yeah, <url-token> is a special beast and follows its own rules that we most likely can't change due to web compat. I don't believe you can do variable substitution inside a url(), especially since "var(--pic2)" is a perfectly valid URL.

[upsuper]

var(--pic2) is probably a valid URL, but url(var(--pic2)) is certainly not a valid <url-token> if not parsed as variable. The "consume a url token" algorithm raises a parse error when it sees the first (.