[css-images-4] Saturate invalid cross-fade values

[0xekez]

Per the cross-fade spec:

The percentage represents how much of each image is retained when it is blended with the other images. The percentage must be between 0% and 100% inclusive; any other value is invalid (emphasis mine).

It would be nice to clarify what to do with an invalid value.

Currently both Safari and Chrome handle invalid values by saturating them between 0 and 100 percent. For example, using their older, implemented syntax:

-webkit-cross-fade(
url('https://mdn.mozillademos.org/files/8543/br.png'),
url('https://mdn.mozillademos.org/files/8545/tr.png'),
-50%)

has a computed value of

-webkit-cross-fade(
url('https://mdn.mozillademos.org/files/8543/br.png'),
url('https://mdn.mozillademos.org/files/8545/tr.png'),
0)

We should consider standardizing this behavior or specifying something else if that doesn't seem reasonable.

[tabatkins]

"Invalid" has a well-defined meaning in CSS; a property with an invalid value is ignored. Chrome/Safari are buggy here. (This function predates the WK/Chrome fork, so they're both buggy due to the shared initial implementation.)

[0xekez]

Interesting. Thanks for the information. I actually didn't know that they shared an implementation. Is that to say that the standard would require that a cross-fade with an invalid percentage is completely ignored or that it does something like below?

cross-fade(blue 110%, red)
/* is equivalent to */
cross-fade(blue, red)

[tabatkins]

Completely ignored; it makes the property invalid, so the property gets dropped at parse-time. (Or, in some cases, becomes "invalid at computed-value time" and set to the initial or inherited value.)

[emilio]

Hmm, percentages in filter functions are clamped to a hundred rather than rejected at parse time...