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

On Sat, Sep 7, 2013 at 6:11 PM, Cameron McCormack <cam@mcc.id.au> wrote:
> 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));
>   ...

Yes.

> 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?

Yes, I suppose.  Hm, this whole thing still feels very fishy to me.
I'll put it in as an agenda item for next week's meeting.

> 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?

Right, same issue.

~TJ

Received on Sunday, 8 September 2013 05:43:32 UTC