Diff
Modified: trunk/LayoutTests/ChangeLog (109952 => 109953)
--- trunk/LayoutTests/ChangeLog 2012-03-06 20:50:12 UTC (rev 109952)
+++ trunk/LayoutTests/ChangeLog 2012-03-06 21:01:19 UTC (rev 109953)
@@ -1,3 +1,17 @@
+2012-03-05 Dean Jackson <[email protected]>
+
+ Enable compositing when a CSS filter is animating
+ https://bugs.webkit.org/show_bug.cgi?id=79048
+
+ Reviewed by Simon Fraser.
+
+ * platform/mac/css3/filters/composited-during-animation-expected.txt: Added.
+ * platform/mac/css3/filters/composited-during-animation-layertree-expected.txt: Added.
+ * css3/filters/composited-during-animation-layertree.html: Added.
+ * css3/filters/composited-during-animation.html: Added.
+ * platform/mac/css3/filters/composited-during-transition-layertree-expected.txt: Added.
+ * css3/filters/composited-during-transition-layertree.html: Added.
+
2012-03-06 Stephen Chenney <[email protected]>
Update Chromium/SVG expectations after the <use> rewrite
Added: trunk/LayoutTests/css3/filters/composited-during-animation-layertree.html (0 => 109953)
--- trunk/LayoutTests/css3/filters/composited-during-animation-layertree.html (rev 0)
+++ trunk/LayoutTests/css3/filters/composited-during-animation-layertree.html 2012-03-06 21:01:19 UTC (rev 109953)
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ img {
+ margin: 10px;
+ -webkit-animation-duration: 5s !important;
+ -webkit-animation-iteration-count: infinite !important;
+ -webkit-animation-direction: alternate !important;
+ }
+
+ #grayscale-box {
+ -webkit-animation-name: grayscale-anim;
+ -webkit-filter: grayscale(1);
+ }
+
+ #sepia-box {
+ -webkit-filter: sepia(1);
+ }
+
+ #saturate-box {
+ -webkit-animation: saturate-anim;
+ -webkit-filter: saturate(1);
+ }
+
+ #huerotate-box {
+ -webkit-filter: hue-rotate(90deg);
+ }
+
+ #invert-box {
+ -webkit-animation: invert-anim;
+ -webkit-filter: invert(1);
+ }
+
+ #opacity-box {
+ -webkit-filter: opacity(0);
+ }
+
+ #brightness-box {
+ -webkit-animation: brightness-anim;
+ -webkit-filter: brightness(0);
+ }
+
+ #contrast-box {
+ -webkit-filter: contrast(0);
+ }
+
+
+ @-webkit-keyframes grayscale-anim {
+ from { -webkit-filter: grayscale(0); }
+ to { -webkit-filter: grayscale(1); }
+ }
+
+ @-webkit-keyframes saturate-anim {
+ from { -webkit-filter: saturate(0); }
+ to { -webkit-filter: saturate(1); }
+ }
+
+ @-webkit-keyframes invert-anim {
+ from { -webkit-filter: invert(0); }
+ to { -webkit-filter: invert(1); }
+ }
+
+ @-webkit-keyframes brightness-anim {
+ from { -webkit-filter: brightness(1); }
+ to { -webkit-filter: brightness(0); }
+ }
+
+ </style>
+ <script>
+ if (window.layoutTestController) {
+ layoutTestController.waitUntilDone();
+ layoutTestController.dumpAsText();
+ }
+
+ function doTest() {
+ if (window.layoutTestController) {
+ document.getElementById('layer-tree').innerText = layoutTestController.layerTreeAsText()
+ layoutTestController.notifyDone();
+ }
+ }
+
+ window.addEventListener("load", doTest, false);
+ </script>
+</head>
+<body>
+
+<!-- Every third image below is animating, and thus might
+ get a compositing layer. Every 3n+1 element is not animating but
+ has a static filter, and shouldn't need a compositing layer.
+ Every 3n+2 element is a purely static image, and shouldn't
+ even be a layer -->
+<img src="" id="grayscale-box">
+<img src="" id="sepia-box">
+<img src=""
+<br>
+<img src="" id="saturate-box">
+<img src="" id="huerotate-box">
+<img src=""
+<br>
+<img src="" id="invert-box">
+<img src="" id="opacity-box">
+<img src=""
+<br>
+<img src="" id="brightness-box">
+<img src="" id="contrast-box">
+<img src=""
+
+<pre id="layer-tree">Layer tree goes here in DRT</pre>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/filters/composited-during-animation-layertree.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/css3/filters/composited-during-animation.html (0 => 109953)
--- trunk/LayoutTests/css3/filters/composited-during-animation.html (rev 0)
+++ trunk/LayoutTests/css3/filters/composited-during-animation.html 2012-03-06 21:01:19 UTC (rev 109953)
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ img {
+ margin: 10px;
+ }
+
+ .animating img {
+ -webkit-animation-duration: 2s !important;
+ -webkit-animation-timing-function: linear !important;
+ }
+
+ #grayscale-box {
+ -webkit-animation-name: grayscale-anim;
+ -webkit-filter: grayscale(1);
+ }
+
+ #sepia-box {
+ -webkit-animation: sepia-anim;
+ -webkit-filter: sepia(1);
+ }
+
+ #saturate-box {
+ -webkit-animation: saturate-anim;
+ -webkit-filter: saturate(1);
+ }
+
+ #huerotate-box {
+ -webkit-animation: huerotate-anim;
+ -webkit-filter: hue-rotate(90deg);
+ }
+
+ #invert-box {
+ -webkit-animation: invert-anim;
+ -webkit-filter: invert(1);
+ }
+
+ #opacity-box {
+ -webkit-animation: opacity-anim;
+ -webkit-filter: opacity(0);
+ }
+
+ #brightness-box {
+ -webkit-animation: brightness-anim;
+ -webkit-filter: brightness(0);
+ }
+
+ #contrast-box {
+ -webkit-animation: contrast-anim;
+ -webkit-filter: contrast(0);
+ }
+
+ #blur-box {
+ -webkit-animation: blur-anim;
+ -webkit-filter: blur(10px);
+ }
+
+ @-webkit-keyframes grayscale-anim {
+ from { -webkit-filter: grayscale(0); }
+ to { -webkit-filter: grayscale(1); }
+ }
+
+ @-webkit-keyframes sepia-anim {
+ from { -webkit-filter: sepia(0); }
+ to { -webkit-filter: sepia(1); }
+ }
+
+ @-webkit-keyframes saturate-anim {
+ from { -webkit-filter: saturate(0); }
+ to { -webkit-filter: saturate(1); }
+ }
+
+ @-webkit-keyframes huerotate-anim {
+ from { -webkit-filter: hue-rotate(0); }
+ to { -webkit-filter: hue-rotate(180deg); }
+ }
+
+ @-webkit-keyframes invert-anim {
+ from { -webkit-filter: invert(0); }
+ to { -webkit-filter: invert(1); }
+ }
+
+ @-webkit-keyframes opacity-anim {
+ from { -webkit-filter: opacity(1); }
+ to { -webkit-filter: opacity(0); }
+ }
+
+ @-webkit-keyframes brightness-anim {
+ from { -webkit-filter: brightness(1); }
+ to { -webkit-filter: brightness(0); }
+ }
+
+ @-webkit-keyframes contrast-anim {
+ from { -webkit-filter: contrast(1); }
+ to { -webkit-filter: contrast(0); }
+ }
+
+ @-webkit-keyframes blur-anim {
+ from { -webkit-filter: blur(0); }
+ to { -webkit-filter: blur(20px); }
+ }
+
+ </style>
+ <script src=""
+ <script type="text/_javascript_">
+
+ const preExpectedValues = [
+ // [element-id, property, expected-value]
+ ["grayscale-box", "webkitFilter", 'grayscale(1)'],
+ ["sepia-box", "webkitFilter", 'sepia(1)'],
+ ["saturate-box", "webkitFilter", 'saturate(1)'],
+ ["huerotate-box", "webkitFilter", 'hue-rotate(90deg)'],
+ ["invert-box", "webkitFilter", 'invert(1)'],
+ ["opacity-box", "webkitFilter", 'opacity(0)'],
+ ["brightness-box", "webkitFilter", 'brightness(0)'],
+ ["contrast-box", "webkitFilter", 'contrast(0)'],
+ ["blur-box", "webkitFilter", 'blur(10px)'],
+ ];
+
+ const expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["grayscale-anim", 1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.15],
+ ["sepia-anim", 1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.15],
+ ["saturate-anim", 1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.15],
+ ["huerotate-anim", 1, "huerotate-box", "webkitFilter", 'hue-rotate(90deg)', 20],
+ ["invert-anim", 1, "invert-box", "webkitFilter", 'invert(0.5)', 0.15],
+ ["opacity-anim", 1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.15],
+ ["brightness-anim", 1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.15],
+ ["contrast-anim", 1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.15],
+ ["blur-anim", 1, "blur-box", "webkitFilter", 'blur(10px)', 4],
+ ];
+
+ function runPreTest() {
+ var preResult = "";
+
+ for (var i=0; i < preExpectedValues.length; i++) {
+ var id = preExpectedValues[i][0];
+ var prop = preExpectedValues[i][1];
+ var expected = preExpectedValues[i][2];
+ var element = document.getElementById(id);
+ var computedStyle = window.getComputedStyle(element)[prop];
+ if (computedStyle == expected)
+ preResult += "PASS: Element " + id + " had filter value " + expected + " before animation.<br>";
+ else
+ preResult += "FAIL: Element " + id + " had filter value " + computedStyle + " rather than " + expected + " before animation.<br>";
+ }
+ document.getElementById("preresult").innerHTML = preResult;
+
+ // Completed the pre-animation tests. Now start the animation.
+ setTimeout(function () {
+ document.body.className = "animating";
+ runAnimationTest(expectedValues);
+ }, 0);
+ }
+
+ if (window.layoutTestController) {
+ layoutTestController.dumpAsText();
+ layoutTestController.waitUntilDone();
+ }
+
+ window.addEventListener("load", runPreTest, false);
+ </script>
+</head>
+<body>
+
+<img src="" id="grayscale-box">
+<img src="" id="sepia-box">
+<img src="" id="saturate-box">
+<img src="" id="huerotate-box">
+<img src="" id="invert-box">
+<img src="" id="opacity-box">
+<img src="" id="brightness-box">
+<img src="" id="contrast-box">
+<img src="" id="blur-box">
+
+<!-- this result element is filled in the script above, before the animations start -->
+<div id="preresult">
+</div>
+
+<!-- this result element is filled by the animation test system -->
+<div id="result">
+</div>
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/filters/composited-during-animation.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/css3/filters/composited-during-transition-layertree.html (0 => 109953)
--- trunk/LayoutTests/css3/filters/composited-during-transition-layertree.html (rev 0)
+++ trunk/LayoutTests/css3/filters/composited-during-transition-layertree.html 2012-03-06 21:01:19 UTC (rev 109953)
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ img {
+ margin: 10px;
+ }
+
+ #grayscale-box {
+ -webkit-transition: -webkit-filter 5s;
+ -webkit-filter: grayscale(0);
+ }
+
+ .trigger #grayscale-box {
+ -webkit-filter: grayscale(1);
+ }
+
+ #sepia-box {
+ -webkit-filter: sepia(1);
+ }
+
+ #saturate-box {
+ -webkit-transition: -webkit-filter 5s;
+ -webkit-filter: saturate(0);
+ }
+
+ .trigger #saturate-box {
+ -webkit-filter: saturate(1);
+ }
+
+ #huerotate-box {
+ -webkit-filter: hue-rotate(90deg);
+ }
+
+ #invert-box {
+ -webkit-transition: -webkit-filter 5s;
+ -webkit-filter: invert(0);
+ }
+
+ .trigger #invert-box {
+ -webkit-filter: invert(1);
+ }
+
+ #opacity-box {
+ -webkit-filter: opacity(0.5);
+ }
+
+ #brightness-box {
+ -webkit-transition: -webkit-filter 5s;
+ -webkit-filter: brightness(0);
+ }
+
+ .trigger #brightness-box {
+ -webkit-filter: brightness(1);
+ }
+
+ #contrast-box {
+ -webkit-filter: contrast(0);
+ }
+ </style>
+ <script>
+ if (window.layoutTestController) {
+ layoutTestController.waitUntilDone();
+ layoutTestController.dumpAsText();
+ }
+
+ function doTest() {
+ if (window.layoutTestController) {
+ document.getElementById('layer-tree').innerText = layoutTestController.layerTreeAsText()
+ layoutTestController.notifyDone();
+ }
+ }
+
+ function triggerTransition() {
+ document.body.className = "trigger";
+ setTimeout(doTest, 200);
+ }
+
+ window.addEventListener("load", triggerTransition, false);
+ </script>
+</head>
+<body>
+
+<!-- Every third image below will transition, and thus might
+ get a compositing layer. Every 3n+1 element is not transitioning but
+ has a static filter, and shouldn't need a compositing layer.
+ Every 3n+2 element is a purely static image, and shouldn't
+ even be a layer -->
+<img src="" id="grayscale-box">
+<img src="" id="sepia-box">
+<img src=""
+<br>
+<img src="" id="saturate-box">
+<img src="" id="huerotate-box">
+<img src=""
+<br>
+<img src="" id="invert-box">
+<img src="" id="opacity-box">
+<img src=""
+<br>
+<img src="" id="brightness-box">
+<img src="" id="contrast-box">
+<img src=""
+
+<pre id="layer-tree">Layer tree goes here in DRT</pre>
+
+</body>
+</html>
Property changes on: trunk/LayoutTests/css3/filters/composited-during-transition-layertree.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-expected.txt (0 => 109953)
--- trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-expected.txt 2012-03-06 21:01:19 UTC (rev 109953)
@@ -0,0 +1,20 @@
+
+PASS: Element grayscale-box had filter value grayscale(1) before animation.
+PASS: Element sepia-box had filter value sepia(1) before animation.
+PASS: Element saturate-box had filter value saturate(1) before animation.
+PASS: Element huerotate-box had filter value hue-rotate(90deg) before animation.
+PASS: Element invert-box had filter value invert(1) before animation.
+PASS: Element opacity-box had filter value opacity(0) before animation.
+PASS: Element brightness-box had filter value brightness(0) before animation.
+PASS: Element contrast-box had filter value contrast(0) before animation.
+PASS: Element blur-box had filter value blur(10px) before animation.
+PASS - "webkitFilter" property for "grayscale-box" element at 1s saw something close to: grayscale(0.5)
+PASS - "webkitFilter" property for "sepia-box" element at 1s saw something close to: sepia(0.5)
+PASS - "webkitFilter" property for "saturate-box" element at 1s saw something close to: saturate(0.5)
+PASS - "webkitFilter" property for "huerotate-box" element at 1s saw something close to: hue-rotate(90deg)
+PASS - "webkitFilter" property for "invert-box" element at 1s saw something close to: invert(0.5)
+PASS - "webkitFilter" property for "opacity-box" element at 1s saw something close to: opacity(0.5)
+PASS - "webkitFilter" property for "brightness-box" element at 1s saw something close to: brightness(0.5)
+PASS - "webkitFilter" property for "contrast-box" element at 1s saw something close to: contrast(0.5)
+PASS - "webkitFilter" property for "blur-box" element at 1s saw something close to: blur(10px)
+
Property changes on: trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-expected.txt
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-layertree-expected.txt (0 => 109953)
--- trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-layertree-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-layertree-expected.txt 2012-03-06 21:01:19 UTC (rev 109953)
@@ -0,0 +1,5 @@
+
+
+
+
+
Property changes on: trunk/LayoutTests/platform/mac/css3/filters/composited-during-animation-layertree-expected.txt
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/platform/mac/css3/filters/composited-during-transition-layertree-expected.txt (0 => 109953)
--- trunk/LayoutTests/platform/mac/css3/filters/composited-during-transition-layertree-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac/css3/filters/composited-during-transition-layertree-expected.txt 2012-03-06 21:01:19 UTC (rev 109953)
@@ -0,0 +1,5 @@
+
+
+
+
+
Property changes on: trunk/LayoutTests/platform/mac/css3/filters/composited-during-transition-layertree-expected.txt
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (109952 => 109953)
--- trunk/Source/WebCore/ChangeLog 2012-03-06 20:50:12 UTC (rev 109952)
+++ trunk/Source/WebCore/ChangeLog 2012-03-06 21:01:19 UTC (rev 109953)
@@ -1,3 +1,31 @@
+2012-03-05 Dean Jackson <[email protected]>
+
+ Enable compositing when a CSS filter is animating
+ https://bugs.webkit.org/show_bug.cgi?id=79048
+
+ Reviewed by Simon Fraser.
+
+ Now that some systems (e.g. OS X) have both hardware accelerated
+ CSS filters, and the ability to animate them via the hardware
+ compositor, all CSS filters should be composited when animating.
+
+ Tests: css3/filters/composited-during-animation-layertree.html
+ css3/filters/composited-during-animation.html
+ css3/filters/composited-during-transition-layertree.html
+
+ * platform/graphics/ca/GraphicsLayerCA.cpp:
+ (WebCore):
+ (WebCore::supportsAcceleratedFilterAnimations):
+ new method that returns true if the platform supports
+ hardware animations of filters.
+ (WebCore::GraphicsLayerCA::addAnimation):
+ (WebCore::GraphicsLayerCA::createAnimationFromKeyframes):
+ only create layer-animations if the platform supports it.
+ * rendering/RenderLayerCompositor.cpp:
+ (WebCore::RenderLayerCompositor::requiresCompositingForAnimation):
+ create a compositing layer if animating a filter on a
+ supported platform.
+
2012-03-06 Stephen White <[email protected]>
Unreviewed, rolling out r109825.
Modified: trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp (109952 => 109953)
--- trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2012-03-06 20:50:12 UTC (rev 109952)
+++ trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2012-03-06 21:01:19 UTC (rev 109953)
@@ -243,6 +243,18 @@
return false;
}
+#if ENABLE(CSS_FILTERS)
+static inline bool supportsAcceleratedFilterAnimations()
+{
+// <rdar://problem/10907251> - WebKit2 doesn't support CA animations of CI filters on Lion and below
+#if !defined(BUILDING_ON_SNOW_LEOPARD) && !defined(BUILDING_ON_LION)
+ return true;
+#else
+ return false;
+#endif
+}
+#endif
+
PassOwnPtr<GraphicsLayer> GraphicsLayer::create(GraphicsLayerClient* client)
{
return adoptPtr(new GraphicsLayerCA(client));
@@ -661,8 +673,10 @@
if (valueList.property() == AnimatedPropertyWebkitTransform)
createdAnimations = createTransformAnimationsFromKeyframes(valueList, anim, animationName, timeOffset, boxSize);
#if ENABLE(CSS_FILTERS)
- else if (valueList.property() == AnimatedPropertyWebkitFilter)
- createdAnimations = createFilterAnimationsFromKeyframes(valueList, anim, animationName, timeOffset);
+ else if (valueList.property() == AnimatedPropertyWebkitFilter) {
+ if (supportsAcceleratedFilterAnimations())
+ createdAnimations = createFilterAnimationsFromKeyframes(valueList, anim, animationName, timeOffset);
+ }
#endif
else
createdAnimations = createAnimationFromKeyframes(valueList, anim, animationName, timeOffset);
@@ -1763,7 +1777,7 @@
bool GraphicsLayerCA::createAnimationFromKeyframes(const KeyframeValueList& valueList, const Animation* animation, const String& animationName, double timeOffset)
{
- ASSERT(valueList.property() != AnimatedPropertyWebkitTransform && valueList.property() != AnimatedPropertyWebkitFilter);
+ ASSERT(valueList.property() != AnimatedPropertyWebkitTransform && (!supportsAcceleratedFilterAnimations() || valueList.property() != AnimatedPropertyWebkitFilter));
bool isKeyframe = valueList.size() > 2;
bool valuesOK;
Modified: trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp (109952 => 109953)
--- trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2012-03-06 20:50:12 UTC (rev 109952)
+++ trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2012-03-06 21:01:19 UTC (rev 109953)
@@ -1559,6 +1559,12 @@
if (AnimationController* animController = renderer->animation()) {
return (animController->isRunningAnimationOnRenderer(renderer, CSSPropertyOpacity) && inCompositingMode())
+#if ENABLE(CSS_FILTERS)
+#if !defined(BUILDING_ON_SNOW_LEOPARD) && !defined(BUILDING_ON_LION)
+ // <rdar://problem/10907251> - WebKit2 doesn't support CA animations of CI filters on Lion and below
+ || animController->isRunningAnimationOnRenderer(renderer, CSSPropertyWebkitFilter)
+#endif // !SNOW_LEOPARD && !LION
+#endif // CSS_FILTERS
|| animController->isRunningAnimationOnRenderer(renderer, CSSPropertyWebkitTransform);
}
return false;
