Re: [css3-values] using toggle() in shorthands

On 09/29/2013 11:55 PM, Cameron McCormack wrote:
> toggle() presents some issues similar to variables regarding what
> specified values should be returned from CSSStyleDeclaration
> objects and how they should be serialised.
>
> Consider for example:
>
>    <style>
>    p { margin: toggle(1px 2px, 3px 4px); }
>    </style>
>    <script>
>      alert(theRule.style.getPropertyValue("margin"));
>      alert(theRule.style.getPropertyValue("margin-top"));
>    </script>
>
> What should be alerted?

1. toggle(1px 2px, 3px 4px)
2. toggle(1px, 3px)

> Since we know that toggle() values are invalid (at parsing time)
> if any of their component values are invalid, then we can actually
> split this up into toggle() values for the subproperties.  So we
> can treat the effect of the shorthand as being equivalent to:
>
>    margin-top: toggle(1px, 3px);
>    margin-right: toggle(2px, 4px);
>    margin-bottom: toggle(1px, 3px);
>    margin-left: toggle(2px, 4px);

Right.

> I don't think the spec says to do this, though.

Yeah, we should probably specify that. :) We've added a paragraph
about handling shorthands now.

> Based on that, I would have said that the first alert should be
> "toggle(1px, 3px) toggle(2px, 4px)", reconstructing it from
> the longhands, but having multiple toggles() isn't valid.

No, because toggle() has to be the only component in the value.

> It's not straightforward to reconstruct "toggle(1px 2px, 3px 4px)"
> from the longhands.
>
> Also it would be tricky in cases like this:
>
>    p { margin-top: toggle(1px, 2px);
>        margin-right: toggle(3px, 4px, 5px);
>        margin-bottom: 0;
>        margin-left: 0; }
>
> If getting the value of "margin", should we have to return something like:
>
>    toggle(1px 3px 0 0, 2px 4px 0 0, 2px 5px 0 0)
>
> the repeated "2px" value padding out the list of margin-top values?

Yep!

> And what about this:
>
>    p { margin: toggle(1px 2px, 3px 4px, 1px 5px); }
>
> Should this decompose into:
>
>    margin-top: toggle(1px, 3px, 1px);
>    margin-right: toggle(2px, 4px, 5px);
>    ...
>
> where the margin-top toggling will really only switch between
> two values, not three?

I think that is indeed how it has to work...

Thanks for the horrible examples. :) I guess we'll just have
to put them in the spec.

~fantasai

Received on Saturday, 8 March 2014 01:03:40 UTC