Enable animations of CSS images using -webkit-cross-fade

https://bugs.webkit.org/show_bug.cgi?id=74049
<rdar://problem/10209303>

Reviewed by Simon Fraser.

Add support for animating CSS images in the following properties:
    - background(-image)
    - border-image(-source)
    - list-style(-image)
    - -webkit-mask-box-image(-source)
    - -webkit-mask-image(-source)

This patch only adds support for transitioning between NinePieceImages
where all of the properties except the image itself are equal, and the
size of the images are equal. Other cases will not animate.

Add animation blend functions for StyleImage and NinePieceImage.

Apply the proper compositing operation to -webkit-cross-fade, and
fix handling of the destination and source areas to support scaling.

Tests: animations/cross-fade-background-image.html
       animations/cross-fade-border-image-source.html
       animations/cross-fade-list-style-image.html
       animations/cross-fade-webkit-mask-box-image.html
       animations/cross-fade-webkit-mask-image.html

* css/CSSCrossfadeValue.cpp:
(WebCore::cachedImageForCSSValue):
(WebCore::CSSCrossfadeValue::fixedSize):
(WebCore::CSSCrossfadeValue::image):
* css/CSSImageValue.cpp:
(WebCore::CSSImageValue::CSSImageValue):
* css/CSSImageValue.h:
(WebCore::CSSImageValue::create):
* page/animation/AnimationBase.cpp:
(WebCore::crossfadeBlend):
(WebCore::blendFunc):
(WebCore::RefCountedPropertyWrapper::RefCountedPropertyWrapper):
(WebCore::RefCountedPropertyWrapper::blend):
(WebCore::FillLayerRefCountedPropertyWrapper::FillLayerRefCountedPropertyWrapper):
(WebCore::FillLayerRefCountedPropertyWrapper::blend):
(WebCore::FillLayersPropertyWrapper::FillLayersPropertyWrapper):
(WebCore::AnimationBase::ensurePropertyMap):
(WebCore::addShorthandProperties):
* platform/graphics/CrossfadeGeneratedImage.cpp:
(WebCore::CrossfadeGeneratedImage::drawCrossfade):
(WebCore::CrossfadeGeneratedImage::draw):
(WebCore::CrossfadeGeneratedImage::drawPattern):
* platform/graphics/CrossfadeGeneratedImage.h:
* rendering/style/RenderStyle.h:
(WebCore::InheritedFlags::setMaskImage):

Add tests of -webkit-animation (using -webkit-cross-fade) between:
    - background-image
    - border-image
    - list-style-image
    - -webkit-mask-box-image
    - -webkit-mask-image

Add the ability for animation tests to compare an animated element to a static element.

Add tests of -webkit-transition (using -webkit-cross-fade) between:
    - background-image
    - border-image

* animations/cross-fade-background-image-expected.txt: Added.
* animations/cross-fade-background-image.html: Added.
* animations/cross-fade-border-image-source-expected.txt: Added.
* animations/cross-fade-border-image-source.html: Added.
* animations/cross-fade-list-style-image-expected.txt: Added.
* animations/cross-fade-list-style-image.html: Added.
* animations/cross-fade-webkit-mask-box-image-expected.txt: Added.
* animations/cross-fade-webkit-mask-box-image.html: Added.
* animations/cross-fade-webkit-mask-image-expected.txt: Added.
* animations/cross-fade-webkit-mask-image.html: Added.
* animations/resources/animation-test-helpers.js:
(parseCrossFade):
(checkExpectedValue):
* animations/resources/blue-100.png: Added.
* animations/resources/green-100.png: Added.
* animations/resources/stripes-100.png: Added.
* platform/mac/animations/cross-fade-background-image-expected.png: Added.
* platform/mac/animations/cross-fade-border-image-source-expected.png: Added.
* platform/mac/animations/cross-fade-list-style-image-expected.png: Added.
* platform/mac/animations/cross-fade-webkit-mask-box-image-expected.png: Added.
* platform/mac/animations/cross-fade-webkit-mask-image-expected.png: Added.
* platform/mac/transitions/cross-fade-background-image-expected.png: Added.
* platform/mac/transitions/cross-fade-border-image-expected.png: Added.
* transitions/cross-fade-background-image-expected.txt: Added.
* transitions/cross-fade-background-image.html: Added.
* transitions/cross-fade-border-image-expected.txt: Added.
* transitions/cross-fade-border-image.html: Added.
* transitions/resources/transition-test-helpers.js:
(expected):


git-svn-id: svn://svn.chromium.org/blink/trunk@102388 bbb929c8-8fbe-4397-9dbb-9b2b20218538

1 files changed, 60 insertions, 0 deletions

diff --git a/third_party/WebKit/LayoutTests/animations/cross-fade-background-image.html b/third_party/WebKit/LayoutTests/animations/cross-fade-background-image.html
new file mode 100644
index 0000000..595ed55
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/cross-fade-background-image.html
@@ -0,0 +1,60 @@
+<html>
+<head>
+  <style>
+    #box {
+        position: absolute;
+        left: 100px;
+        top: 100px;
+        height: 100px;
+        width: 100px;
+        background-color: red;
+        -webkit-animation: anim 1s linear infinite;
+    }
+    #boxShorthand {
+        position: absolute;
+        left: 100px;
+        top: 200px;
+        height: 100px;
+        width: 100px;
+        background-color: red;
+        -webkit-animation: animShorthand 1s linear infinite;
+    }
+    #boxStatic {
+        position: absolute;
+        left: 100px;
+        top: 300px;
+        height: 100px;
+        width: 100px;
+        background-color: red;
+        background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%);
+    }
+    @-webkit-keyframes anim {
+        from { background-image: url(resources/blue-100.png); }
+        to   { background-image: url(resources/green-100.png); }
+    }
+    @-webkit-keyframes animShorthand {
+        from { background: url(resources/blue-100.png); }
+        to   { background: url(resources/green-100.png); }
+    }
+  </style>
+  <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    const expectedValues = [
+      // [animation-name, time, element-id, property, expected-value, tolerance]
+      ["anim", 2.5, "box", "backgroundImage", 0.5, 0.05],
+      ["anim", 2.5, ["box", "static:boxStatic"], "backgroundImage", 0.5, 0.05],
+      ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "backgroundImage", 0.5, 0.05],
+    ];
+
+    var doPixelTest = true;
+    var disablePauseAPI = false;
+    runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
+  </script>
+</head>
+<body>
+<div id="box"></div>
+<div id="boxStatic"></div>
+<div id="boxShorthand"></div>
+<div id="result"></div>
+</body>
+</html>