[css-images] cross-fade() syntax doesn't match implemented webkit-cross-fade()

[csnardi]

According to the spec:

The syntax for cross-fade() is defined as:

cross-fade() = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>

However, the implementation of webkit-cross-fade() in Chrome/Safari has the percentage at the end, and a comma in between the percent and the image. Safari has also un-prefixed cross-fade(). I'm not sure what the relevant use of webkit-cross-fade()/cross-fade() is, but perhaps it would make sense to match the syntax to Safari/Chrome's current implementation as they are currently the only two implementations of cross-fade().

The current implementation in Safari would look like:

cross-fade(url(foo.png), url(bar.png), 20%)

And per the spec:

cross-fade(20% url(foo.png), url(bar.png))

[ewilligers]

A use case is animation interpolating between images.

Example: https://jsfiddle.net/ericwilligers/jLjn13c6/
Chrome: -webkit-cross-fade(url(".../foo.png"), url(".../bar.png"), 0.2)
Edge: none
Firefox: url(".../foo.png")
Safari: cross-fade(url(.../foo.png), url(.../bar.png), 0.2)

[csnardi]

It looks like this was changed in b2cc789 by @tabatkins, although I can't find if there was a reason for changing the grammar order.

[tabatkins]

Yes, the reason was to allow extension to >2 arguments, which we just resolved to do.