Re: [css3-images] Order of color-stop fixup

On Fri, Aug 12, 2011 at 5:05 AM, Brian Manthos <brianman@microsoft.com>wrote:

>  Interpolate after knowing container size information rather than
> before...
>

Obviously I didn't explain the example clearly enough. Here's the CSS again.

.box {
  width: 100px;
  height: 100px;
  background: radial-gradient(center, ellipse contain, red, blue);
  -webkit-transition-property: width, height, background;
  -webkit-transition-duration: 1s, 1s, 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background: -webkit-radial-gradient(center, ellipse contain, blue, black);
}

The only data of interest here is the gradient size. At the beginning of the
interpolation (unhovered), it's 50px (the ellipse is in the center of a
100px x 100px square and is contained within that square). After 2 seconds
(fully hovered) it's 100px.

If you use render-time interpolation, resolving sizes down to pixel values
before interpolation, then at 50% the size of this ellipse must be 75px
(50px x 0.5 + 100px x 0.5). However, 50% is 1 second into the animation, at
which point the box size is 200px x 200px, which means that halfway between
the gradient's interpolation it does not match the "contain" requirement,
even though the gradient has interpolated from "contain" to "contain". This
in turn means that the gradient is not a "contain" gradient at any point
during the interpolation except for the beginning and end.

I'm just not happy for an interpolation component that is the same at the
beginning and end of the interpolation to violate its specification
mid-interpolation. That would be something like saying that interpolating
between rgb(255, 0, 0) and rgb(255, 0, 255) could potentially have rgb(200,
27, 128) as a midpoint value.

Cheers,
    -Shane

**
>
> -Brian****
>
> ** **
>
> *From:* Shane Stephens [mailto:shans@google.com]
> *Sent:* Friday, August 12, 2011 4:55 AM
>
> *To:* Brian Manthos
> *Cc:* Tab Atkins Jr.; www-style list
> *Subject:* Re: [css3-images] Order of color-stop fixup****
>
>  ** **
>
> ** **
>
> On Thu, Aug 11, 2011 at 10:46 PM, Brian Manthos <brianman@microsoft.com>
> wrote:****
>
> It seems unnecessary and error-prone to do the interpolation twice, in
> steps (1) and (3).****
>
> ** **
>
> OK, then can you come up with an alternative approach that still conserves
> "contain" in the example I provided?****
>
> ** **
>
> Cheers,****
>
>     -Shane****
>
>  ****
>
>   ****
>
> *From:* Shane Stephens [mailto:shans@google.com] ****
>
> *Sent:* Thursday, August 11, 2011 9:18 PM
> *To:* Brian Manthos****
>
> *Cc:* Tab Atkins Jr.; www-style list****
>
>
> *Subject:* Re: [css3-images] Order of color-stop fixup****
>
>  ****
>
> ...****
>
> Interpolating container-sensitive properties is still possible, it just
> takes more work. I outlined how to do it in my previous email, but here it
> is again:****
>
> (1) store non-resolved start and end values as part of the interpolated
> result (e.g. [cover 30%, contain 70%] is the result of a 30% interpolation
> between a cover gradient and a contain gradient)****
>
> (2) resolve start and end values against current size of container****
>
> (3) interpolate resolved values****
>
> ...****
>
>  ** **
>