Attachment 339031 Details for Bug 185092 – Patch

[patch] Patch

bug-185092-20180427144039.patch (text/plain), 21.94 KB, created by Simon Fraser (smfr) on 2018-04-27 14:40:40 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2018-04-27 14:40:40 PDT

Size: 21.94 KB

patch

obsolete

>Subversion Revision: 231112
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index faf30ce591450b15297f3b4bf624574851646453..f14eeab24b936b8036b0afc05fbbc13c4d95c5b5 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,45 @@
>+2018-04-27  Simon Fraser  <simon.fraser@apple.com>
>+
>+        Implement animation for color-filter
>+        https://bugs.webkit.org/show_bug.cgi?id=185092
>+        rdar://problem/39773810
>+
>+        Reviewed by NOBODY (OOPS!).
>+        
>+        Implement animation of color-filter.
>+        
>+        This requires tracking whether the color-filter function lists match for both old and new
>+        animation code paths.
>+        
>+        The filter-related ProperyWappers in CSSPropertyAnimation are cleaned up to use a single wrapper,
>+        which has to pass the propertyID to the blend function so we know which "lists match" to check.
>+        This wrapper reports that its accelerated for filter and backdrop-filter, but not color-filter.
>+
>+        Test: css3/color-filters/color-filter-animation.html
>+
>+        * animation/CSSPropertyBlendingClient.h:
>+        * animation/KeyframeEffectReadOnly.cpp:
>+        (WebCore::KeyframeEffectReadOnly::setBlendingKeyframes):
>+        (WebCore::KeyframeEffectReadOnly::checkForMatchingColorFilterFunctionLists):
>+        * animation/KeyframeEffectReadOnly.h:
>+        * page/animation/AnimationBase.h:
>+        * page/animation/CSSPropertyAnimation.cpp:
>+        (WebCore::blendFunc):
>+        (WebCore::PropertyWrapperFilter::PropertyWrapperFilter):
>+        (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
>+        (WebCore::PropertyWrapperAcceleratedFilter::PropertyWrapperAcceleratedFilter): Deleted.
>+        (WebCore::PropertyWrapperAcceleratedBackdropFilter::PropertyWrapperAcceleratedBackdropFilter): Deleted.
>+        (WebCore::PropertyWrapperAcceleratedBackdropFilter::animationIsAccelerated const): Deleted.
>+        (WebCore::PropertyWrapperAcceleratedBackdropFilter::blend const): Deleted.
>+        * page/animation/ImplicitAnimation.cpp:
>+        (WebCore::ImplicitAnimation::reset):
>+        (WebCore::ImplicitAnimation::checkForMatchingColorFilterFunctionLists):
>+        * page/animation/ImplicitAnimation.h:
>+        * page/animation/KeyframeAnimation.cpp:
>+        (WebCore::KeyframeAnimation::KeyframeAnimation):
>+        (WebCore::KeyframeAnimation::checkForMatchingColorFilterFunctionLists):
>+        * page/animation/KeyframeAnimation.h:
>+
> 2018-04-27  Simon Fraser  <simon.fraser@apple.com>
> 
>         Refactor filter list checking code
>diff --git a/Source/WebCore/animation/CSSPropertyBlendingClient.h b/Source/WebCore/animation/CSSPropertyBlendingClient.h
>index 429c3bb1a7719c557aaa9d0daa0a4c19a45a9cca..0d7747ebcf1cb57a1e8b7cad2dc6b102ce68bf30 100644
>--- a/Source/WebCore/animation/CSSPropertyBlendingClient.h
>+++ b/Source/WebCore/animation/CSSPropertyBlendingClient.h
>@@ -41,6 +41,7 @@ public:
> #if ENABLE(FILTERS_LEVEL_2)
>     virtual bool backdropFilterFunctionListsMatch() const = 0;
> #endif
>+    virtual bool colorFilterFunctionListsMatch() const = 0;
> 
>     virtual ~CSSPropertyBlendingClient() = default;
> };
>diff --git a/Source/WebCore/animation/KeyframeEffectReadOnly.cpp b/Source/WebCore/animation/KeyframeEffectReadOnly.cpp
>index efad647bbd8841ee76aa46439d3c7bc5b4ad55c7..54fad5726e97920df6dc276827fd05399e8cd974 100644
>--- a/Source/WebCore/animation/KeyframeEffectReadOnly.cpp
>+++ b/Source/WebCore/animation/KeyframeEffectReadOnly.cpp
>@@ -724,6 +724,7 @@ void KeyframeEffectReadOnly::setBlendingKeyframes(KeyframeList& blendingKeyframe
> #if ENABLE(FILTERS_LEVEL_2)
>     checkForMatchingBackdropFilterFunctionLists();
> #endif
>+    checkForMatchingColorFilterFunctionLists();
> }
> 
> void KeyframeEffectReadOnly::checkForMatchingTransformFunctionLists()
>@@ -814,6 +815,13 @@ void KeyframeEffectReadOnly::checkForMatchingBackdropFilterFunctionLists()
> }
> #endif
> 
>+void KeyframeEffectReadOnly::checkForMatchingColorFilterFunctionLists()
>+{
>+    m_colorFilterFunctionListsMatch = checkForMatchingFilterFunctionLists(CSSPropertyColorFilter, [] (const RenderStyle& style) -> const FilterOperations& {
>+        return style.colorFilter();
>+    });
>+}
>+
> void KeyframeEffectReadOnly::computeDeclarativeAnimationBlendingKeyframes(const RenderStyle* oldStyle, const RenderStyle& newStyle)
> {
>     ASSERT(is<DeclarativeAnimation>(animation()));
>diff --git a/Source/WebCore/animation/KeyframeEffectReadOnly.h b/Source/WebCore/animation/KeyframeEffectReadOnly.h
>index 59d222938b23fc9639612397fa78ece50a3c3e8f..4cf835385bd8b2863c575b9ecc3eb9baf599246c 100644
>--- a/Source/WebCore/animation/KeyframeEffectReadOnly.h
>+++ b/Source/WebCore/animation/KeyframeEffectReadOnly.h
>@@ -111,6 +111,7 @@ public:
> #if ENABLE(FILTERS_LEVEL_2)
>     bool backdropFilterFunctionListsMatch() const override { return m_backdropFilterFunctionListsMatch; }
> #endif
>+    bool colorFilterFunctionListsMatch() const override { return m_colorFilterFunctionListsMatch; }
> 
>     void computeDeclarativeAnimationBlendingKeyframes(const RenderStyle* oldStyle, const RenderStyle& newStyle);
>     bool stylesWouldYieldNewCSSTransitionsBlendingKeyframes(const RenderStyle& oldStyle, const RenderStyle& newStyle) const;
>@@ -149,6 +150,7 @@ private:
> #if ENABLE(FILTERS_LEVEL_2)
>     void checkForMatchingBackdropFilterFunctionLists();
> #endif
>+    void checkForMatchingColorFilterFunctionLists();
> 
>     bool checkForMatchingFilterFunctionLists(CSSPropertyID, const std::function<const FilterOperations& (const RenderStyle&)>&) const;
> 
>@@ -162,6 +164,7 @@ private:
> #if ENABLE(FILTERS_LEVEL_2)
>     bool m_backdropFilterFunctionListsMatch { false };
> #endif
>+    bool m_colorFilterFunctionListsMatch { false };
> 
>     RefPtr<Element> m_target;
>     KeyframeList m_blendingKeyframes;
>diff --git a/Source/WebCore/page/animation/AnimationBase.h b/Source/WebCore/page/animation/AnimationBase.h
>index 4c733f1c405c1f0b2501c67c6ed89a7b58de14e9..b4d3743c950179cac20c2457bb0d168a1a6fe6f7 100644
>--- a/Source/WebCore/page/animation/AnimationBase.h
>+++ b/Source/WebCore/page/animation/AnimationBase.h
>@@ -186,6 +186,7 @@ public:
> #if ENABLE(FILTERS_LEVEL_2)
>     bool backdropFilterFunctionListsMatch() const override { return m_backdropFilterFunctionListsMatch; }
> #endif
>+    bool colorFilterFunctionListsMatch() const override { return m_colorFilterFunctionListsMatch; }
> 
>     // Freeze the animation; used by DumpRenderTree.
>     void freezeAtTime(double t);
>@@ -260,6 +261,7 @@ protected:
> #if ENABLE(FILTERS_LEVEL_2)
>     bool m_backdropFilterFunctionListsMatch { false };
> #endif
>+    bool m_colorFilterFunctionListsMatch { false };
> };
> 
> } // namespace WebCore
>diff --git a/Source/WebCore/page/animation/CSSPropertyAnimation.cpp b/Source/WebCore/page/animation/CSSPropertyAnimation.cpp
>index 7efcb54bc055eb3711c0b88d84638a789a28d076..165433a1556fef3b99cad4482e007cac2760d14c 100644
>--- a/Source/WebCore/page/animation/CSSPropertyAnimation.cpp
>+++ b/Source/WebCore/page/animation/CSSPropertyAnimation.cpp
>@@ -200,18 +200,30 @@ static inline FilterOperations blendFilterOperations(const CSSPropertyBlendingCl
>     return result;
> }
> 
>-static inline FilterOperations blendFunc(const CSSPropertyBlendingClient* anim, const FilterOperations& from, const FilterOperations& to, double progress, bool animatingBackdropFilter = false)
>+static inline FilterOperations blendFunc(const CSSPropertyBlendingClient* anim, const FilterOperations& from, const FilterOperations& to, double progress, CSSPropertyID propertyID = CSSPropertyFilter)
> {
>     FilterOperations result;
> 
>     // If we have a filter function list, use that to do a per-function animation.
>+    
>+    bool listsMatch = false;
>+    switch (propertyID) {
>+    case CSSPropertyFilter:
>+        listsMatch = anim->filterFunctionListsMatch();
>+        break;
> #if ENABLE(FILTERS_LEVEL_2)
>-    if ((!animatingBackdropFilter && anim->filterFunctionListsMatch()) || (animatingBackdropFilter && anim->backdropFilterFunctionListsMatch()))
>-#else
>-    UNUSED_PARAM(animatingBackdropFilter);
>-    if (anim->filterFunctionListsMatch())
>+    case CSSPropertyWebkitBackdropFilter:
>+        listsMatch = anim->backdropFilterFunctionListsMatch();
>+        break;
> #endif
>-
>+    case CSSPropertyColorFilter:
>+        listsMatch = anim->colorFilterFunctionListsMatch();
>+        break;
>+    default:
>+        break;
>+    }
>+    
>+    if (listsMatch)
>         result = blendFilterOperations(anim, from, to, progress);
>     else {
>         // If the filter function lists don't match, we could try to cross-fade, but don't yet have a way to represent that in CSS.
>@@ -670,40 +682,22 @@ public:
>     }
> };
> 
>-class PropertyWrapperAcceleratedFilter : public PropertyWrapper<const FilterOperations&> {
>+class PropertyWrapperFilter : public PropertyWrapper<const FilterOperations&> {
>     WTF_MAKE_FAST_ALLOCATED;
> public:
>-    PropertyWrapperAcceleratedFilter()
>-        : PropertyWrapper<const FilterOperations&>(CSSPropertyFilter, &RenderStyle::filter, &RenderStyle::setFilter)
>+    PropertyWrapperFilter(CSSPropertyID propertyID, const FilterOperations& (RenderStyle::*getter)() const, void (RenderStyle::*setter)(const FilterOperations&))
>+        : PropertyWrapper<const FilterOperations&>(propertyID, getter, setter)
>     {
>     }
> 
>-    bool animationIsAccelerated() const override { return true; }
>+    bool animationIsAccelerated() const override { return property() == CSSPropertyFilter || property() == CSSPropertyWebkitBackdropFilter; }
> 
>     void blend(const CSSPropertyBlendingClient* anim, RenderStyle* dst, const RenderStyle* a, const RenderStyle* b, double progress) const override
>     {
>-        dst->setFilter(blendFunc(anim, a->filter(), b->filter(), progress));
>+        (dst->*m_setter)(blendFunc(anim, (a->*PropertyWrapperGetter<const FilterOperations&>::m_getter)(), (b->*PropertyWrapperGetter<const FilterOperations&>::m_getter)(), progress, property()));
>     }
> };
> 
>-#if ENABLE(FILTERS_LEVEL_2)
>-class PropertyWrapperAcceleratedBackdropFilter : public PropertyWrapper<const FilterOperations&> {
>-    WTF_MAKE_FAST_ALLOCATED;
>-public:
>-    PropertyWrapperAcceleratedBackdropFilter()
>-        : PropertyWrapper<const FilterOperations&>(CSSPropertyWebkitBackdropFilter, &RenderStyle::backdropFilter, &RenderStyle::setBackdropFilter)
>-    {
>-    }
>-
>-    virtual bool animationIsAccelerated() const { return true; }
>-
>-    virtual void blend(const CSSPropertyBlendingClient* anim, RenderStyle* dst, const RenderStyle* a, const RenderStyle* b, double progress) const
>-    {
>-        dst->setBackdropFilter(blendFunc(anim, a->backdropFilter(), b->backdropFilter(), progress, true));
>-    }
>-};
>-#endif
>-
> static inline size_t shadowListLength(const ShadowData* shadow)
> {
>     size_t count;
>@@ -1558,10 +1552,13 @@ CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap()
> 
>         new PropertyWrapperAcceleratedOpacity(),
>         new PropertyWrapperAcceleratedTransform(),
>-        new PropertyWrapperAcceleratedFilter(),
>+        
>+        new PropertyWrapperFilter(CSSPropertyFilter, &RenderStyle::filter, &RenderStyle::setFilter),
> #if ENABLE(FILTERS_LEVEL_2)
>-        new PropertyWrapperAcceleratedBackdropFilter(),
>+        new PropertyWrapperFilter(CSSPropertyWebkitBackdropFilter, &RenderStyle::backdropFilter, &RenderStyle::setBackdropFilter),
> #endif
>+        new PropertyWrapperFilter(CSSPropertyColorFilter, &RenderStyle::colorFilter, &RenderStyle::setColorFilter),
>+
>         new PropertyWrapperClipPath(CSSPropertyWebkitClipPath, &RenderStyle::clipPath, &RenderStyle::setClipPath),
> 
>         new PropertyWrapperShape(CSSPropertyShapeOutside, &RenderStyle::shapeOutside, &RenderStyle::setShapeOutside),
>diff --git a/Source/WebCore/page/animation/ImplicitAnimation.cpp b/Source/WebCore/page/animation/ImplicitAnimation.cpp
>index c6c7d18f87963cb2a98b1217bf9bc607eb177685..080cfccdcc6808b0862f2aba70f58fe01389a4cd 100644
>--- a/Source/WebCore/page/animation/ImplicitAnimation.cpp
>+++ b/Source/WebCore/page/animation/ImplicitAnimation.cpp
>@@ -215,6 +215,7 @@ void ImplicitAnimation::reset(const RenderStyle& to, CompositeAnimation& composi
> #if ENABLE(FILTERS_LEVEL_2)
>     checkForMatchingBackdropFilterFunctionLists();
> #endif
>+    checkForMatchingColorFilterFunctionLists();
> }
> 
> void ImplicitAnimation::setOverridden(bool b)
>@@ -311,6 +312,16 @@ void ImplicitAnimation::checkForMatchingBackdropFilterFunctionLists()
> }
> #endif
> 
>+void ImplicitAnimation::checkForMatchingColorFilterFunctionLists()
>+{
>+    m_filterFunctionListsMatch = false;
>+
>+    if (!m_fromStyle || !m_toStyle)
>+        return;
>+
>+    m_colorFilterFunctionListsMatch = filterOperationsMatch(&m_fromStyle->colorFilter(), m_toStyle->colorFilter());
>+}
>+
> std::optional<Seconds> ImplicitAnimation::timeToNextService()
> {
>     std::optional<Seconds> t = AnimationBase::timeToNextService();
>diff --git a/Source/WebCore/page/animation/ImplicitAnimation.h b/Source/WebCore/page/animation/ImplicitAnimation.h
>index b28115cdae1d9c7dbaea710885ca208efe81a1ca..921ef780755cbfaf821c7456f280d59eb613bb53 100644
>--- a/Source/WebCore/page/animation/ImplicitAnimation.h
>+++ b/Source/WebCore/page/animation/ImplicitAnimation.h
>@@ -86,6 +86,7 @@ protected:
> #if ENABLE(FILTERS_LEVEL_2)
>     void checkForMatchingBackdropFilterFunctionLists();
> #endif
>+    void checkForMatchingColorFilterFunctionLists();
> 
> private:
>     ImplicitAnimation(const Animation&, CSSPropertyID, Element&, CompositeAnimation&, const RenderStyle&);
>diff --git a/Source/WebCore/page/animation/KeyframeAnimation.cpp b/Source/WebCore/page/animation/KeyframeAnimation.cpp
>index 564f489573d5408aff72e59500529a196b075815..73a6f38ae1880cce29c2754589924d9496de6dd6 100644
>--- a/Source/WebCore/page/animation/KeyframeAnimation.cpp
>+++ b/Source/WebCore/page/animation/KeyframeAnimation.cpp
>@@ -58,6 +58,8 @@ KeyframeAnimation::KeyframeAnimation(const Animation& animation, Element& elemen
> #if ENABLE(FILTERS_LEVEL_2)
>     checkForMatchingBackdropFilterFunctionLists();
> #endif
>+    checkForMatchingColorFilterFunctionLists();
>+
>     computeStackingContextImpact();
>     computeLayoutDependency();
> }
>@@ -493,6 +495,13 @@ void KeyframeAnimation::checkForMatchingBackdropFilterFunctionLists()
> }
> #endif
> 
>+void KeyframeAnimation::checkForMatchingColorFilterFunctionLists()
>+{
>+    m_colorFilterFunctionListsMatch = checkForMatchingFilterFunctionLists(CSSPropertyColorFilter, [] (const RenderStyle& style) -> const FilterOperations& {
>+        return style.colorFilter();
>+    });
>+}
>+
> std::optional<Seconds> KeyframeAnimation::timeToNextService()
> {
>     std::optional<Seconds> t = AnimationBase::timeToNextService();
>diff --git a/Source/WebCore/page/animation/KeyframeAnimation.h b/Source/WebCore/page/animation/KeyframeAnimation.h
>index 208aa6fed13c14863b8a03511f868591aa4f7b1c..d180c0e0baa67012f020faa9b5f4e500998a23e5 100644
>--- a/Source/WebCore/page/animation/KeyframeAnimation.h
>+++ b/Source/WebCore/page/animation/KeyframeAnimation.h
>@@ -91,6 +91,7 @@ protected:
> #if ENABLE(FILTERS_LEVEL_2)
>     void checkForMatchingBackdropFilterFunctionLists();
> #endif
>+    void checkForMatchingColorFilterFunctionLists();
>     bool checkForMatchingFilterFunctionLists(CSSPropertyID, const std::function<const FilterOperations& (const RenderStyle&)>&) const;
> 
> private:
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 465e8fafcc18d28e8cbb8c59a421c52c66a4ce29..a08bc2b12c0b897f31fd4bf8cf416ecb08405ec5 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,21 @@
>+2018-04-27  Simon Fraser  <simon.fraser@apple.com>
>+
>+        Implement animation for color-filter
>+        https://bugs.webkit.org/show_bug.cgi?id=185092
>+        rdar://problem/39773810
>+
>+        Reviewed by NOBODY (OOPS!).
>+        
>+        Fix the testing to recognize unprefixed filter, and color-filter.
>+        
>+        Add a color-filter animation test.
>+
>+        * animations/resources/animation-test-helpers.js:
>+        (getPropertyValue):
>+        (comparePropertyValue):
>+        * css3/color-filters/color-filter-animation-expected.txt: Added.
>+        * css3/color-filters/color-filter-animation.html: Added.
>+
> 2018-04-27  Christopher Reid  <chris.reid@sony.com>
> 
>         URL::appendEncodedHostName is using the deprecated uidna_IDNToASCII function
>diff --git a/LayoutTests/animations/resources/animation-test-helpers.js b/LayoutTests/animations/resources/animation-test-helpers.js
>index 85c98288474b31b31b40c95194dd68c4fc9952d8..aac905d20320d09cde41a501106121e84d908f24 100644
>--- a/LayoutTests/animations/resources/animation-test-helpers.js
>+++ b/LayoutTests/animations/resources/animation-test-helpers.js
>@@ -430,6 +430,8 @@ function getPropertyValue(property, elementId, iframeId)
>                || property == "listStyleImage"
>                || property == "webkitMaskImage"
>                || property == "webkitMaskBoxImage"
>+               || property == "filter"
>+               || property == "colorFilter"
>                || property == "webkitFilter"
>                || property == "webkitBackdropFilter"
>                || property == "webkitClipPath"
>@@ -469,7 +471,7 @@ function comparePropertyValue(property, computedValue, expectedValue, tolerance)
>                     break;
>             }
>         }
>-    } else if (property == "webkitFilter" || property == "webkitBackdropFilter") {
>+    } else if (property == "webkitFilter" || property == "webkitBackdropFilter" || property == "filter" || property == "colorFilter") {
>         var filterParameters = parseFilterFunctionList(computedValue);
>         var filter2Parameters = parseFilterFunctionList(expectedValue);
>         result = compareFilterFunctions(filterParameters, filter2Parameters, tolerance);
>diff --git a/LayoutTests/css3/color-filters/color-filter-animation-expected.txt b/LayoutTests/css3/color-filters/color-filter-animation-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..7bb0c879bdfbddcf6d1d9d2bd6c07ad8c6bf0d55
>--- /dev/null
>+++ b/LayoutTests/css3/color-filters/color-filter-animation-expected.txt
>@@ -0,0 +1,10 @@
>+       
>+PASS - "colorFilter" property for "grayscale-box" element at 1s saw something close to: grayscale(0.5)
>+PASS - "colorFilter" property for "sepia-box" element at 1s saw something close to: sepia(0.5)
>+PASS - "colorFilter" property for "saturate-box" element at 1s saw something close to: saturate(0.5)
>+PASS - "colorFilter" property for "huerotate-box" element at 1s saw something close to: hue-rotate(90deg)
>+PASS - "colorFilter" property for "invert-box" element at 1s saw something close to: invert(0.5)
>+PASS - "colorFilter" property for "opacity-box" element at 1s saw something close to: opacity(0.5)
>+PASS - "colorFilter" property for "brightness-box" element at 1s saw something close to: brightness(0.5)
>+PASS - "colorFilter" property for "contrast-box" element at 1s saw something close to: contrast(0.5)
>+
>diff --git a/LayoutTests/css3/color-filters/color-filter-animation.html b/LayoutTests/css3/color-filters/color-filter-animation.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..f1ed9fe4694ad91a43ad4fa5cfc3c8c69f5b0b48
>--- /dev/null
>+++ b/LayoutTests/css3/color-filters/color-filter-animation.html
>@@ -0,0 +1,119 @@
>+<!DOCTYPE html>
>+
>+<html>
>+<head>
>+  <style>
>+    .box {
>+        height: 100px;
>+        width: 100px;
>+        margin: 10px;
>+        background-color: blue;
>+        display: inline-block;
>+    }
>+
>+    #grayscale-box {
>+      animation: grayscale-anim 2s linear
>+    }
>+
>+    #sepia-box {
>+      animation: sepia-anim 2s linear
>+    }
>+
>+    #saturate-box {
>+      animation: saturate-anim 2s linear
>+    }
>+
>+    #huerotate-box {
>+      animation: huerotate-anim 2s linear
>+    }
>+
>+    #invert-box {
>+      animation: invert-anim 2s linear
>+    }
>+
>+    #opacity-box {
>+      animation: opacity-anim 2s linear
>+    }
>+
>+    #brightness-box {
>+      animation: brightness-anim 2s linear
>+    }
>+
>+    #contrast-box {
>+      animation: contrast-anim 2s linear
>+    }
>+
>+
>+    @keyframes grayscale-anim {
>+        from { color-filter: grayscale(0); }
>+        to   { color-filter: grayscale(1); }
>+    }
>+
>+    @keyframes sepia-anim {
>+        from { color-filter: sepia(0); }
>+        to   { color-filter: sepia(1); }
>+    }
>+
>+    @keyframes saturate-anim {
>+        from { color-filter: saturate(0); }
>+        to   { color-filter: saturate(1); }
>+    }
>+
>+    @keyframes huerotate-anim {
>+        from { color-filter: hue-rotate(0); }
>+        to   { color-filter: hue-rotate(180deg); }
>+    }
>+
>+    @keyframes invert-anim {
>+        from { color-filter: invert(0); }
>+        to   { color-filter: invert(1); }
>+    }
>+
>+    @keyframes opacity-anim {
>+        from { color-filter: opacity(1); }
>+        to   { color-filter: opacity(0); }
>+    }
>+
>+    @keyframes brightness-anim {
>+        from { color-filter: brightness(1); }
>+        to   { color-filter: brightness(0); }
>+    }
>+
>+    @keyframes contrast-anim {
>+        from { color-filter: contrast(1); }
>+        to   { color-filter: contrast(0); }
>+    }
>+
>+  </style>
>+  <script src="../../animations/resources/animation-test-helpers.js"></script>
>+  <script type="text/javascript">
>+    const expectedValues = [
>+      // [animation-name, time, element-id, property, expected-value, tolerance]
>+      ["grayscale-anim",  1, "grayscale-box", "colorFilter", 'grayscale(0.5)', 0.05],
>+      ["sepia-anim",  1, "sepia-box", "colorFilter", 'sepia(0.5)', 0.05],
>+      ["saturate-anim",  1, "saturate-box", "colorFilter", 'saturate(0.5)', 0.05],
>+      ["huerotate-anim",  1, "huerotate-box", "colorFilter", 'hue-rotate(90deg)', 2],
>+      ["invert-anim",  1, "invert-box", "colorFilter", 'invert(0.5)', 0.05],
>+      ["opacity-anim",  1, "opacity-box", "colorFilter", 'opacity(0.5)', 0.05],
>+      ["brightness-anim",  1, "brightness-box", "colorFilter", 'brightness(0.5)', 0.05],
>+      ["contrast-anim",  1, "contrast-box", "colorFilter", 'contrast(0.5)', 0.05],
>+    ];
>+    
>+    runAnimationTest(expectedValues);
>+  </script>
>+</head>
>+<body>
>+
>+<div class="box" id="grayscale-box"></div>
>+<div class="box" id="sepia-box"></div>
>+<div class="box" id="saturate-box"></div>
>+<div class="box" id="huerotate-box"></div>
>+<div class="box" id="invert-box"></div>
>+<div class="box" id="opacity-box"></div>
>+<div class="box" id="brightness-box"></div>
>+<div class="box" id="contrast-box"></div>
>+
>+<div id="result">
>+</div>
>+</body>
>+</html>

Actions: View | Formatted Diff | Diff

Attachments on bug 185092: 339031 | 339032