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

On Aug 18, 2013, at 12:06 AM, Dirk Schulze <dschulze@adobe.com> wrote:

> 
> On Aug 17, 2013, at 8:01 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
>> 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.
> 
> A solution for that could be the syntax of 'fill' and 'stroke'. The current syntax seems just to support interpolation from image to color, but not color to image.
> 
> Something like cross-fade(<image> <color>?, <image> <color>?, <percentage> | <number>) would be more powerful.

Actually it is either or both. If both are specified, the color is just the fallback.

> 
> 
>> 
>> The new grammar's defaulting behavior also makes that "fade out"
>> behavior trivial - you just leave off the second argument.  That seems
>> pretty useful.
> 
> But what about fade in?
> 
>> 
>> 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> ]? )
> 
> Well, you could simple nest them.
> 
>> 
>> 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.
> 
> I wouldn't fight for the fancy animation :)
> 
>> 
>>> 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.  ^_^
> 
> Always to your service ;)
> 
> Greetings,
> Dirk
> 
>> 
>> ~TJ
>> 
>

Received on Saturday, 17 August 2013 22:32:29 UTC