Skip to content
Permalink
Browse files
2010-03-05 Dean Jackson <dino@apple.com>
        Reviewed by Simon Fraser and Chris Marrin.

        Bug 26869: Add fill modes for CSS Animations
        https://bugs.webkit.org/show_bug.cgi?id=26869

        Tests: animations/fill-mode-removed.html
               animations/fill-mode-transform.html
               animations/fill-mode.html

        * css/CSSComputedStyleDeclaration.cpp:
        * css/CSSParser.cpp:
        * css/CSSParser.h:
        * css/CSSPropertyNames.in:
        * css/CSSStyleSelector.cpp:
        * css/CSSStyleSelector.h:
        * css/CSSValueKeywords.in:
            - parse, assign and retrieve the value of the new
              -webkit-animation-fill-mode property
        * page/animation/AnimationBase.cpp:
        * page/animation/AnimationBase.h:
            - new state in animation engine for a finished animation
              that is "filling" forwards in time. This allows the
              engine to keep the animation around and not revert to the
              old style.
            - update the timer code to indicate it doesn't need to
              keep animating if it is filling
            - now that animations can extend beyond their elapsed time,
              make sure progress works correctly with iteration counts
        * page/animation/KeyframeAnimation.cpp:
        (WebCore::KeyframeAnimation::animate):
            - ensure correct style value is returned at the right
              time by checking for fill mode
        (WebCore::KeyframeAnimation::onAnimationEnd):
            - continue to send the end event, but only remove the
              animation if it isn't filling forwards
        * platform/animation/Animation.cpp:
        * platform/animation/Animation.h:
            - new fill mode member property
        * platform/animation/AnimationList.cpp:
            - ensure the fill mode is propagated to a list of style valus
        * platform/graphics/mac/GraphicsLayerCA.mm:
            - make hardware layers use Core Animation's fill mode

Canonical link: https://commits.webkit.org/46873@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@55576 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
grorg committed Mar 5, 2010
1 parent b79100a commit f591dafef379c6dacf7f58bb18aeadf78425d9a7
Showing 31 changed files with 659 additions and 16 deletions.
@@ -1,3 +1,30 @@
2010-03-05 Dean Jackson <dino@apple.com>

Reviewed by Simon Fraser and Chris Marrin.

Bug 26869: Add fill modes for CSS Animations
https://bugs.webkit.org/show_bug.cgi?id=26869

Add tests for -webkit-animation-fill-mode property,
and update existing computed style tests with the
new property.

* animations/computed-style-expected.txt:
* animations/computed-style.html:
* animations/fill-mode-expected.txt: Added.
* animations/fill-mode-removed-expected.txt: Added.
* animations/fill-mode-removed.html: Added.
* animations/fill-mode-transform-expected.txt: Added.
* animations/fill-mode-transform.html: Added.
* animations/fill-mode.html: Added.
* animations/fill-unset-properties-expected.txt:
* animations/fill-unset-properties.html:
* fast/css/getComputedStyle/computed-style-expected.txt:
* fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* platform/mac/fast/css/getComputedStyle/computed-style-expected.txt:
* platform/mac/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* svg/css/getComputedStyle-basic-expected.txt:

2010-03-05 Fumitoshi Ukai <ukai@chromium.org>

Reviewed by Alexey Proskuryakov.
@@ -7,6 +7,8 @@ PASS test1Style.webkitAnimationName is 'anim1'
PASS test2Style.webkitAnimationName is 'anim2, anim3'
PASS test1Style.webkitAnimationDuration is '10s'
PASS test2Style.webkitAnimationDuration is '5s, 2.5s'
PASS test1Style.webkitAnimationFillMode is 'backwards'
PASS test2Style.webkitAnimationFillMode is 'forwards, both'
PASS test1Style.webkitAnimationIterationCount is '10'
PASS test2Style.webkitAnimationIterationCount is '10, infinite'
PASS test1Style.webkitAnimationTimingFunction is 'cubic-bezier(0, 0, 1, 1)'
@@ -9,6 +9,7 @@
position: relative;
-webkit-animation-name: anim1;
-webkit-animation-duration: 10s;
-webkit-animation-fill-mode: backwards;
-webkit-animation-iteration-count: 10;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: normal;
@@ -20,6 +21,7 @@
position: relative;
-webkit-animation-name: anim2, anim3;
-webkit-animation-duration: 5s, 2500ms;
-webkit-animation-fill-mode: forwards, both;
-webkit-animation-iteration-count: 10, infinite;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-direction: normal, alternate;
@@ -60,6 +62,9 @@
shouldBe("test1Style.webkitAnimationDuration", "'10s'");
shouldBe("test2Style.webkitAnimationDuration", "'5s, 2.5s'");

shouldBe("test1Style.webkitAnimationFillMode", "'backwards'");
shouldBe("test2Style.webkitAnimationFillMode", "'forwards, both'");

shouldBe("test1Style.webkitAnimationIterationCount", "'10'");
shouldBe("test2Style.webkitAnimationIterationCount", "'10, infinite'");

@@ -0,0 +1,17 @@
This test performs an animation of the left property with four different fill modes. It animates over 0.1 second with a 0.1 second delay. It takes snapshots at document load and the end of the animation.
None
Backwards
Forwards
Both
Both iterating
PASS - start of animation - id: a expected: 100 actual: 100
PASS - start of animation - id: b expected: 200 actual: 200
PASS - start of animation - id: c expected: 100 actual: 100
PASS - start of animation - id: d expected: 200 actual: 200
PASS - start of animation - id: e expected: 200 actual: 200
PASS - end of animation - id: a expected: 100 actual: 100
PASS - end of animation - id: b expected: 100 actual: 100
PASS - end of animation - id: c expected: 300 actual: 300
PASS - end of animation - id: d expected: 300 actual: 300
PASS - end of animation - id: e expected: 200 actual: 200

@@ -0,0 +1,10 @@
This test performs an animation of the left property with four different fill modes. It animates over 0.1 second with a 0.1 second delay. At the end of the animations, we remove the animation name which should cause the value to jump back to the unanimated style.
None
Backwards
Forwards
Both
PASS - id: a expected: 100 actual: 100
PASS - id: b expected: 100 actual: 100
PASS - id: c expected: 100 actual: 100
PASS - id: d expected: 100 actual: 100

@@ -0,0 +1,110 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test end values with fill modes after animation is removed</title>
<style type="text/css" media="screen">
.box {
position: relative;
left: 100px;
top: 10px;
height: 100px;
width: 100px;
-webkit-animation-delay: 0.1s;
-webkit-animation-duration: 0.1s;
-webkit-animation-timing-function: linear;
-webkit-animation-name: "anim";
}
@-webkit-keyframes "anim" {
from { left: 200px; }
to { left: 300px; }
}
#a {
background-color: blue;
-webkit-animation-fill-mode: none;
}
#b {
background-color: red;
-webkit-animation-fill-mode: backwards;
}
#c {
background-color: green;
-webkit-animation-fill-mode: forwards;
}
#d {
background-color: yellow;
-webkit-animation-fill-mode: both;
}
</style>
<script type="text/javascript" charset="utf-8">
const numAnims = 4;
var animsFinished = 0;
const expectedEndValues = [
{id: "a", value: 100},
{id: "b", value: 100},
{id: "c", value: 100},
{id: "d", value: 100}
];

if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}

function animationEnded(event) {
event.target.style.webkitAnimationName = "none";
if (++animsFinished == numAnims) {
setTimeout(endTest, 0); // this set timeout should be ok in the test environment
// since we're just giving style a chance to resolve
}
};

function endTest() {

var result = "";
for (var i=0; i < expectedEndValues.length; i++) {
var el = document.getElementById(expectedEndValues[i].id);
var expectedValue = expectedEndValues[i].value;
var realValue = window.getComputedStyle(el).getPropertyCSSValue("left").getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
if (Math.abs(expectedValue - realValue) < 5) {
result += "PASS";
} else {
result += "FAIL";
}
result += " - id: " + expectedEndValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
}
document.getElementById('result').innerHTML = result;

if (window.layoutTestController)
layoutTestController.notifyDone();
}

window.onload = function () {
document.addEventListener("webkitAnimationEnd", animationEnded, false);
};

</script>
</head>
<body>
This test performs an animation of the left property with four different
fill modes. It animates over 0.1 second with a 0.1 second delay.
At the end of the animations, we remove the animation name which should
cause the value to jump back to the unanimated style.
<div id="a" class="box">
None
</div>
<div id="b" class="box">
Backwards
</div>
<div id="c" class="box">
Forwards
</div>
<div id="d" class="box">
Both
</div>
<div id="result">
</div>
</body>
</html>
@@ -0,0 +1,19 @@
This test performs an animation of the transform property with four different fill modes. It animates over 0.1 second with a 0.1 second delay. It takes snapshots at document load and the end of the animations.
None
Backwards
Forwards
Both
Both Iterate
Note that due to Bug 35714 the expected values for the start of the animation on elements "a" and "c" are intentionally incorrect. The expected values should be 100, not 200. If this test fails, then it's likely that bug has been fixed and the expected values here should be updated.

PASS - start of animation - id: a expected: 200 actual: 200
PASS - start of animation - id: b expected: 200 actual: 200
PASS - start of animation - id: c expected: 200 actual: 200
PASS - start of animation - id: d expected: 200 actual: 200
PASS - start of animation - id: e expected: 200 actual: 200
PASS - end of animation - id: a expected: 100 actual: 100
PASS - end of animation - id: b expected: 100 actual: 100
PASS - end of animation - id: c expected: 300 actual: 300
PASS - end of animation - id: d expected: 300 actual: 300
PASS - end of animation - id: e expected: 200 actual: 200

@@ -0,0 +1,140 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test simple fill mode on transform</title>
<style type="text/css" media="screen">
.box {
position: relative;
left: 10px;
top: 10px;
height: 100px;
width: 100px;
-webkit-transform: translate3d(100px, 0, 0);
-webkit-animation-delay: 0.1s;
-webkit-animation-duration: 0.1s;
-webkit-animation-timing-function: linear;
-webkit-animation-name: anim;
}
@-webkit-keyframes anim {
from { -webkit-transform: translate3d(200px, 0, 0); }
to { -webkit-transform: translate3d(300px, 0, 0); }
}
#a {
background-color: blue;
-webkit-animation-fill-mode: none;
}
#b {
background-color: red;
-webkit-animation-fill-mode: backwards;
}
#c {
background-color: green;
-webkit-animation-fill-mode: forwards;
}
#d {
background-color: yellow;
-webkit-animation-fill-mode: both;
}
#e {
background-color: #999;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
</style>
<script type="text/javascript" charset="utf-8">
const numAnims = 5;
var animsFinished = 0;
const allowance = 5;
const expectedValues = [
{id: "a", start: 200, end: 100},
{id: "b", start: 200, end: 100},
{id: "c", start: 200, end: 300},
{id: "d", start: 200, end: 300},
{id: "e", start: 200, end: 200}
];
var result = "";

if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}

function animationEnded(event) {
if (++animsFinished == numAnims) {
setTimeout(endTest, 0); // this set timeout should be ok in the test environment
// since we're just giving style a chance to resolve
}
};

function endTest() {

for (var i=0; i < expectedValues.length; i++) {
var el = document.getElementById(expectedValues[i].id);
var expectedValue = expectedValues[i].end;
var computedValue = window.getComputedStyle(el).webkitTransform;
var realValue = parseFloat(computedValue.split("(")[1].split(",")[4]);
if (Math.abs(expectedValue - realValue) < allowance) {
result += "PASS";
} else {
result += "FAIL";
}
result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
}
document.getElementById('result').innerHTML = result;

if (window.layoutTestController)
layoutTestController.notifyDone();
}

window.onload = function () {
for (var i=0; i < expectedValues.length; i++) {
var el = document.getElementById(expectedValues[i].id);
var expectedValue = expectedValues[i].start;
var computedValue = window.getComputedStyle(el).webkitTransform;
var realValue = parseFloat(computedValue.split("(")[1].split(",")[4]);
if (Math.abs(expectedValue - realValue) < allowance) {
result += "PASS";
} else {
result += "FAIL";
}
result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
}
document.addEventListener("webkitAnimationEnd", animationEnded, false);
};

</script>
</head>
<body>
This test performs an animation of the transform property with four different
fill modes. It animates over 0.1 second with a 0.1 second delay.
It takes snapshots at document load and the end of the animations.
<div id="a" class="box">
None
</div>
<div id="b" class="box">
Backwards
</div>
<div id="c" class="box">
Forwards
</div>
<div id="d" class="box">
Both
</div>
<div id="e" class="box">
Both Iterate
</div>
<p>
Note that due to <a href="https://bugs.webkit.org/show_bug.cgi?id=35714">Bug 35714</a>
the expected values for the start of the animation on elements "a" and "c" are
intentionally incorrect. The expected values should be 100, not 200. If this
test fails, then it's likely that bug has been fixed and the expected values here
should be updated.
</p>
<div id="result">
</div>
</body>
</html>

0 comments on commit f591daf

Please sign in to comment.