Ignore filter property in CSS Animations

A common pattern on the web is to animate both -webkit-filter and filter. -webkit-filter can currently be composited while filter cannot. Composited animations are not started if there are non-compositable properties being animated simultaneously. This patch ignores filter in CSS keyframes so that animations using -webkit-filter and filter will run on the compositor. Once -webkit-filter becomes an alias for filter we can stop ignoring filter in CSS Animations. BUG=520610 Review URL: https://codereview.chromium.org/1319083003 git-svn-id: svn://svn.chromium.org/blink/trunk@201522 bbb929c8-8fbe-4397-9dbb-9b2b20218538

Ignore filter property in CSS Animations
A common pattern on the web is to animate both -webkit-filter and filter. -webkit-filter can currently be composited while filter cannot. Composited animations are not started if there are non-compositable properties being animated simultaneously. This patch ignores filter in CSS keyframes so that animations using -webkit-filter and filter will run on the compositor. Once -webkit-filter becomes an alias for filter we can stop ignoring filter in CSS Animations. BUG=520610 Review URL: https://codereview.chromium.org/1319083003 git-svn-id: svn://svn.chromium.org/blink/trunk@201522 bbb929c8-8fbe-4397-9dbb-9b2b20218538
a9a8276b · alancutter@chromium.org · 5bce5e5b · a9a8276b · a9a8276b
Commit a9a8276b authored Sep 01, 2015 by alancutter@chromium.org
2 changed files
--- a/third_party/WebKit/LayoutTests/virtual/threaded/animations/composited-filter-webkit-filter.html
+++ b/third_party/WebKit/LayoutTests/virtual/threaded/animations/composited-filter-webkit-filter.html
+<!DOCTYPE html>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+@keyframes test {
+  from {
+    -webkit-filter: saturate(0);
+    filter: none;
+  }
+  to {
+    -webkit-filter: saturate(1);
+    filter: none;
+  }
+}
+#target {
+  animation: test 1e10s;
+}
+</style>
+<div id="target"></div>
+<script>
+var asyncHandle = async_test('-webkit-filter + filter animations get composited.');
+requestAnimationFrame(_ => {
+  requestAnimationFrame(_ => {
+    asyncHandle.step(_ => {
+      assert_true(internals.isCompositedAnimation(target.getAnimations()[0]));
+    });
+    asyncHandle.done();
+  });
+});
+</script>
--- a/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
+++ b/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
@@ -100,6 +100,11 @@ static PassRefPtrWillBeRawPtr<StringKeyframeEffectModel> createKeyframeEffectMod
                    timingFunction = CSSTimingData::initialTimingFunction();
                }
                keyframe->setEasing(timingFunction.release());
+            } else if (property == CSSPropertyFilter) {
+                // TODO(alancutter): We will not support animating filter until -webkit-filter is an alias for it.
+                // This is to prevent animations on both -webkit-filter and filter from being run on the main thread when
+                // they would otherwise run on the compositor.
+                continue;
            } else if (CSSAnimations::isAnimatableProperty(property)) {
                keyframe->setPropertyValue(property, properties.propertyAt(j).value());
            }