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

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

From: Cameron McCormack <cam@mcc.id.au>
Date: Sun, 08 Sep 2013 11:11:07 +1000
Message-ID: <522BCEAB.40607@mcc.id.au>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style list <www-style@w3.org>
One more question about serialising properties with variable references. 
  The last sentence of the #variables-in-shorthands section of the spec 
says:

   If serializing a shorthand’s value would involve serializing a
   pending variable-substitution value, the shorthand must instead be
   serialized by serializing its original value.

What does that mean for this case:

   <style>
     p { border: var(a); border-top: var(b); }
   </style>
   <script>
     alert(theDeclaration.style.getPropertyValue("border-left"));
   </script>

The 'border' shorthand should effectively set longhands with 
unobservable values like:

   border-left-color: extract(border-left-color, border, var(a));
   border-left-style: extract(border-left-style, border, var(a));
   border-left-width: extract(border-left-width, border, var(a));
   border-top-color:  extract(border-top-color, border-top, var(b));
   border-top-style:  extract(border-top-style, border-top, var(b));
   border-top-width:  extract(border-top-width, border-top, var(b));
   ...

If you serialise 'border' you should get " var(a)".  If you serialise 
'border-top' you should get " var(b)".  Both are cases where the 
shorthand listed in the extract() had an original value to get.

But for 'border-left', the shorthand listed in the extract() doesn't 
match the one we're looking up -- it never had an original value.  This 
case is a bit like serialising a longhand that was set due to a 
shorthand having a variable reference.  So just like serialising 
'border-left-color' here should get "", maybe serialising 'border-left' 
should get "" too?


I guess it's the same as for a simpler case, like:

   p { margin-top: var(a); margin-right: 1px; margin-bottom: 1px;
       margin-left: 1px; }

If you serialised 'margin', what is the original value to use?
Received on Sunday, 8 September 2013 01:11:42 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:32 UTC