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

"resolving sizes down to pixel values before interpolation"
We're missing each other apparently.

Resolve *nothing* before you have all the necessary data to do so.

-Brian

From: Shane Stephens [mailto:shans@google.com]
Sent: Friday, August 12, 2011 5:23 AM
To: Brian Manthos
Cc: Tab Atkins Jr.; www-style list
Subject: Re: [css3-images] Order of color-stop fixup


On Fri, Aug 12, 2011 at 5:05 AM, Brian Manthos <brianman@microsoft.com<mailto: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<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<mailto: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<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
...