Animating some CSS filter values is wrong
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Dec 2011 23:19:24 +0000 (23:19 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Dec 2011 23:19:24 +0000 (23:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=75122

Source/WebCore:

Reviewed by Chris Marrin.

Fix some reversed filter animation behavior for brightness,
contrast and drop-shadow filters.

Test: css3/filters/filter-animation-from-none.html

* platform/graphics/filters/FilterOperation.cpp:
(WebCore::BasicComponentTransferFilterOperation::blend): Just use the global blend() function.
(WebCore::BasicComponentTransferFilterOperation::passthroughAmount): Add CONTRAST and BRIGHTNESS to the sswitch.
(WebCore::GammaFilterOperation::blend): Fix the ordering.
(WebCore::DropShadowFilterOperation::blend): Fix the ordering.

LayoutTests:

Reviewed by Chris Marrin.

Add a new test that exercises the "from none" code path.

Fix filter-animation.html, which used too-loose tolerance values
that resulted in some tests always passing.

* css3/filters/filter-animation-from-none-expected.txt: Added.
* css3/filters/filter-animation-from-none.html: Copied from LayoutTests/css3/filters/filter-animation.html.
* css3/filters/filter-animation.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@103586 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/filters/filter-animation-from-none-expected.txt [new file with mode: 0644]
LayoutTests/css3/filters/filter-animation-from-none.html [new file with mode: 0644]
LayoutTests/css3/filters/filter-animation.html
Source/WebCore/ChangeLog
Source/WebCore/platform/graphics/filters/FilterOperation.cpp

index ade7ab29d4ab23158a5832ecbc26771801e59720..4ee2d749eb1620bd6e3c9787de5326340f605597 100644 (file)
@@ -1,3 +1,19 @@
+2011-12-22  Simon Fraser  <simon.fraser@apple.com>
+
+        Animating some CSS filter values is wrong
+        https://bugs.webkit.org/show_bug.cgi?id=75122
+
+        Reviewed by Chris Marrin.
+        
+        Add a new test that exercises the "from none" code path.
+        
+        Fix filter-animation.html, which used too-loose tolerance values
+        that resulted in some tests always passing.
+
+        * css3/filters/filter-animation-from-none-expected.txt: Added.
+        * css3/filters/filter-animation-from-none.html: Copied from LayoutTests/css3/filters/filter-animation.html.
+        * css3/filters/filter-animation.html:
+
 2011-12-22  Ryosuke Niwa  <rniwa@webkit.org>
 
         Fix Chromium test expectation.
diff --git a/LayoutTests/css3/filters/filter-animation-from-none-expected.txt b/LayoutTests/css3/filters/filter-animation-from-none-expected.txt
new file mode 100644 (file)
index 0000000..0cda304
--- /dev/null
@@ -0,0 +1,11 @@
+        
+PASS - "webkitFilter" property for "grayscale-box" element at 0.5s saw something close to: grayscale(0.25)
+PASS - "webkitFilter" property for "sepia-box" element at 0.5s saw something close to: sepia(0.25)
+PASS - "webkitFilter" property for "saturate-box" element at 0.5s saw something close to: saturate(0.75)
+PASS - "webkitFilter" property for "huerotate-box" element at 0.5s saw something close to: huerotate(45deg)
+PASS - "webkitFilter" property for "invert-box" element at 0.5s saw something close to: invert(0.25)
+PASS - "webkitFilter" property for "opacity-box" element at 0.5s saw something close to: opacity(0.75)
+PASS - "webkitFilter" property for "brightness-box" element at 0.5s saw something close to: brightness(0.75)
+PASS - "webkitFilter" property for "contrast-box" element at 0.5s saw something close to: contrast(0.75)
+PASS - "webkitFilter" property for "blur-box" element at 0.5s saw something close to: blur(5px)
+
diff --git a/LayoutTests/css3/filters/filter-animation-from-none.html b/LayoutTests/css3/filters/filter-animation-from-none.html
new file mode 100644 (file)
index 0000000..af91735
--- /dev/null
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <style>
+    .box {
+        height: 100px;
+        width: 100px;
+        margin: 10px;
+        background-color: blue;
+        display: inline-block;
+    }
+
+    #grayscale-box {
+      -webkit-animation: grayscale-anim 2s linear
+    }
+
+    #sepia-box {
+      -webkit-animation: sepia-anim 2s linear
+    }
+
+    #saturate-box {
+      -webkit-animation: saturate-anim 2s linear
+    }
+
+    #huerotate-box {
+      -webkit-animation: huerotate-anim 2s linear
+    }
+
+    #invert-box {
+      -webkit-animation: invert-anim 2s linear
+    }
+
+    #opacity-box {
+      -webkit-animation: opacity-anim 2s linear
+    }
+
+    #brightness-box {
+      -webkit-animation: brightness-anim 2s linear
+    }
+
+    #contrast-box {
+      -webkit-animation: contrast-anim 2s linear
+    }
+
+    #blur-box {
+      -webkit-animation: blur-anim 2s linear
+    }
+
+    #dropshadow-box {
+      -webkit-animation: dropshadow-anim 2s linear
+    }
+
+
+    @-webkit-keyframes grayscale-anim {
+        from { }
+        to   { -webkit-filter: grayscale(1); }
+    }
+
+    @-webkit-keyframes sepia-anim {
+        from { }
+        to   { -webkit-filter: sepia(1); }
+    }
+
+    @-webkit-keyframes saturate-anim {
+        from { }
+        to   { -webkit-filter: saturate(0); }
+    }
+
+    @-webkit-keyframes huerotate-anim {
+        from { }
+        to   { -webkit-filter: hue-rotate(180deg); }
+    }
+
+    @-webkit-keyframes invert-anim {
+        from { }
+        to   { -webkit-filter: invert(1); }
+    }
+
+    @-webkit-keyframes opacity-anim {
+        from { }
+        to   { -webkit-filter: opacity(0); }
+    }
+
+    @-webkit-keyframes brightness-anim {
+        from { }
+        to   { -webkit-filter: brightness(0); }
+    }
+
+    @-webkit-keyframes contrast-anim {
+        from { }
+        to   { -webkit-filter: contrast(0); }
+    }
+
+    @-webkit-keyframes blur-anim {
+        from { }
+        to   { -webkit-filter: blur(20px); }
+    }
+
+    @-webkit-keyframes dropshadow-anim {
+        from { }
+        to   { -webkit-filter: drop-shadow(20px 32px 12px black)); }
+    }
+
+  </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",  0.5, "grayscale-box", "webkitFilter", 'grayscale(0.25)', 0.05],
+      ["sepia-anim",  0.5, "sepia-box", "webkitFilter", 'sepia(0.25)', 0.05],
+      ["saturate-anim",  0.5, "saturate-box", "webkitFilter", 'saturate(0.75)', 0.05],
+      ["huerotate-anim",  0.5, "huerotate-box", "webkitFilter", 'huerotate(45deg)', 3],
+      ["invert-anim",  0.5, "invert-box", "webkitFilter", 'invert(0.25)', 0.05],
+      ["opacity-anim",  0.5, "opacity-box", "webkitFilter", 'opacity(0.75)', 0.05],
+      ["brightness-anim",  0.5, "brightness-box", "webkitFilter", 'brightness(0.75)', 0.05],
+      ["contrast-anim",  0.5, "contrast-box", "webkitFilter", 'contrast(0.75)', 0.05],
+      ["blur-anim",  0.5, "blur-box", "webkitFilter", 'blur(5px)', 1],
+      // FIXME when we implement computed filter style for drop-shadow.
+      // ["dropshadow-anim",  1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.25) 5px 8px 3px )', 2],
+    ];
+    
+    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 class="box" id="blur-box"></div>
+<!-- <div class="box" id="dropshadow-box"></div> -->
+
+<div id="result">
+</div>
+</body>
+</html>
index c91ff340d7c8ae9915b022e4ec2ef19ea588b39f..db504041b12f12ccbed5eb3c4c0f3ff30c28b3c7 100644 (file)
         to   { -webkit-filter: drop-shadow(20px 30px 10px black)); }
     }
 
-
-
-
-
   </style>
   <script src="../../animations/resources/animation-test-helpers.js"></script>
   <script type="text/javascript">
     const expectedValues = [
-      // [time, element-id, property, expected-value, tolerance]
+      // [animation-name, time, element-id, property, expected-value, tolerance]
       ["grayscale-anim",  1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05],
       ["sepia-anim",  1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05],
       ["saturate-anim",  1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05],
       ["huerotate-anim",  1, "huerotate-box", "webkitFilter", 'huerotate(90deg)', 2],
-      ["invert-anim",  1, "invert-box", "webkitFilter", 'invert(0.5)', 2],
-      ["opacity-anim",  1, "opacity-box", "webkitFilter", 'opacity(0.5)', 2],
-      ["brightness-anim",  1, "brightness-box", "webkitFilter", 'brightness(0.5)', 2],
-      ["contrast-anim",  1, "contrast-box", "webkitFilter", 'contrast(0.5)', 2],
-      ["blur-anim",  1, "blur-box", "webkitFilter", 'blur(10px)', 2],
-      // FIXME when we implement drop-shadow.
+      ["invert-anim",  1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05],
+      ["opacity-anim",  1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05],
+      ["brightness-anim",  1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05],
+      ["contrast-anim",  1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05],
+      ["blur-anim",  1, "blur-box", "webkitFilter", 'blur(10px)', 1],
+      // FIXME when we implement computed filter style for drop-shadow.
       // ["dropshadow-anim",  1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2],
     ];
     
-    function setupTest()
-    {
-    }
-    
     runAnimationTest(expectedValues);
   </script>
 </head>
index de3e8a5a1af672909de86a74f6985f527796272b..8019b7b58b36fe2585e52843f86d24288d4963ca 100644 (file)
@@ -1,3 +1,21 @@
+2011-12-22  Simon Fraser  <simon.fraser@apple.com>
+
+        Animating some CSS filter values is wrong
+        https://bugs.webkit.org/show_bug.cgi?id=75122
+
+        Reviewed by Chris Marrin.
+        
+        Fix some reversed filter animation behavior for brightness,
+        contrast and drop-shadow filters.
+
+        Test: css3/filters/filter-animation-from-none.html
+
+        * platform/graphics/filters/FilterOperation.cpp:
+        (WebCore::BasicComponentTransferFilterOperation::blend): Just use the global blend() function.
+        (WebCore::BasicComponentTransferFilterOperation::passthroughAmount): Add CONTRAST and BRIGHTNESS to the sswitch.
+        (WebCore::GammaFilterOperation::blend): Fix the ordering.
+        (WebCore::DropShadowFilterOperation::blend): Fix the ordering.
+
 2011-12-22  Chris Rogers  <crogers@google.com>
 
         Fix mac build caused by improper include of "Locker.h"
index 96f4acdc24ad4709945e4b56195a93129935657e..5de6ec0aa115435d95433cb065d9dbad2127d4c9 100644 (file)
@@ -70,7 +70,7 @@ PassRefPtr<FilterOperation> BasicComponentTransferFilterOperation::blend(const F
         
     const BasicComponentTransferFilterOperation* fromOp = static_cast<const BasicComponentTransferFilterOperation*>(from);
     double fromAmount = fromOp ? fromOp->amount() : passthroughAmount();
-    return BasicComponentTransferFilterOperation::create(fromAmount + (m_amount - fromAmount) * progress, m_type);
+    return BasicComponentTransferFilterOperation::create(WebCore::blend(fromAmount, m_amount, progress), m_type);
 }
 
 double BasicComponentTransferFilterOperation::passthroughAmount() const
@@ -80,6 +80,10 @@ double BasicComponentTransferFilterOperation::passthroughAmount() const
         return 1;
     case INVERT:
         return 0;
+    case CONTRAST:
+        return 1;
+    case BRIGHTNESS:
+        return 1;
     default:
         ASSERT_NOT_REACHED();
         return 0;
@@ -92,15 +96,19 @@ PassRefPtr<FilterOperation> GammaFilterOperation::blend(const FilterOperation* f
         return this;
     
     if (blendToPassthrough)
-        return GammaFilterOperation::create(WebCore::blend(m_amplitude, 1.0, progress),
-            WebCore::blend(m_exponent, 1.0, progress), WebCore::blend(m_offset, 0.0, progress), m_type);
+        return GammaFilterOperation::create(
+            WebCore::blend(m_amplitude, 1.0, progress),
+            WebCore::blend(m_exponent, 1.0, progress),
+            WebCore::blend(m_offset, 0.0, progress), m_type);
         
     const GammaFilterOperation* fromOp = static_cast<const GammaFilterOperation*>(from);
     double fromAmplitude = fromOp ? fromOp->amplitude() : 1;
     double fromExponent = fromOp ? fromOp->exponent() : 1;
     double fromOffset = fromOp ? fromOp->offset() : 0;
-    return GammaFilterOperation::create(WebCore::blend(m_amplitude, fromAmplitude, progress), WebCore::blend(m_exponent, fromExponent, progress),
-        WebCore::blend(m_offset, fromOffset, progress), m_type);
+    return GammaFilterOperation::create(
+        WebCore::blend(fromAmplitude, m_amplitude, progress),
+        WebCore::blend(fromExponent, m_exponent, progress),
+        WebCore::blend(fromOffset, m_offset, progress), m_type);
 }
 
 PassRefPtr<FilterOperation> BlurFilterOperation::blend(const FilterOperation* from, double progress, bool blendToPassthrough)
@@ -138,10 +146,10 @@ PassRefPtr<FilterOperation> DropShadowFilterOperation::blend(const FilterOperati
     Color fromColor = fromOp ? fromOp->color() : Color(Color::transparent);
     
     return DropShadowFilterOperation::create(
-        WebCore::blend(m_x, fromX, progress),
-        WebCore::blend(m_y, fromY, progress),
-        WebCore::blend(m_stdDeviation, fromStdDeviation, progress),
-        WebCore::blend(m_color, fromColor, progress), m_type);
+        WebCore::blend(fromX, m_x, progress),
+        WebCore::blend(fromY, m_y, progress),
+        WebCore::blend(fromStdDeviation, m_stdDeviation, progress),
+        WebCore::blend(fromColor, m_color, progress), m_type);
 }
 
 } // namespace WebCore