Skip to content
Permalink
Browse files
[web-animations] support blending of mismatched filter lists
https://bugs.webkit.org/show_bug.cgi?id=248270

Reviewed by Simon Fraser.

We would fail to blend when filter lists mismatch and instead always fall back to the "to" value.

Instead of the matching filter functions on KeyframeEffect, we implement the specification for when
blending is supported in PropertyWrapperFilter::canInterpolate() such that we correctly identify
more discrete cases.

* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-002-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-003-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation-expected.txt:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::blendFunc):
* Source/WebCore/animation/CSSPropertyBlendingClient.h:
* Source/WebCore/animation/KeyframeEffect.cpp:
(WebCore::KeyframeEffect::setBlendingKeyframes):
(WebCore::KeyframeEffect::checkForMatchingFilterFunctionLists const): Deleted.
(WebCore::KeyframeEffect::checkForMatchingFilterFunctionLists): Deleted.
(WebCore::KeyframeEffect::checkForMatchingBackdropFilterFunctionLists): Deleted.
(WebCore::KeyframeEffect::checkForMatchingColorFilterFunctionLists): Deleted.
* Source/WebCore/animation/KeyframeEffect.h:

Canonical link: https://commits.webkit.org/256975@main
  • Loading branch information
graouts committed Nov 23, 2022
1 parent a5ff1bc commit e77c6ec7d3fe383255e32ab058d5844289fabbfb
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 160 deletions.
@@ -23,30 +23,30 @@ PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(1
PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(180deg)] at (0.5) should be [opacity(0.75) hue-rotate(90deg)]
PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(180deg)] at (1) should be [opacity(0.5) hue-rotate(180deg)]
PASS Web Animations: property <filter> from [none] to [opacity(0.5) hue-rotate(180deg)] at (1.5) should be [opacity(0.25) hue-rotate(270deg)]
FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
FAIL CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
PASS CSS Transitions: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
FAIL CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
PASS CSS Transitions with transition: all: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
FAIL CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)] assert_equals: expected "blur ( 4px ) hue - rotate ( - 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)] assert_equals: expected "blur ( 6px ) hue - rotate ( 0deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)] assert_equals: expected "blur ( 7px ) hue - rotate ( 45deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)] assert_equals: expected "blur ( 8px ) hue - rotate ( 90deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
PASS CSS Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (-0.5) should be [blur(4px) hue-rotate(-90deg)]
PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0) should be [blur(6px) hue-rotate(0deg)]
PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.25) should be [blur(7px) hue-rotate(45deg)]
PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (0.5) should be [blur(8px) hue-rotate(90deg)]
PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1) should be [blur(10px) hue-rotate(180deg)]
FAIL Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)] assert_equals: expected "blur ( 12px ) hue - rotate ( 270deg ) " but got "blur ( 10px ) hue - rotate ( 180deg ) "
PASS Web Animations: property <filter> from [blur(6px)] to [blur(10px) hue-rotate(180deg)] at (1.5) should be [blur(12px) hue-rotate(270deg)]
PASS CSS Transitions: property <filter> from [none] to [hue-rotate(180deg)] at (-0.5) should be [hue-rotate(-90deg)]
PASS CSS Transitions: property <filter> from [none] to [hue-rotate(180deg)] at (0) should be [hue-rotate(0deg)]
PASS CSS Transitions: property <filter> from [none] to [hue-rotate(180deg)] at (0.25) should be [hue-rotate(45deg)]
@@ -133,16 +133,16 @@ PASS CSS Transitions with transition: all: property <filter> from [grayscale(0)
PASS CSS Transitions with transition: all: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.6) should be [blur(10px)]
PASS CSS Transitions with transition: all: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1) should be [blur(10px)]
PASS CSS Transitions with transition: all: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1.5) should be [blur(10px)]
FAIL CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
FAIL CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
FAIL CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)]
PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)]
PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)]
PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.5) should be [blur(10px)]
PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.6) should be [blur(10px)]
PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1) should be [blur(10px)]
PASS CSS Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1.5) should be [blur(10px)]
FAIL Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
FAIL Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
FAIL Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)] assert_equals: expected "grayscale ( 0 ) blur ( 0px ) " but got "blur ( 10px ) "
PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (-0.3) should be [grayscale(0) blur(0px)]
PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0) should be [grayscale(0) blur(0px)]
PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.3) should be [grayscale(0) blur(0px)]
PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.5) should be [blur(10px)]
PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (0.6) should be [blur(10px)]
PASS Web Animations: property <filter> from [grayscale(0) blur(0px)] to [blur(10px)] at (1) should be [blur(10px)]
@@ -241,16 +241,16 @@ PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilt
PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.6) should be [blur(5px)]
PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1) should be [blur(5px)]
PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1.5) should be [blur(5px)]
FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")]
PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")]
PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")]
PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.5) should be [blur(5px)]
PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.6) should be [blur(5px)]
PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1) should be [blur(5px)]
PASS CSS Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1.5) should be [blur(5px)]
FAIL Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
FAIL Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
FAIL Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")] assert_equals: expected "url ( \" # svgfilter \" ) " but got "blur ( 5px ) "
PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [url("#svgfilter")]
PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [url("#svgfilter")]
PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [url("#svgfilter")]
PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.5) should be [blur(5px)]
PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.6) should be [blur(5px)]
PASS Web Animations: property <filter> from [url("#svgfilter")] to [blur(5px)] at (1) should be [blur(5px)]
@@ -244,9 +244,9 @@ FAIL filter: hue-rotate function with different unit(deg -> rad) assert_equals:
PASS filter: drop-shadow function
PASS filter: percentage or numeric-specifiable functions (number value)
PASS filter: percentage or numeric-specifiable functions (percentage value)
FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 1 assert_equals: The value should be grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5) at 500ms expected "grayscale(0.5) brightness(0.5) contrast(0.5) opacity(0.5) saturate(0.5)" but got "grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)"
FAIL filter: interpolate different length of filter-function-list with function which lacuna value is 0 assert_equals: The value should be opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px) at 500ms expected "opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)" but got "opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)"
FAIL filter: interpolate different length of filter-function-list with drop-shadow function assert_equals: The value should be blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px) at 500ms expected "blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)" but got "blur(10px) drop-shadow(rgba(0, 0, 255, 0.8) 10px 10px 10px)"
PASS filter: interpolate different length of filter-function-list with function which lacuna value is 1
PASS filter: interpolate different length of filter-function-list with function which lacuna value is 0
PASS filter: interpolate different length of filter-function-list with drop-shadow function
PASS filter: interpolate from none
PASS filter: url function (interpoalte as discrete)
PASS flex-basis (type: lengthPercentageOrCalc) has testInterpolation function
@@ -15,8 +15,8 @@ PASS iteration composition of filter brightness for different unit animation
PASS iteration composition of filter brightness animation
PASS iteration composition of filter drop-shadow animation
PASS iteration composition of same filter list animation
FAIL iteration composition of discrete filter list because of mismatch of the order assert_equals: Animated filter list at 0s of the third iteration expected "brightness(1) contrast(1)" but got "contrast(2) brightness(2)"
FAIL iteration composition of different length filter list animation assert_equals: Animated filter list at 50s of the first iteration expected "sepia(0.5) contrast(1.5)" but got "sepia(1) contrast(2)"
PASS iteration composition of discrete filter list because of mismatch of the order
FAIL iteration composition of different length filter list animation assert_equals: Animated filter list at 0s of the third iteration expected "sepia(1) contrast(3)" but got "sepia(1) contrast(4)"
PASS iteration composition of transform(rotate) animation
PASS iteration composition of transform: [ scale(0), scale(1) ] animation
PASS iteration composition of transform: [ scale(1), scale(2) ] animation

0 comments on commit e77c6ec

Please sign in to comment.