[web-animations] filter values containing a url() should animate disc…

…retely

https://bugs.webkit.org/show_bug.cgi?id=248263

Reviewed by Tim Nguyen.

We determine when a filter list contains url() and animate discretely in that case.
We also simply return either the "from" or "to" value when animating discretely.

* LayoutTests/TestExpectations:
* 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:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::blendFilterOperations):

Canonical link: https://commits.webkit.org/256970@main

LayoutTests/TestExpectations

@@ -5176,8 +5176,6 @@ webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-tex
 
 
 # css/filter-effects
-webkit.org/b/235000 [ Debug ] imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-003.html [ Skip ]
-
 imported/w3c/web-platform-tests/css/filter-effects/backdrop-filter-basic-background-color.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/filter-effects/backdrop-filter-basic-opacity-2.html [ ImageOnlyFailure ]
 imported/w3c/web-platform-tests/css/filter-effects/backdrop-filter-basic.html [ ImageOnlyFailure ]

LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/animation/filter-interpolation-003-expected.txt

@@ -199,34 +199,34 @@ PASS Web Animations: property <filter> from [none] to [sepia(1)] at (0) should b
 PASS Web Animations: property <filter> from [none] to [sepia(1)] at (0.5) should be [sepia(0.5)]
 PASS Web Animations: property <filter> from [none] to [sepia(1)] at (1) should be [sepia(1)]
 PASS Web Animations: property <filter> from [none] to [sepia(1)] at (1.5) should be [sepia(1)]
-FAIL CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (-0.3) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0.3) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (-0.3) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0.3) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none] assert_equals: expected "none " but got "( ) "
+PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (-0.3) should be [none]
+PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0) should be [none]
+PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0.3) should be [none]
+PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none]
+PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none]
+PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none]
+PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none]
+PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (-0.3) should be [none]
+PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0) should be [none]
+PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0.3) should be [none]
+PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none]
+PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none]
+PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none]
+PASS CSS Transitions with transition: all: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none]
 PASS CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (-0.3) should be [url("#svgfilter")]
 PASS CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (0) should be [url("#svgfilter")]
 PASS CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (0.3) should be [url("#svgfilter")]
-FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none] assert_equals: expected "none " but got "( ) "
+PASS CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none]
+PASS CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none]
+PASS CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none]
+PASS CSS Animations: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none]
 PASS Web Animations: property <filter> from [url("#svgfilter")] to [none] at (-0.3) should be [url("#svgfilter")]
 PASS Web Animations: property <filter> from [url("#svgfilter")] to [none] at (0) should be [url("#svgfilter")]
 PASS Web Animations: property <filter> from [url("#svgfilter")] to [none] at (0.3) should be [url("#svgfilter")]
-FAIL Web Animations: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none] assert_equals: expected "none " but got "url ( \" # svgfilter \" ) "
-FAIL Web Animations: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL Web Animations: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none] assert_equals: expected "none " but got "( ) "
-FAIL Web Animations: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none] assert_equals: expected "none " but got "( ) "
+PASS Web Animations: property <filter> from [url("#svgfilter")] to [none] at (0.5) should be [none]
+PASS Web Animations: property <filter> from [url("#svgfilter")] to [none] at (0.6) should be [none]
+PASS Web Animations: property <filter> from [url("#svgfilter")] to [none] at (1) should be [none]
+PASS Web Animations: property <filter> from [url("#svgfilter")] to [none] at (1.5) should be [none]
 PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [blur(5px)] at (-0.3) should be [blur(5px)]
 PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0) should be [blur(5px)]
 PASS CSS Transitions: property <filter> from [url("#svgfilter")] to [blur(5px)] at (0.3) should be [blur(5px)]

LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-001-expected.txt

@@ -248,7 +248,7 @@ FAIL filter: interpolate different length of filter-function-list with function
 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 from none
-FAIL filter: url function (interpoalte as discrete) assert_equals: The value should be blur(0px) url("#f1") at 499ms expected "blur(0px) url(\"#f1\")" but got "blur(4.99px) url(\"#f1\")"
+PASS filter: url function (interpoalte as discrete)
 PASS flex-basis (type: lengthPercentageOrCalc) has testInterpolation function
 PASS flex-basis supports animating as a length
 PASS flex-basis supports animating as a length of rem

Source/WebCore/animation/CSSPropertyAnimation.cpp

@@ -338,6 +338,11 @@ static inline FilterOperations blendFilterOperations(const FilterOperations& fro
         return resultOperations;
     }
 
+    if (context.isDiscrete) {
+        ASSERT(!context.progress || context.progress == 1.0);
+        return context.progress ? to : from;
+    }
+
     FilterOperations result;
     size_t fromSize = from.operations().size();
     size_t toSize = to.operations().size();
@@ -1428,6 +1433,17 @@ class PropertyWrapperFilter final : public PropertyWrapper<const FilterOperation
             ;
     }
 
+    bool canInterpolate(const RenderStyle& from, const RenderStyle& to, CompositeOperation) const final
+    {
+        // https://drafts.fxtf.org/filter-effects/#interpolation-of-filters
+        auto containsReference = [](auto& filterOperations) {
+            return filterOperations.operations().findIf([](auto& filterOperation) {
+                return filterOperation->type() == FilterOperation::OperationType::REFERENCE;
+            }) != notFound;
+        };
+        return !containsReference(from.filter()) && !containsReference(to.filter());
+    }
+
     void blend(RenderStyle& destination, const RenderStyle& from, const RenderStyle& to, const CSSPropertyBlendingContext& context) const final
     {
         (destination.*m_setter)(blendFunc(value(from), value(to), context, property()));