Changeset 155240 in webkit


Ignore:
Timestamp:
Sep 6, 2013 10:28:23 PM (11 years ago)
Author:
krit@webkit.org
Message:

Interpolate between CSS filter() and cached images
​https://bugs.webkit.org/show_bug.cgi?id=120602

Reviewed by Simon Fraser.

Source/WebCore:

Interpolate from a filter() image function to a url() image reference and
the other way around, if the input image on the filter function is the same
as the referenced image on url().

  • page/animation/CSSPropertyAnimation.cpp: Replaced old

filterBlend function with blendFilter function which is more generic
and can be reused in multiple places.

(WebCore::blendFilterOperations):
(WebCore::blendFunc):
(WebCore::blendFilter):

LayoutTests:

Add aditional test for interpolation from url to a -webkit-filter function
and the other way around. Added an additional test to make sure that different
input images don't make start and end interpolate.

  • fast/filter-image/filter-image-animation.html:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r155238 r155240  
     12013-09-06  Dirk Schulze  <krit@webkit.org>
     2
     3        Interpolate between CSS filter() and cached images
     4        https://bugs.webkit.org/show_bug.cgi?id=120602
     5
     6        Reviewed by Simon Fraser.
     7
     8        Add aditional test for interpolation from url to a -webkit-filter function
     9        and the other way around. Added an additional test to make sure that different
     10        input images don't make start and end interpolate.
     11
     12        * fast/filter-image/filter-image-animation.html:
     13
    1142013-09-06  Ryosuke Niwa  <rniwa@webkit.org>
    215

  • trunk/LayoutTests/fast/filter-image/filter-image-animation-expected.txt

    r155179 r155240  
    1          
     1           
    22PASS - "backgroundImage" property for "brightness" element at 1s saw something close to: -webkit-filter(url(image.svg), brightness(0.5))
    33PASS - "backgroundImage" property for "blur" element at 1s saw something close to: -webkit-filter(url(image.svg), blur(5px))
    … …  
    88PASS - "backgroundImage" property for "multiple1" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))
    99PASS - "backgroundImage" property for "multiple2" element at 1s saw something close to: -webkit-filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))
     10PASS - "backgroundImage" property for "urlfilter" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.25))
     11PASS - "backgroundImage" property for "filterurl" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.25))
     12PASS - "backgroundImage" property for "filterdiffurl" element at 1s saw something close to: -webkit-filter(url(blue.svg), sepia(0.5))
    1013PASS - "backgroundImage" property for "generated1" element at 1s saw something close to: -webkit-filter(-webkit-filter(url(image.svg), blur(3px)), sepia(0))
    1114PASS - "backgroundImage" property for "generated2" element at 1s saw something close to: -webkit-filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))
    12 PASS - "backgroundImage" property for "urlfilter" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.5))
    1315

  • trunk/LayoutTests/fast/filter-image/filter-image-animation.html

    r155179 r155240  
    4444    }
    4545
     46    #urlfilter {
     47      -webkit-animation: url-to-filter-anim 2s linear;
     48    }
     49
     50    #filterurl {
     51      -webkit-animation: filter-to-url-anim 2s linear;
     52    }
     53
     54    #filterdiffurl {
     55      -webkit-animation: filter-diff-url-anim 2s linear;
     56    }
     57
    4658    #generated1 {
    4759      -webkit-animation: generated-anim1 2s linear;
    … …  
    5163      -webkit-animation: generated-anim2 2s linear;
    5264    }
    53 
    54     #urlfilter {
    55       -webkit-animation: url-to-filter-anim 2s linear;
    56     }
    57 
    5865
    5966    @-webkit-keyframes brightness-anim {
    … …  
    97104    }
    98105
     106    @-webkit-keyframes url-to-filter-anim {
     107        from { background-image: url(resources/image.svg); }
     108        to   { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
     109    }
     110
     111    @-webkit-keyframes filter-to-url-anim {
     112        from { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
     113        to   { background-image: url(resources/image.svg); }
     114    }
     115
     116    @-webkit-keyframes filter-diff-url-anim {
     117        from { background-image: url(resources/image.svg); }
     118        to   { background-image: -webkit-filter(url(resources/blue.svg), sepia(0.5)); }
     119    }
     120
    99121    @-webkit-keyframes generated-anim1 {
    100122        from { background-image: -webkit-filter(-webkit-filter(url(resources/image.svg), blur(3px)), sepia(1)); }
    … …  
    105127        from { background-image: -webkit-filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(1)); }
    106128        to   { background-image: -webkit-filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(0)); }
    107     }
    108 
    109     @-webkit-keyframes url-to-filter-anim {
    110         from { background-image: url(resources/image.svg); }
    111         to   { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
    112129    }
    113130  </style>
    … …  
    124141      ["multiple-anim1",  1, "multiple1", "backgroundImage", "-webkit-filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
    125142      ["multiple-anim2",  1, "multiple2", "backgroundImage", "-webkit-filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
     143      ["url-to-filter-anim",  1, "urlfilter", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.25))", 0.05],
     144      ["filter-to-url-anim",  1, "filterurl", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.25))", 0.05],
     145      ["filter-diff-url-anim",  1, "filterdiffurl", "backgroundImage", " -webkit-filter(url(blue.svg), sepia(0.5))", 0],
    126146      // FIXME: We need to support generated images as input to other generated images for animations first.
    127147      ["generated-anim1",  1, "generated1", "backgroundImage", "-webkit-filter(-webkit-filter(url(image.svg), blur(3px)), sepia(0))", 0],
    128148      ["generated-anim2",  1, "generated2", "backgroundImage", "-webkit-filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))", 0],
    129       ["url-to-filter-anim",  1, "urlfilter", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.5))", 0],
    130149    ];
    131150   
    … …  
    143162<div class="box" id="multiple1"></div>
    144163<div class="box" id="multiple2"></div>
     164<div class="box" id="urlfilter"></div>
     165<div class="box" id="filterurl"></div>
     166<div class="box" id="filterdiffurl"></div>
    145167<div class="box" id="generated1"></div>
    146168<div class="box" id="generated2"></div>
    147 <div class="box" id="urlfilter"></div>
    148169
    149170<div id="result">

  • trunk/Source/WebCore/ChangeLog

    r155234 r155240  
     12013-09-06  Dirk Schulze  <krit@webkit.org>
     2
     3        Interpolate between CSS filter() and cached images
     4        https://bugs.webkit.org/show_bug.cgi?id=120602
     5
     6        Reviewed by Simon Fraser.
     7
     8        Interpolate from a filter() image function to a url() image reference and
     9        the other way around, if the input image on the filter function is the same
     10        as the referenced image on url().
     11
     12        * page/animation/CSSPropertyAnimation.cpp: Replaced old
     13            filterBlend function with blendFilter function which is more generic
     14            and can be reused in multiple places.
     15        (WebCore::blendFilterOperations):
     16        (WebCore::blendFunc):
     17        (WebCore::blendFilter):
     18
    1192013-09-06  Ryosuke Niwa  <rniwa@webkit.org>
    220

  • trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp

    r155105 r155240  
    178178}
    179179
    180 static inline void blendFilterOperations(const AnimationBase* anim, FilterOperations& result, const FilterOperations& from, const FilterOperations& to, double progress)
    181 {
     180static inline FilterOperations blendFilterOperations(const AnimationBase* anim,  const FilterOperations& from, const FilterOperations& to, double progress)
     181{
     182    FilterOperations result;
    182183    size_t fromSize = from.operations().size();
    183184    size_t toSize = to.operations().size();
    … …  
    197198        }
    198199    }
     200    return result;
    199201}
    200202
    … …  
    205207    // If we have a filter function list, use that to do a per-function animation.
    206208    if (anim->filterFunctionListsMatch())
    207         blendFilterOperations(anim, result, from, to, progress);
     209        result = blendFilterOperations(anim, from, to, progress);
    208210    else {
    209211        // If the filter function lists don't match, we could try to cross-fade, but don't yet have a way to represent that in CSS.
    … …  
    215217}
    216218
    217 static inline PassRefPtr<StyleImage> filterBlend(const AnimationBase* anim, StyleImage* from, StyleImage* to, double progress)
    218 {
    219     CSSFilterImageValue* fromValue = static_cast<CSSFilterImageValue*>(from->data());
    220     CSSFilterImageValue* toValue = static_cast<CSSFilterImageValue*>(to->data());
    221 
    222     FilterOperations filterOperationsResult;
    223     blendFilterOperations(anim, filterOperationsResult, fromValue->filterOperations(), toValue->filterOperations(), progress);
    224     if (!toValue->cachedImage())
    225         return to;
    226 
    227     RefPtr<StyleCachedImage> styledImage = StyleCachedImage::create(toValue->cachedImage());
    228 
    229     RefPtr<CSSImageValue> imageValue = CSSImageValue::create(toValue->cachedImage()->url(), styledImage.get());
    230     RefPtr<CSSValue> filterValue = ComputedStyleExtractor::valueForFilter(anim->renderer(), anim->renderer()->style(),
    231         filterOperationsResult, DoNotAdjustPixelValues);
     219static inline PassRefPtr<StyleImage> blendFilter(const AnimationBase* anim, CachedImage* image, const FilterOperations& from, const FilterOperations& to, double progress)
     220{
     221    ASSERT(image);
     222    FilterOperations filterResult = blendFilterOperations(anim, from, to, progress);
     223
     224    RefPtr<StyleCachedImage> styledImage = StyleCachedImage::create(image);
     225    RefPtr<CSSImageValue> imageValue = CSSImageValue::create(image->url(), styledImage.get());
     226    RefPtr<CSSValue> filterValue = ComputedStyleExtractor::valueForFilter(anim->renderer(), anim->renderer()->style(), filterResult, DoNotAdjustPixelValues);
    232227    RefPtr<CSSFilterImageValue> result = CSSFilterImageValue::create(imageValue, filterValue);
    233     result->setFilterOperations(filterOperationsResult);
     228    result->setFilterOperations(filterResult);
    234229
    235230    return StyleGeneratedImage::create(result.get());
    … …  
    320315            // Animation of generated images just possible if input images are equal.
    321316            // Otherwise fall back to cross fade animation.
    322             CSSFilterImageValue& fromFitler = *toCSSFilterImageValue(fromGenerated);
    323             CSSFilterImageValue& toFitler = *toCSSFilterImageValue(toGenerated);
    324             if (fromFitler.equalInputImages(toFitler))
    325                 return filterBlend(anim, from, to, progress);
     317            CSSFilterImageValue& fromFilter = *toCSSFilterImageValue(fromGenerated);
     318            CSSFilterImageValue& toFilter = *toCSSFilterImageValue(toGenerated);
     319            if (fromFilter.equalInputImages(toFilter) && fromFilter.cachedImage())
     320                return blendFilter(anim, fromFilter.cachedImage(), fromFilter.filterOperations(), toFilter.filterOperations(), progress);
    326321        }
    327322#endif
    … …  
    336331        // FIXME: Add support for animation between two *gradient() functions.
    337332        // https://bugs.webkit.org/show_bug.cgi?id=119956
     333#if ENABLE(CSS_FILTERS)
     334    } else if (from->isGeneratedImage() && to->isCachedImage()) {
     335        CSSImageGeneratorValue* fromGenerated = toStyleGeneratedImage(from)->imageValue();
     336        if (fromGenerated->isFilterImageValue()) {
     337            CSSFilterImageValue& fromFilter = *toCSSFilterImageValue(fromGenerated);
     338            if (fromFilter.cachedImage() && static_cast<StyleCachedImage*>(to)->cachedImage() == fromFilter.cachedImage())
     339                return blendFilter(anim, fromFilter.cachedImage(), fromFilter.filterOperations(), FilterOperations(), progress);
     340        }
     341        // FIXME: Add interpolation between cross-fade and image source.
     342    } else if (from->isCachedImage() && to->isGeneratedImage()) {
     343        CSSImageGeneratorValue* toGenerated = toStyleGeneratedImage(to)->imageValue();
     344        if (toGenerated->isFilterImageValue()) {
     345            CSSFilterImageValue& toFilter = *toCSSFilterImageValue(toGenerated);
     346            if (toFilter.cachedImage() && static_cast<StyleCachedImage*>(from)->cachedImage() == toFilter.cachedImage())     
     347                return blendFilter(anim, toFilter.cachedImage(), FilterOperations(), toFilter.filterOperations(), progress);
     348        }
     349#endif
     350        // FIXME: Add interpolation between image source and cross-fade.
    338351    }
    339352
Note: See TracChangeset for help on using the changeset viewer.