Re: [css-images] cross-fade() interpolation and syntax

On Sat, Aug 17, 2013 at 6:12 AM, Dirk Schulze <dschulze@adobe.com> wrote:
> Hi,
>
> I have a question to the syntax (1) and interpolation (2) of the cross-fade image function.
>
> 1) The currently specified syntax of the CSS Image function cross-fade() is[1]:
>
>         cross-fade( <percentage>? <image> [, <image> | <color> ]? )
>
> while WebKit and Blink use:
>
>         cross-fade(<image>, <image>, <percentage> | <number>)
>
> WebKit and Blink do not have optional arguments and do not support fallback colors. While fallback colors are certainly a good idea, I think the general syntax currently used in WebKit (and in a previous state of the spec?) looks more logical. Of course this is a matter of opinion, but maybe worth a discussion.

WebKit and Blink implemented the old grammar - we changed it a while ago.

I think there are good arguments for the current grammar.  For one,
the old grammar only allowed fading to a color by using "image(color)"
to generate a solid-color image.  That's bad, because the size of the
color-image is the image positioning area, which is probably different
from the size of the source image, which would cause an annoying size
change as you interpolated.  I think this is an important use-case so
people can fade to "transparent" to simply "fade out" an image.  The
new syntax's ability to take a color directly solves this by not
changing the size of the source image.

The new grammar's defaulting behavior also makes that "fade out"
behavior trivial - you just leave off the second argument.  That seems
pretty useful.

Finally, the new grammar is extensible to fading between more than two
images - we can just change the grammar to:

cross-fade( [<percentage>? <image>]# [, <image> | <color> ]? )

and then normalize the percentages if they add up to more than 100%.

> 2) The interpolation of cross-fade is specified by:
>
> ""If both the starting and ending images are cross-fade()s which differ only by by their <percentage>, they must be interpolated by interpolating their <percentage>. Otherwise, they must be interpolated as generic <image>s.""[2]
> typo: s/by by/by/
>
> The question is what "differ only by by their <percentage>" means. Following animation example (WebKit/Blink syntax) with
> from:
>         cross-fade(url(1.png), cross-fade(url(1.png), url(2.png), 20%), 0%);
>
> and to:
>         cross-fade(url(1.png), cross-fade(url(1.png), url(2.png), 80%), 0%);
>
> The second image argument is a cross-fade image function as well, that just differs on the percentage. Are these images considered to be different? So does the implementation need to fallback to generic <image> fading for the whole value? Speaking as an implementer I would be in favor for that, but I am not sure if that is the intention of the specification text. The same for other generated images like linear-gradient and radial-gradient that might have different color offsets. Maybe a little example in the spec could help to clarify that.

I can go either way.  As currently written, the spec rules out fancy
interpolation for your example - you'd have to fall back to simple
<image> interpolation.

However, we could change it so that when interpolating two
cross-fade()s, you interpolate the percentage *and* each source image.
 This would have identical behavior for the case the spec already
covers, but would also opt your example into fancy interpolation as
well.

> PS: I really like the paragraph symbol next to the headlines in the spec. I think that is really useful.

Automatic feature of Bikeshed, yet another inducement to switch
yourself over.  ^_^

~TJ

Received on Saturday, 17 August 2013 18:02:26 UTC