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

On Thu, Sep 5, 2013 at 10:39 PM, Cameron McCormack <cam@mcc.id.au> wrote:
> Cameron McCormack:
>
>>> 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.
>
>
> Tab Atkins Jr.:
>
>> I answered this same question when raised by someone else last
>> February:<http://lists.w3.org/Archives/Public/www-style/2013Feb/0636.html>
>>
>> I said I'd edit it in, and then failed to do so.  It's *actually*
>> edited in now.  ^_^
>>
>> (The answer is "" for your code.  If you called getComputedStyle(), it
>> would be "green".)
>
>
> A related question is how to serialise the whole declaration when you have
> one of these longhands-set-by-a-shorthand-with-variables.  So if you had:
>
>   p { var-a: url("a") green; background: var(a); }
>
> what should you get if you get the cssText of the rule or its declaration?
> It makes less sense here to use "" as the values for background-color,
> background-image, etc., since that would cause the returned string not to be
> reparseable.  (I'm assuming we're not caring about roundtripability here.)

The spec addresses this (I added more than just the answer to your
specific question).  Check the last paragraph of
<http://dev.w3.org/csswg/css-variables/#variables-in-shorthands>:

> Similarly, while [CSSOM] defines that shorthand
> properties are serialized by appropriately concatenating
> the values of their corresponding longhands, shorthands
> containing variables must instead retain their original,
> var()-containing, value. 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.

This won't always produce a "good" answer, but it's better than
nothing.  For example, in your above example, if you set
background-repeat by itself, it wouldn't show up when you asked for
the serialization of 'background'.

~TJ

Received on Friday, 6 September 2013 19:24:15 UTC