Re: [css-transitions]: Extend CSS property list

On Wednesday 2015-01-28 17:28 +0100, Axel Dahmen wrote:
> The list properties to which transitions apply seems rather short.
> Important visual properties are missing:
> 
> ------------------
> background:
> ------------------
> 
> * backgrounds should fade if property rules can't be matched,
>   e. g. from "background: linear-gradient();" to "background:
> radial-gradient()"
> 
> * otherwise, if properties can be matched, animate these,
>   e.g. from "background: linear-gradient(black, black 20%, white;)"
> to "background: linear-gradient(black, black 80%, #888;)"
>   which would result in an in-between of "background:
> linear-gradient(black, black 50%, #ccc;)" at 50% of the transition

The transitions spec is intended to give a baseline for existing
properties; other specs, such as css-images, will add further
behavior for their properties (existing and new) in the future.

In particular, I think animation of gradients is part of
http://dev.w3.org/csswg/css-images-3/#interpolation

> ------------------
> box-shadow:
> ------------------
> 
> * if the number of shadows defined for a box-shadow rule won't match,
>    replace each missing shadow with "[inset] 0 0 0 0 rgba(0,0,0,0)",
>    animate each of the given shadows then separately,
>       e.g. from "box-shadow: 1ex 1ex 1ex 0 rgba(255,0,0,.5), inset
> 1ex 1ex 1ex 0 rgba(0,0,255,.5)"
>               to "box-shadow: -1ex -1ex -1ex 0 rgba(0,255,0,.5)"
>       would result in first extending the second box-shadow definition to:
>               "box-shadow: -1ex -1ex -1ex 0 rgba(0,255,0,.5), inset
> 0 0 0 0 rgba(0,0,0,0)"
>       then "1ex 1ex 1ex 0 rgba(255,0,0,.5)" would be transitioned to
> "-1ex -1ex -1ex 0 rgba(0,255,0,.5)"
>       while simulatenously "inset 1ex 1ex 1ex 0 rgba(0,0,255,.5)"
> would be transitioned to
>       "inset 0 0 0 0 rgba(0,0,0,0)"

The spec already requires this.
http://dev.w3.org/csswg/css-transitions/#animtype-shadow-list says:
  # Each shadow in the list is interpolated via the color (as color)
  # component, and x, y, blur, and (when appropriate) spread (as
  # length) components. For each shadow, if both input shadows are
  # inset or both input shadows are not inset, then the interpolated
  # shadow must match the input shadows in that regard. If any pair
  # of input shadows has one inset and the other not inset, the
  # entire shadow-list is uninterpolable. If the lists of shadows
  # have different lengths, then the shorter list is padded at the
  # end with shadows whose color is transparent, all lengths are 0,
  # and whose inset (or not) matches the longer list.

-David

-- 
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)