W3C home > Mailing lists > Public > www-style@w3.org > August 2013

[cssom][css-variables] value on CSSStyleDeclaration of longhand properties set by a shorthand with variable references

From: Cameron McCormack <cam@mcc.id.au>
Date: Wed, 28 Aug 2013 10:18:58 +1000
Message-ID: <521D41F2.4080106@mcc.id.au>
To: www-style list <www-style@w3.org>
(Sorry for using "[css-om]" rather than "[cssom]" in the subject of my 
previous mail.)

Consider:

   <style>
    p {
     var-a: url("a") green;
     background-color: red;
     background: var(a);
   }
   </style>
   <script>
     var decl = document.styleSheets[0].cssRules[0].style;
     alert(decl.getPropertyValue("background-color"));
   </script>

What should be alerted?

Conceptually, I think of 'background-color' having a specified value of 
something like 'extract-background-color( var(a))'.  Setting 
'background' overrides whatever value was given to 'background-color' 
earlier in the declaration.

Chrome alerts "red", but that's misleading, since 'background-color' is 
overridden.  My WIP patches for Firefox return " var(a)" but that's also 
not right.

I'd be happy with returning an empty string, in lieu of anything more 
useful.

Now, what do we alert with this:

   alert(decl.getPropertyValue("background"));

I would expect " var(a)", and that is what Chrome and my WIP patches 
return.  CSSOM defines getPropertyValue with a shorthand property to 
concatenate all of the longhand property values from the declaration 
though, which won't get you the right result.  I think shorthands with 
variable references need to be treated specially here.
Received on Wednesday, 28 August 2013 00:19:33 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:33 UTC