Diff
Modified: trunk/LayoutTests/ChangeLog (155239 => 155240)
--- trunk/LayoutTests/ChangeLog 2013-09-07 05:25:55 UTC (rev 155239)
+++ trunk/LayoutTests/ChangeLog 2013-09-07 05:28:23 UTC (rev 155240)
@@ -1,3 +1,16 @@
+2013-09-06 Dirk Schulze <[email protected]>
+
+ Interpolate between CSS filter() and cached images
+ https://bugs.webkit.org/show_bug.cgi?id=120602
+
+ Reviewed by Simon Fraser.
+
+ 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:
+
2013-09-06 Ryosuke Niwa <[email protected]>
REGRESSION(r155100): animations/cross-fade-background-image.html fails
Modified: trunk/LayoutTests/fast/filter-image/filter-image-animation-expected.txt (155239 => 155240)
--- trunk/LayoutTests/fast/filter-image/filter-image-animation-expected.txt 2013-09-07 05:25:55 UTC (rev 155239)
+++ trunk/LayoutTests/fast/filter-image/filter-image-animation-expected.txt 2013-09-07 05:28:23 UTC (rev 155240)
@@ -1,4 +1,4 @@
-
+
PASS - "backgroundImage" property for "brightness" element at 1s saw something close to: -webkit-filter(url(image.svg), brightness(0.5))
PASS - "backgroundImage" property for "blur" element at 1s saw something close to: -webkit-filter(url(image.svg), blur(5px))
PASS - "backgroundImage" property for "grayscale" element at 1s saw something close to: -webkit-filter(url(image.svg), grayscale(0.5))
@@ -7,7 +7,9 @@
PASS - "backgroundImage" property for "string" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.5))
PASS - "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))
PASS - "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))
+PASS - "backgroundImage" property for "urlfilter" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.25))
+PASS - "backgroundImage" property for "filterurl" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.25))
+PASS - "backgroundImage" property for "filterdiffurl" element at 1s saw something close to: -webkit-filter(url(blue.svg), sepia(0.5))
PASS - "backgroundImage" property for "generated1" element at 1s saw something close to: -webkit-filter(-webkit-filter(url(image.svg), blur(3px)), sepia(0))
PASS - "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))
-PASS - "backgroundImage" property for "urlfilter" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.5))
Modified: trunk/LayoutTests/fast/filter-image/filter-image-animation.html (155239 => 155240)
--- trunk/LayoutTests/fast/filter-image/filter-image-animation.html 2013-09-07 05:25:55 UTC (rev 155239)
+++ trunk/LayoutTests/fast/filter-image/filter-image-animation.html 2013-09-07 05:28:23 UTC (rev 155240)
@@ -43,6 +43,18 @@
-webkit-animation: multiple-anim2 2s linear;
}
+ #urlfilter {
+ -webkit-animation: url-to-filter-anim 2s linear;
+ }
+
+ #filterurl {
+ -webkit-animation: filter-to-url-anim 2s linear;
+ }
+
+ #filterdiffurl {
+ -webkit-animation: filter-diff-url-anim 2s linear;
+ }
+
#generated1 {
-webkit-animation: generated-anim1 2s linear;
}
@@ -51,11 +63,6 @@
-webkit-animation: generated-anim2 2s linear;
}
- #urlfilter {
- -webkit-animation: url-to-filter-anim 2s linear;
- }
-
-
@-webkit-keyframes brightness-anim {
from { background-image: -webkit-filter(url(resources/image.svg), brightness(1)); }
to { background-image: -webkit-filter(url(resources/image.svg), brightness(0)); }
@@ -96,6 +103,21 @@
to { background-image: -webkit-filter(url(resources/image.svg), contrast(0.75) blur(3px) hue-rotate(45deg)); }
}
+ @-webkit-keyframes url-to-filter-anim {
+ from { background-image: url(resources/image.svg); }
+ to { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
+ }
+
+ @-webkit-keyframes filter-to-url-anim {
+ from { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
+ to { background-image: url(resources/image.svg); }
+ }
+
+ @-webkit-keyframes filter-diff-url-anim {
+ from { background-image: url(resources/image.svg); }
+ to { background-image: -webkit-filter(url(resources/blue.svg), sepia(0.5)); }
+ }
+
@-webkit-keyframes generated-anim1 {
from { background-image: -webkit-filter(-webkit-filter(url(resources/image.svg), blur(3px)), sepia(1)); }
to { background-image: -webkit-filter(-webkit-filter(url(resources/image.svg), blur(3px)), sepia(0)); }
@@ -105,11 +127,6 @@
from { background-image: -webkit-filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(1)); }
to { background-image: -webkit-filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(0)); }
}
-
- @-webkit-keyframes url-to-filter-anim {
- from { background-image: url(resources/image.svg); }
- to { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
- }
</style>
<script src=""
<script type="text/_javascript_">
@@ -123,10 +140,12 @@
["string-anim", 1, "string", "backgroundImage", "-webkit-filter(url(image.svg), sepia(0.5))", 0],
["multiple-anim1", 1, "multiple1", "backgroundImage", "-webkit-filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
["multiple-anim2", 1, "multiple2", "backgroundImage", "-webkit-filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
+ ["url-to-filter-anim", 1, "urlfilter", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.25))", 0.05],
+ ["filter-to-url-anim", 1, "filterurl", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.25))", 0.05],
+ ["filter-diff-url-anim", 1, "filterdiffurl", "backgroundImage", " -webkit-filter(url(blue.svg), sepia(0.5))", 0],
// FIXME: We need to support generated images as input to other generated images for animations first.
["generated-anim1", 1, "generated1", "backgroundImage", "-webkit-filter(-webkit-filter(url(image.svg), blur(3px)), sepia(0))", 0],
["generated-anim2", 1, "generated2", "backgroundImage", "-webkit-filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))", 0],
- ["url-to-filter-anim", 1, "urlfilter", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.5))", 0],
];
runAnimationTest(expectedValues);
@@ -142,9 +161,11 @@
<div class="box" id="string"></div>
<div class="box" id="multiple1"></div>
<div class="box" id="multiple2"></div>
+<div class="box" id="urlfilter"></div>
+<div class="box" id="filterurl"></div>
+<div class="box" id="filterdiffurl"></div>
<div class="box" id="generated1"></div>
<div class="box" id="generated2"></div>
-<div class="box" id="urlfilter"></div>
<div id="result">
</div>
Modified: trunk/Source/WebCore/ChangeLog (155239 => 155240)
--- trunk/Source/WebCore/ChangeLog 2013-09-07 05:25:55 UTC (rev 155239)
+++ trunk/Source/WebCore/ChangeLog 2013-09-07 05:28:23 UTC (rev 155240)
@@ -1,3 +1,21 @@
+2013-09-06 Dirk Schulze <[email protected]>
+
+ Interpolate between CSS filter() and cached images
+ https://bugs.webkit.org/show_bug.cgi?id=120602
+
+ Reviewed by Simon Fraser.
+
+ 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):
+
2013-09-06 Ryosuke Niwa <[email protected]>
Elements retained by AccessibilityImageMapLink leak
Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (155239 => 155240)
--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-09-07 05:25:55 UTC (rev 155239)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-09-07 05:28:23 UTC (rev 155240)
@@ -177,8 +177,9 @@
return toOp->blend(fromOp, progress, blendToPassthrough);
}
-static inline void blendFilterOperations(const AnimationBase* anim, FilterOperations& result, const FilterOperations& from, const FilterOperations& to, double progress)
+static inline FilterOperations blendFilterOperations(const AnimationBase* anim, const FilterOperations& from, const FilterOperations& to, double progress)
{
+ FilterOperations result;
size_t fromSize = from.operations().size();
size_t toSize = to.operations().size();
size_t size = max(fromSize, toSize);
@@ -196,6 +197,7 @@
result.operations().append(fromOp ? fromOp : identityOp);
}
}
+ return result;
}
static inline FilterOperations blendFunc(const AnimationBase* anim, const FilterOperations& from, const FilterOperations& to, double progress)
@@ -204,7 +206,7 @@
// If we have a filter function list, use that to do a per-function animation.
if (anim->filterFunctionListsMatch())
- blendFilterOperations(anim, result, from, to, progress);
+ result = blendFilterOperations(anim, from, to, progress);
else {
// 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.
// For now we'll just fail to animate.
@@ -214,23 +216,16 @@
return result;
}
-static inline PassRefPtr<StyleImage> filterBlend(const AnimationBase* anim, StyleImage* from, StyleImage* to, double progress)
+static inline PassRefPtr<StyleImage> blendFilter(const AnimationBase* anim, CachedImage* image, const FilterOperations& from, const FilterOperations& to, double progress)
{
- CSSFilterImageValue* fromValue = static_cast<CSSFilterImageValue*>(from->data());
- CSSFilterImageValue* toValue = static_cast<CSSFilterImageValue*>(to->data());
+ ASSERT(image);
+ FilterOperations filterResult = blendFilterOperations(anim, from, to, progress);
- FilterOperations filterOperationsResult;
- blendFilterOperations(anim, filterOperationsResult, fromValue->filterOperations(), toValue->filterOperations(), progress);
- if (!toValue->cachedImage())
- return to;
-
- RefPtr<StyleCachedImage> styledImage = StyleCachedImage::create(toValue->cachedImage());
-
- RefPtr<CSSImageValue> imageValue = CSSImageValue::create(toValue->cachedImage()->url(), styledImage.get());
- RefPtr<CSSValue> filterValue = ComputedStyleExtractor::valueForFilter(anim->renderer(), anim->renderer()->style(),
- filterOperationsResult, DoNotAdjustPixelValues);
+ RefPtr<StyleCachedImage> styledImage = StyleCachedImage::create(image);
+ RefPtr<CSSImageValue> imageValue = CSSImageValue::create(image->url(), styledImage.get());
+ RefPtr<CSSValue> filterValue = ComputedStyleExtractor::valueForFilter(anim->renderer(), anim->renderer()->style(), filterResult, DoNotAdjustPixelValues);
RefPtr<CSSFilterImageValue> result = CSSFilterImageValue::create(imageValue, filterValue);
- result->setFilterOperations(filterOperationsResult);
+ result->setFilterOperations(filterResult);
return StyleGeneratedImage::create(result.get());
}
@@ -319,10 +314,10 @@
if (fromGenerated->isFilterImageValue() && toGenerated->isFilterImageValue()) {
// Animation of generated images just possible if input images are equal.
// Otherwise fall back to cross fade animation.
- CSSFilterImageValue& fromFitler = *toCSSFilterImageValue(fromGenerated);
- CSSFilterImageValue& toFitler = *toCSSFilterImageValue(toGenerated);
- if (fromFitler.equalInputImages(toFitler))
- return filterBlend(anim, from, to, progress);
+ CSSFilterImageValue& fromFilter = *toCSSFilterImageValue(fromGenerated);
+ CSSFilterImageValue& toFilter = *toCSSFilterImageValue(toGenerated);
+ if (fromFilter.equalInputImages(toFilter) && fromFilter.cachedImage())
+ return blendFilter(anim, fromFilter.cachedImage(), fromFilter.filterOperations(), toFilter.filterOperations(), progress);
}
#endif
@@ -335,6 +330,24 @@
// FIXME: Add support for animation between two *gradient() functions.
// https://bugs.webkit.org/show_bug.cgi?id=119956
+#if ENABLE(CSS_FILTERS)
+ } else if (from->isGeneratedImage() && to->isCachedImage()) {
+ CSSImageGeneratorValue* fromGenerated = toStyleGeneratedImage(from)->imageValue();
+ if (fromGenerated->isFilterImageValue()) {
+ CSSFilterImageValue& fromFilter = *toCSSFilterImageValue(fromGenerated);
+ if (fromFilter.cachedImage() && static_cast<StyleCachedImage*>(to)->cachedImage() == fromFilter.cachedImage())
+ return blendFilter(anim, fromFilter.cachedImage(), fromFilter.filterOperations(), FilterOperations(), progress);
+ }
+ // FIXME: Add interpolation between cross-fade and image source.
+ } else if (from->isCachedImage() && to->isGeneratedImage()) {
+ CSSImageGeneratorValue* toGenerated = toStyleGeneratedImage(to)->imageValue();
+ if (toGenerated->isFilterImageValue()) {
+ CSSFilterImageValue& toFilter = *toCSSFilterImageValue(toGenerated);
+ if (toFilter.cachedImage() && static_cast<StyleCachedImage*>(from)->cachedImage() == toFilter.cachedImage())
+ return blendFilter(anim, toFilter.cachedImage(), FilterOperations(), toFilter.filterOperations(), progress);
+ }
+#endif
+ // FIXME: Add interpolation between image source and cross-fade.
}
// FIXME: Add support cross fade between cached and generated images.
