[css-variables] resolving relative URLs

One thing that might not be obvious until you notice it, is that if you 
have a relative URL in a variable, then it is resolved against the URL 
of the style sheet where the (non-custom) property that ultimately uses 
the variable is declared.  So if you had:

   -- http://example.org/index.html --
   <!DOCTYPE html>
   <link rel=stylesheet href=resources/base.css>
   <link rel=stylesheet href=resources/themes/light/theme.css>
   <p>Hello.</p>

   -- http://example.org/resources/base.css --
   body { background-image: var(mainbg); }

   -- http://example.org/resources/themes/light/theme.css --
   :root { var-mainbg: url(somelightpattern.svg); }

then the computed value of background-image on body would be 
http://example.org/resources/somelightpattern.svg rather than 
http://example.org/resources/themes/light/somelightpattern.svg.

Is this a problem?  Should there be a way to absolutise the URL token in 
the variable declaration?

Received on Thursday, 5 September 2013 22:54:56 UTC