Changeset 155100 in webkit


Ignore:
Timestamp:
Sep 4, 2013 11:50:05 PM (11 years ago)
Author:
krit@webkit.org
Message:

Support interpolation between cross-fade() images
​https://bugs.webkit.org/show_bug.cgi?id=119955

Reviewed by Darin Adler.

Source/WebCore:

With this patch, CSS can animate from one -webkit-cross-fade
function to another, when the input images are the same in the
same order.

  • css/CSSCrossfadeValue.cpp: Added blend function.

(WebCore::blendFunc):
(WebCore::CSSCrossfadeValue::blend):
(WebCore::CSSCrossfadeValue::equals):
(WebCore::CSSCrossfadeValue::equalInputImages):

  • css/CSSCrossfadeValue.h: Added save casting functions.

(WebCore::toCSSCrossfadeValue):

  • css/CSSValue.h:

(WebCore::CSSValue::isCrossfadeValue):

  • page/animation/CSSPropertyAnimation.cpp: Add another condition to

interpolate between two -webkit-cross-fade functions.

(WebCore::blendFunc):

LayoutTests:

Test interpolation from one cross-fade function to another. Changed pixel test
to a ref test.

  • animations/cross-fade-background-image.html:
  • animations/cross-fade-background-image-expected.html: Added.
  • platform/mac/animations/cross-fade-background-image-expected.png: Removed.
  • platform/mac/animations/cross-fade-background-image-expected.txt: Removed.
Location:
trunk
Files:
1 added
2 deleted
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r155099 r155100  
     12013-09-04  Dirk Schulze  <krit@webkit.org>
     2
     3        Support interpolation between cross-fade() images
     4        https://bugs.webkit.org/show_bug.cgi?id=119955
     5
     6        Reviewed by Darin Adler.
     7
     8        Test interpolation from one cross-fade function to another. Changed pixel test
     9        to a ref test.
     10
     11        * animations/cross-fade-background-image.html:
     12        * animations/cross-fade-background-image-expected.html: Added.
     13        * platform/mac/animations/cross-fade-background-image-expected.png: Removed.
     14        * platform/mac/animations/cross-fade-background-image-expected.txt: Removed.
     15
    1162013-09-04  Zoltan Herczeg  <zherczeg@webkit.org>
    217

  • trunk/LayoutTests/animations/cross-fade-background-image.html

    r154906 r155100  
    55        position: absolute;
    66        left: 100px;
    7         top: 100px;
     7        top: 200px;
    88        height: 100px;
    99        width: 100px;
    … …  
    1414        position: absolute;
    1515        left: 100px;
    16         top: 200px;
     16        top: 300px;
    1717        height: 100px;
    1818        width: 100px;
    … …  
    2323        position: absolute;
    2424        left: 100px;
     25        top: 400px;
     26        height: 100px;
     27        width: 100px;
     28        background-color: red;
     29        background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%);
     30    }
     31    #boxAnim1 {
     32        position: absolute;
     33        left: 200px;
     34        top: 200px;
     35        height: 100px;
     36        width: 100px;
     37        background-color: red;
     38        -webkit-animation: animCross1 1s linear infinite;
     39    }
     40    #boxAnim2 {
     41        position: absolute;
     42        left: 200px;
    2543        top: 300px;
    2644        height: 100px;
    2745        width: 100px;
    2846        background-color: red;
    29         background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%);
     47        -webkit-animation: animCross2 1s linear infinite;
     48    }
     49    #boxAnim3 {
     50        position: absolute;
     51        left: 200px;
     52        top: 400px;
     53        height: 100px;
     54        width: 100px;
     55        background-color: red;
     56        -webkit-animation: animCross3 1s linear infinite;
    3057    }
    3158    @-webkit-keyframes anim {
    … …  
    3764        to   { background: url(resources/green-100.png); }
    3865    }
     66    @-webkit-keyframes animCross1 {
     67        from { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 20%); }
     68        to   { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.8); }
     69    }
     70    @-webkit-keyframes animCross2 {
     71        /* Image inputs are not identical - no animation.*/
     72        from { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 20%); }
     73        to   { background-image: -webkit-cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%); }
     74    }
     75    @-webkit-keyframes animCross3 {
     76        /* Direct image inputs are not identical - no animation.*/
     77        from { background-image: -webkit-cross-fade(-webkit-filter(url(resources/blue-100.png), contrast(0.5)), url(resources/green-100.png), 20%); }
     78        to   { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%); }
     79    }
    3980  </style>
    4081  <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
    … …  
    4586      ["anim", 2.5, ["box", "static:boxStatic"], "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
    4687      ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05],
     88      ["animCross1", 2.5, "boxAnim1", "backgroundImage", "-webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.5)", 0.05],
     89      ["animCross2", 2.5, "boxAnim2", "backgroundImage", "-webkit-cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%)", 0],
     90      ["animCross3", 2.5, "boxAnim3", "backgroundImage", "-webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%)", 0],
    4791    ];
    4892
    … …  
    56100<div id="boxStatic"></div>
    57101<div id="boxShorthand"></div>
     102<div id="boxAnim1"></div>
     103<div id="boxAnim2"></div>
     104<div id="boxAnim3"></div>
    58105<div id="result"></div>
    59106</body>

  • trunk/Source/WebCore/ChangeLog

    r155099 r155100  
     12013-09-04  Dirk Schulze  <krit@webkit.org>
     2
     3        Support interpolation between cross-fade() images
     4        https://bugs.webkit.org/show_bug.cgi?id=119955
     5
     6        Reviewed by Darin Adler.
     7
     8        With this patch, CSS can animate from one -webkit-cross-fade
     9        function to another, when the input images are the same in the
     10        same order.
     11
     12        * css/CSSCrossfadeValue.cpp: Added blend function.
     13        (WebCore::blendFunc):
     14        (WebCore::CSSCrossfadeValue::blend):
     15        (WebCore::CSSCrossfadeValue::equals):
     16        (WebCore::CSSCrossfadeValue::equalInputImages):
     17        * css/CSSCrossfadeValue.h: Added save casting functions.
     18        (WebCore::toCSSCrossfadeValue):
     19        * css/CSSValue.h:
     20        (WebCore::CSSValue::isCrossfadeValue):
     21        * page/animation/CSSPropertyAnimation.cpp: Add another condition to
     22            interpolate between two -webkit-cross-fade functions.
     23        (WebCore::blendFunc):
     24
    1252013-09-04  Zoltan Herczeg  <zherczeg@webkit.org>
    226

  • trunk/Source/WebCore/css/CSSCrossfadeValue.cpp

    r155060 r155100  
    11/*
    22 * Copyright (C) 2011 Apple Inc.  All rights reserved.
     3 * Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
    34 *
    45 * Redistribution and use in source and binary forms, with or without
    … …  
    2728#include "CSSCrossfadeValue.h"
    2829
     30#include "AnimationUtilities.h"
    2931#include "CSSImageValue.h"
    3032#include "CachedResourceLoader.h"
    … …  
    3739
    3840namespace WebCore {
     41
     42static inline double blendFunc(double from, double to, double progress)
     43{
     44    return blend(from, to, progress);
     45}
    3946
    4047static bool subimageKnownToBeOpaque(CSSValue* value, const RenderObject* renderer)
    … …  
    179186}
    180187
     188PassRefPtr<CSSCrossfadeValue> CSSCrossfadeValue::blend(const CSSCrossfadeValue& from, double progress) const
     189{
     190    ASSERT(equalInputImages(from));
     191    RefPtr<StyleCachedImage> toStyledImage = StyleCachedImage::create(m_cachedToImage.get());
     192    RefPtr<StyleCachedImage> fromStyledImage = StyleCachedImage::create(m_cachedFromImage.get());
     193
     194    RefPtr<CSSImageValue> fromImageValue = CSSImageValue::create(m_cachedFromImage->url(), fromStyledImage.get());
     195    RefPtr<CSSImageValue> toImageValue = CSSImageValue::create(m_cachedToImage->url(), toStyledImage.get());
     196
     197    RefPtr<CSSCrossfadeValue> crossfadeValue = CSSCrossfadeValue::create(fromImageValue, toImageValue);
     198
     199    double fromPercentage = from.m_percentageValue->getDoubleValue();
     200    if (from.m_percentageValue->isPercentage())
     201        fromPercentage /= 100.0;
     202    double toPercentage = m_percentageValue->getDoubleValue();
     203    if (m_percentageValue->isPercentage())
     204        toPercentage /= 100.0;
     205    crossfadeValue->setPercentage(CSSPrimitiveValue::create(blendFunc(fromPercentage, toPercentage, progress), CSSPrimitiveValue::CSS_NUMBER));
     206    return crossfadeValue.release();
     207}
     208
    181209bool CSSCrossfadeValue::equals(const CSSCrossfadeValue& other) const
    182210{
     211    return equalInputImages(other)
     212        && compareCSSValuePtr(m_percentageValue, other.m_percentageValue);
     213}
     214
     215
     216bool CSSCrossfadeValue::equalInputImages(const CSSCrossfadeValue& other) const
     217{
    183218    return compareCSSValuePtr(m_fromValue, other.m_fromValue)
    184         && compareCSSValuePtr(m_toValue, other.m_toValue)
    185         && compareCSSValuePtr(m_percentageValue, other.m_percentageValue);
     219        && compareCSSValuePtr(m_toValue, other.m_toValue);
    186220}
    187221

  • trunk/Source/WebCore/css/CSSCrossfadeValue.h

    r155060 r155100  
    6666    bool hasFailedOrCanceledSubresources() const;
    6767
     68    PassRefPtr<CSSCrossfadeValue> blend(const CSSCrossfadeValue&, double) const;
     69
    6870    bool equals(const CSSCrossfadeValue&) const;
     71
     72    bool equalInputImages(const CSSCrossfadeValue&) const;
    6973
    7074private:
    … …  
    107111};
    108112
     113inline CSSCrossfadeValue* toCSSCrossfadeValue(CSSImageGeneratorValue* value)
     114{
     115    ASSERT_WITH_SECURITY_IMPLICATION(!value || value->isCrossfadeValue());
     116    return static_cast<CSSCrossfadeValue*>(value);
     117}
     118
    109119} // namespace WebCore
    110120

  • trunk/Source/WebCore/css/CSSValue.h

    r154133 r155100  
    7272    bool isAspectRatioValue() const { return m_classType == AspectRatioClass; }
    7373    bool isBorderImageSliceValue() const { return m_classType == BorderImageSliceClass; }
     74    bool isCrossfadeValue() const { return m_classType == CrossfadeClass; }
    7475    bool isCursorImageValue() const { return m_classType == CursorImageClass; }
    7576    bool isFontFeatureValue() const { return m_classType == FontFeatureClass; }

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

    r154906 r155100  
    11/*
    22 * Copyright (C) 2007, 2008, 2009, 2013 Apple Inc. All rights reserved.
    3  * Copyright (C) 2012 Adobe Systems Incorporated. All rights reserved.
     3 * Copyright (C) 2012, 2013 Adobe Systems Incorporated. All rights reserved.
    44 *
    55 * Redistribution and use in source and binary forms, with or without
    … …  
    317317            // Animation of generated images just possible if input images are equal.
    318318            // Otherwise fall back to cross fade animation.
    319             CSSFilterImageValue* fromFitler = toCSSFilterImageValue(fromGenerated);
    320             CSSFilterImageValue* toFitler = toCSSFilterImageValue(toGenerated);
    321             if (fromFitler->equalInputImages(*toFitler))
     319            CSSFilterImageValue& fromFitler = *toCSSFilterImageValue(fromGenerated);
     320            CSSFilterImageValue& toFitler = *toCSSFilterImageValue(toGenerated);
     321            if (fromFitler.equalInputImages(toFitler))
    322322                return filterBlend(anim, from, to, progress);
    323323        }
    324 #else
    325         UNUSED_PARAM(fromGenerated);
    326         UNUSED_PARAM(toGenerated);
    327 #endif
    328         // FIXME: Add support for animation between two cross-fade() functions.
    329         // https://bugs.webkit.org/show_bug.cgi?id=119955
     324#endif
     325
     326        if (fromGenerated->isCrossfadeValue() && toGenerated->isCrossfadeValue()) {
     327            CSSCrossfadeValue& fromCrossfade = *toCSSCrossfadeValue(fromGenerated);
     328            CSSCrossfadeValue& toCrossfade = *toCSSCrossfadeValue(toGenerated);
     329            if (fromCrossfade.equalInputImages(toCrossfade))
     330                return StyleGeneratedImage::create(toCrossfade.blend(fromCrossfade, progress).get());
     331        }
    330332
    331333        // FIXME: Add support for animation between two *gradient() functions.
    332334        // https://bugs.webkit.org/show_bug.cgi?id=119956
    333 }
     335    }
    334336
    335337    // FIXME: Add support cross fade between cached and generated images.
Note: See TracChangeset for help on using the changeset viewer.