2018-09-27 09:49:52 +00:00
|
|
|
<!DOCTYPE html>
|
2012-02-10 19:41:35 +00:00
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
.box {
|
|
|
|
|
height: 100px;
|
|
|
|
|
width: 100px;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
background-color: blue;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
-webkit-transform:translateZ(0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#grayscale-box {
|
|
|
|
|
-webkit-animation: grayscale-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#sepia-box {
|
|
|
|
|
-webkit-animation: sepia-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#saturate-box {
|
|
|
|
|
-webkit-animation: saturate-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#huerotate-box {
|
|
|
|
|
-webkit-animation: huerotate-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#invert-box {
|
|
|
|
|
-webkit-animation: invert-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#opacity-box {
|
|
|
|
|
-webkit-animation: opacity-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#brightness-box {
|
|
|
|
|
-webkit-animation: brightness-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#contrast-box {
|
|
|
|
|
-webkit-animation: contrast-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#blur-box {
|
|
|
|
|
-webkit-animation: blur-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#dropshadow-box {
|
|
|
|
|
-webkit-animation: dropshadow-anim 2s linear
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes grayscale-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: grayscale(0.5); }
|
|
|
|
|
to { -webkit-filter: grayscale(1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes sepia-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: sepia(0.5); }
|
|
|
|
|
to { -webkit-filter: sepia(1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes saturate-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: saturate(0.5); }
|
|
|
|
|
to { -webkit-filter: saturate(1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes huerotate-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: hue-rotate(90deg); }
|
|
|
|
|
to { -webkit-filter: hue-rotate(180deg); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes invert-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: invert(0.5); }
|
|
|
|
|
to { -webkit-filter: invert(1); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes opacity-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: opacity(0.5); }
|
|
|
|
|
to { -webkit-filter: opacity(0); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes brightness-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: brightness(0.5); }
|
|
|
|
|
to { -webkit-filter: brightness(0); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes contrast-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: contrast(0.5); }
|
|
|
|
|
to { -webkit-filter: contrast(0); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes blur-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: blur(10px); }
|
|
|
|
|
to { -webkit-filter: blur(20px); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes dropshadow-anim {
|
|
|
|
|
from { }
|
|
|
|
|
50% { -webkit-filter: grayscale(10px 15px 5px rgba(128, 128, 128, 0.5); }
|
|
|
|
|
to { -webkit-filter: drop-shadow(20px 30px 10px black)); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<script src="../../animations/resources/animation-test-helpers.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
const expectedValues = [
|
|
|
|
|
// [animation-name, time, element-id, property, expected-value, tolerance]
|
|
|
|
|
["grayscale-anim", 0.5, "grayscale-box", "webkitFilter", 'grayscale(0.25)', 0.05],
|
|
|
|
|
["sepia-anim", 0.5, "sepia-box", "webkitFilter", 'sepia(0.25)', 0.05],
|
|
|
|
|
["saturate-anim", 0.5, "saturate-box", "webkitFilter", 'saturate(0.75)', 0.05],
|
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.
Canonical link: https://commits.webkit.org/138534@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@154906 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2013-08-30 19:29:03 +00:00
|
|
|
["huerotate-anim", 0.5, "huerotate-box", "webkitFilter", 'hue-rotate(45deg)', 3],
|
2012-02-10 19:41:35 +00:00
|
|
|
["invert-anim", 0.5, "invert-box", "webkitFilter", 'invert(0.25)', 0.05],
|
|
|
|
|
["opacity-anim", 0.5, "opacity-box", "webkitFilter", 'opacity(0.75)', 0.05],
|
|
|
|
|
["brightness-anim", 0.5, "brightness-box", "webkitFilter", 'brightness(0.75)', 0.05],
|
|
|
|
|
["contrast-anim", 0.5, "contrast-box", "webkitFilter", 'contrast(0.75)', 0.05],
|
|
|
|
|
["blur-anim", 0.5, "blur-box", "webkitFilter", 'blur(5px)', 1],
|
|
|
|
|
// FIXME when we implement computed filter style for drop-shadow.
|
|
|
|
|
// ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.25) 5px 8px 3px )', 2],
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
runAnimationTest(expectedValues);
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="box" id="grayscale-box"></div>
|
|
|
|
|
<div class="box" id="sepia-box"></div>
|
|
|
|
|
<div class="box" id="saturate-box"></div>
|
|
|
|
|
<div class="box" id="huerotate-box"></div>
|
|
|
|
|
<div class="box" id="invert-box"></div>
|
|
|
|
|
<div class="box" id="opacity-box"></div>
|
|
|
|
|
<div class="box" id="brightness-box"></div>
|
|
|
|
|
<div class="box" id="contrast-box"></div>
|
|
|
|
|
<div class="box" id="blur-box"></div>
|
|
|
|
|
<!-- <div class="box" id="dropshadow-box"></div> -->
|
|
|
|
|
|
|
|
|
|
<div id="result">
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|