Animate CSS Image filter() function
authorkrit@webkit.org <krit@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 30 Aug 2013 19:29:03 +0000 (19:29 +0000)
committerkrit@webkit.org <krit@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 30 Aug 2013 19:29:03 +0000 (19:29 +0000)
commit640dd8b428e11e2739a3511c2dafe0266948b6e1
treee42e6595d67f129550c8f5225c7a777dbd3872fc
parente9b7ca0bdc0b196fc37f1c472d637c13bb80d231
Animate CSS Image filter() function
https://bugs.webkit.org/show_bug.cgi?id=119938

Reviewed by Simon Fraser.

Source/WebCore:

With this patch, the new introduced CSS Image function filter() can be
animated. According to the spec, just filter functions can be
interpolated.

The patch also prepares StyleImage blending for interpolation of other
generated images like gradients or cross-fade().

http://dev.w3.org/fxtf/filters/#interpolating-filter-image

Test: fast/filter-image/filter-image-animation.html

* css/CSSComputedStyleDeclaration.cpp: Reuse the code that creates a
    CSSValueList from ComputeStyle logic.
(WebCore::valueForPixel):
    For StyleRules we want to have not-adjusted length values.
(WebCore::ComputedStyleExtractor::valueForShadow):
    Add argument to switch between adjusted and not-adjusted length.
(WebCore::ComputedStyleExtractor::valueForFilter):
    Ditto.
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSComputedStyleDeclaration.h:
* css/CSSFilterImageValue.h: Add helper functions
    for animating filters. We need to pass the FilterOperations for
    the image generation and the CSSValueList for StyleRule.
(WebCore::CSSFilterImageValue::filterOperations):
(WebCore::CSSFilterImageValue::setFilterOperations):
(WebCore::CSSFilterImageValue::cachedImage):
* page/animation/CSSPropertyAnimation.cpp:
    Add animation code to support animations between two filter()
    function values.
(WebCore::blendFilterOperations):
(WebCore::blendFunc):
(WebCore::filterBlend):
* rendering/style/StyleGeneratedImage.h: Add helper functions.
(WebCore::CSSFilterImageValue::imageValue):

LayoutTests:

Add tests to test animation between two filter() function values.
Furthermore, extended animation-test-helpers.js to parse all kind of CSS
image function where we support animations. CSS Image function can be
deeply nested as well now:

    -wekit-filter(-webkit-cross-fade(url(a.png), url(b.png), 50%), sepia(0.5))

Even the 50% can now be checked with a tolerance. If we should ever support
animations on nested CSS Images, the new code in animation-test-helpers.js
is prepared for it.

Fixed a bunch of tests that passed by accident or needed an update to the new
infrastructure.

* animations/resources/animation-test-helpers.js:
(parseCSSImage): For parsing of all kind of supported CSS Image functions.
    Currently supported: -webkit-cross-fade, -webkit-filter, url, none
    Still missing: linear and radial gradients (can not be animated yet).
    CSS Image functions are allowed to be nested as deep JS allows.
(parseCrossFade): Add parsing of input CSS images.
(parseFilterImage): Parse -webkit-filter image function as well as input images.
(parseFilterFunctionList): Parse filter function list. We now parse the
    function name as well. Added rudimentary support for drop-shadow and url.
(parseDeprecatedCustomFilterFunction): Special case old syntax of custom
    filter function. Shall be removed in the future.
(compareCSSImages): Compares all kind (even deep nested) CSS images.
(compareFilterFunctions): Now compare filter function names as well.
(comparePropertyValue): Use new compareCSSImages function.
* fast/filter-image/filter-image-animation-expected.txt: Added.
* fast/filter-image/filter-image-animation.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@154906 268f45cc-cd09-0410-ab3c-d52691b4dbfc
38 files changed:
LayoutTests/ChangeLog
LayoutTests/animations/cross-fade-background-image.html
LayoutTests/animations/cross-fade-border-image-source.html
LayoutTests/animations/cross-fade-list-style-image.html
LayoutTests/animations/cross-fade-webkit-mask-box-image.html
LayoutTests/animations/cross-fade-webkit-mask-image.html
LayoutTests/animations/resources/animation-test-helpers.js
LayoutTests/css3/filters/filter-animation-expected.txt
LayoutTests/css3/filters/filter-animation-from-none-expected.txt
LayoutTests/css3/filters/filter-animation-from-none-hw-expected.txt
LayoutTests/css3/filters/filter-animation-from-none-hw.html
LayoutTests/css3/filters/filter-animation-from-none-multi-expected.txt
LayoutTests/css3/filters/filter-animation-from-none-multi-hw-expected.txt
LayoutTests/css3/filters/filter-animation-from-none-multi-hw.html
LayoutTests/css3/filters/filter-animation-from-none-multi.html
LayoutTests/css3/filters/filter-animation-from-none.html
LayoutTests/css3/filters/filter-animation-hw-expected.txt
LayoutTests/css3/filters/filter-animation-hw.html
LayoutTests/css3/filters/filter-animation-multi-expected.txt
LayoutTests/css3/filters/filter-animation-multi-hw-expected.txt
LayoutTests/css3/filters/filter-animation-multi-hw.html
LayoutTests/css3/filters/filter-animation-multi.html
LayoutTests/css3/filters/filter-animation.html
LayoutTests/fast/filter-image/filter-image-animation-expected.txt [new file with mode: 0644]
LayoutTests/fast/filter-image/filter-image-animation.html [new file with mode: 0644]
LayoutTests/fast/filter-image/resources/blue.svg [new file with mode: 0644]
LayoutTests/platform/mac/animations/cross-fade-background-image-expected.txt
LayoutTests/platform/mac/animations/cross-fade-border-image-source-expected.txt
LayoutTests/platform/mac/animations/cross-fade-list-style-image-expected.txt
LayoutTests/platform/mac/animations/cross-fade-webkit-mask-box-image-expected.txt
LayoutTests/platform/mac/animations/cross-fade-webkit-mask-image-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSComputedStyleDeclaration.h
Source/WebCore/css/CSSFilterImageValue.cpp
Source/WebCore/css/CSSFilterImageValue.h
Source/WebCore/page/animation/CSSPropertyAnimation.cpp
Source/WebCore/rendering/style/StyleGeneratedImage.h