[css3-values] using toggle() in shorthands

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?

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);

I don't think the spec says to do this, though.  The alternative is to 
have something like Variables' "pending variable-substitution value", 
but it would be good to avoid this if possible.

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


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?

Received on Monday, 30 September 2013 06:56:28 UTC