filter functions should clamp during animation

• Component: CSS
• Status: RESOLVED WORKSFORME

[Eric Willigers]

Animate CSS filter functions grayscale, invert, opacity or sepia.
Use a bezier timing function that gives progress > 1.

https://jsfiddle.net/ericwilligers/bes3uyxz/

Or proposed WPT css/filter-effects/animation/filter-interpolation-004.html in
https://github.com/web-platform-tests/wpt/pull/17030/

Actual results:

grayscale(1.5)
invert(1.5)
opacity(1.5)
sepia(1.5)

Expected results:

grayscale(1)
invert(1)
opacity(1)
sepia(1)


Equivalent Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1557563


Note also that negative animation results are not clamped. None of the following should occur:
blur(-10px)
brightness(-1)
contrast(-1)
grayscale(-1)
invert(-1)
opacity(-1)
saturate(-1)

https://jsfiddle.net/ericwilligers/t3pmqbd1/

[Radar WebKit Bug Importer]

<rdar://problem/51511977>

[Sam Sneddon [:gsnedders]]

https://wpt.fyi/results/css/filter-effects/animation/filter-interpolation-004.html?label=master&label=experimental&aligned shows the above mentioned WPT test passing, so closing this out.