W3C home > Mailing lists > Public > www-style@w3.org > August 2011

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

From: Shane Stephens <shans@google.com>
Date: Thu, 11 Aug 2011 18:04:27 -0700
Message-ID: <CAGTfzwSZr_s5AnrpF=u503U-trJQJNs0i2PWJZm3+WEjuqE5=w@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Brian Manthos <brianman@microsoft.com>, www-style list <www-style@w3.org>
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
container).
* 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%)
and
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%)
and
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.

Cheers,
    -Shane

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

> On Thu, Aug 11, 2011 at 4:22 PM, Brian Manthos <brianman@microsoft.com>
> 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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:43 GMT