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: http://svn.webkit.org/repository/webkit/trunk@102388 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/animations/cross-fade-background-image.html b/LayoutTests/animations/cross-fade-background-image.html
new file mode 100644
index 0000000..595ed55
--- /dev/null
+++ b/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>
