Safari mis-applies "animation-fill-mode: forwards" when using fractional iteration count
https://bugs.webkit.org/show_bug.cgi?id=146996
Reviewed by Dean Jackson.
Source/WebCore:
animation-fill-mode: forwards with fractional iteration counts always snapped to
1 or 0, depending on direction. Fix to compute the fill-forward state from the
correct keyframes.
If filling forwards, AnimationBase::progress() sets the elapsed time to the duration,
then uses fractionalTime() to handle animation direction mapping. If the fractionalTime
is integral, we can return early, avoiding the cost of mapping through timing functions.
Tested by existing tests.
* page/animation/AnimationBase.cpp:
(WebCore::AnimationBase::progress):
(WebCore::AnimationBase::getElapsedTime):
* page/animation/KeyframeAnimation.cpp:
(WebCore::KeyframeAnimation::fetchIntervalEndpointsForProperty): It was possible
to end up with prevIndex == nextIndex with reverse animations, which resulted
in divide-by-zero when computing scale. Fix by picking a nextIndex that is different
from prevIndex.
LayoutTests:
Progressions, improved tests.
* animations/animation-direction-reverse-fill-mode-expected.txt: New results; this is a progression.
* animations/animation-direction-reverse-fill-mode.html: Use a shorter animation. Fixed results.
* animations/fill-mode-iteration-count-non-integer-expected.txt:
* animations/fill-mode-iteration-count-non-integer.html: Use iteration counts that are not multiplies
of 0.5, so the test can differentiation between forward and backwards states. Add a non-linear timing
function to check that fill-forwards consults the timing functions. Don't print exact succeeding
results because they may have floating point values.
* animations/fill-mode-reverse-expected.txt: New results; this is a progression.
* animations/fill-mode-reverse.html: Fixed results, use gray.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@187121 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/animations/fill-mode-reverse.html b/LayoutTests/animations/fill-mode-reverse.html
index c279e72..89b45a8 100644
--- a/LayoutTests/animations/fill-mode-reverse.html
+++ b/LayoutTests/animations/fill-mode-reverse.html
@@ -39,7 +39,7 @@
-webkit-animation-fill-mode: both;
}
#e {
- background-color: #999;
+ background-color: gray;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
@@ -52,8 +52,8 @@
const expectedValues = [
{id: "a", start: 100, end: 100},
{id: "b", start: 300, end: 100},
- {id: "c", start: 100, end: 300},
- {id: "d", start: 300, end: 300},
+ {id: "c", start: 100, end: 200},
+ {id: "d", start: 300, end: 200},
{id: "e", start: 200, end: 200}
];
var result = "";
