Bug 179942 – cross-fade(...) grammar/parsing does not match latest spec

• Status: NEW
• Component: Images

[Fredrik Söderquist]

Copied from https://bugs.webkit.org/show_bug.cgi?id=157632#c3 :
---

Webkit implementation of the grammar and the latest spec are not the same.

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

So we have to put the percentage in front of it, and remove the comma.

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

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

If WontFixing this, then please consider raising an issue with the spec to change to the currently implemented grammar.

[Radar WebKit Bug Importer]

<rdar://problem/35705284>

[Chris Nardi]

I raised a spec issue for this at https://github.com/w3c/csswg-drafts/issues/2234.

[Ahmad Saleem]

https://jsfiddle.net/ericwilligers/jLjn13c6/

_______

Safari 16.4:

cross-fade(url("https://example.com/foo.png"), url("https://example.com/bar.png"), 0.2)

Chrome Canary 114:

-webkit-cross-fade(url("https://example.com/foo.png"), url("https://example.com/bar.png"), 0.2)

Firefox Nightly 113:


url("https://example.com/foo.png")