• krit@webkit.org's avatar
    Animate CSS Image filter() function · ebae578c
    krit@webkit.org authored
    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: http://svn.webkit.org/repository/webkit/trunk@154906 268f45cc-cd09-0410-ab3c-d52691b4dbfc
    ebae578c
cross-fade-border-image-source.html 2.28 KB