Skip to content
Permalink
Browse files
[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
  • Loading branch information
graouts committed Nov 23, 2022
1 parent 6dc0b32 commit 582bdb346c12768580df6f09484c5601789aa4ce
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 25 deletions.
@@ -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 ]
@@ -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)]
@@ -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
@@ -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()));

0 comments on commit 582bdb3

Please sign in to comment.