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

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

From: Dirk Schulze <dschulze@adobe.com>
Date: Sat, 17 Aug 2013 06:12:00 -0700
To: www-style list <www-style@w3.org>
Message-ID: <3607BE90-D22C-4AE1-9CC7-DA99CA378578@adobe.com>

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.

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
	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.


[1] http://dev.w3.org/csswg/css-images/#funcdef-cross-fade
[2] http://dev.w3.org/csswg/css-images/#interpolating-image-combinations

PS: I really like the paragraph symbol next to the headlines in the spec. I think that is really useful.
Received on Saturday, 17 August 2013 13:12:30 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:33 UTC