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

I'd like to swap the order of (2) and (3) because:

* (3) can be done when the style is applied (i.e. you don't need to know the
box dimensions in order to evenly distribute stops), but (2) can only be
done at render time (percentage values resolve relative to the size of the
* webkit currently interpolates applied styles, not renderable styles (this
also means our implementation can't make use of the size of the container
while interpolating)
* it's difficult (not impossible, but difficult) to interpolate between an
implicitly placed stop and an explicitly placed stop, so it's nice to be
able to resolve implicitly placed stops before interpolating.

For example, interpolating between:

linear-gradient(red 20%, white 20px, blue, black 100%)
linear-gradient(red 0%, white 20%, blue 40%, black 100%)

If we need to defer spacing until we've resolved where the white stop is,
then in webkit we'd need to represent a 50% interpolation for the blue stop
as something like [auto@50%, 40%@50%] - i.e. a deferred interpolation
calculation of 50% between implicit placement and 40% placement. This then
needs to resolve at render time based on the current size of the container
and the location of the white and black stops (put blue halfway between
white and black, then interpolate halfway between that and the 40% point).
Of course if the container size is changing then it's not even the start
location of the blue stop that you're interpolating from but instead where
the start location would be if the container were the current size (it's
difficult to know how much this matters. I'll build a demo).

On the other hand, if we can space at apply time, then this turns into:
linear-gradient(red 20% + 0px, white 20px, blue 50% + 10px, black 100%)
linear-gradient(red 0%, white 20%, blue 40%, black 100%)

and we can then interpolate the blue stop at 50% as [45% + 5px], which is
simpler to calculate and represent. Of course, the white stop may well still
be shifted at render time because it's occluded by the red stop, but I'd
like that not to impact the position of the blue stop.

Hope this explains things a bit.


On Thu, Aug 11, 2011 at 4:29 PM, Tab Atkins Jr. <>wrote:

> On Thu, Aug 11, 2011 at 4:22 PM, Brian Manthos <>
> wrote:
> > Two corrections:
> > (1) Drop the e in the name. ;)
> !_!  I've misread your name this entire time somehow.
> > (2) I brought up an example suggesting we might want to be more explicit
> for calc.  I think the current rules are fine.
> Ah, I misunderstood the intent of your example.  (Brian had sent me an
> example where all of the color-stops were using calc() with lengths
> and percentages.)
> ~TJ

Received on Friday, 12 August 2011 01:05:01 UTC