1 <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8">
7 <title>Test end values with fill modes after animation is removed
</title>
8 <style type=
"text/css" media=
"screen">
15 -webkit-animation-delay:
0.1s;
16 -webkit-animation-duration:
0.1s;
17 -webkit-animation-timing-function: linear;
18 -webkit-animation-name: anim;
20 @-webkit-keyframes anim {
25 background-color: blue;
26 -webkit-animation-fill-mode: none;
29 background-color: red;
30 -webkit-animation-fill-mode: backwards;
33 background-color: green;
34 -webkit-animation-fill-mode: forwards;
37 background-color: yellow;
38 -webkit-animation-fill-mode: both;
41 <script type=
"text/javascript" charset=
"utf-8">
43 var animsFinished =
0;
44 const expectedEndValues = [
45 {id:
"a", value:
100},
46 {id:
"b", value:
100},
47 {id:
"c", value:
100},
51 if (window.testRunner) {
52 testRunner.dumpAsText();
53 testRunner.waitUntilDone();
56 function animationEnded(event) {
57 event.target.style.webkitAnimationName =
"none";
58 if (++animsFinished == numAnims) {
59 setTimeout(endTest,
0); // this set timeout should be ok in the test environment
60 // since we're just giving style a chance to resolve
67 for (var i=
0; i < expectedEndValues.length; i++) {
68 var el = document.getElementById(expectedEndValues[i].id);
69 var expectedValue = expectedEndValues[i].value;
70 var realValue = parseFloat(window.getComputedStyle(el).left);
71 if (Math.abs(expectedValue - realValue) <
5) {
76 result +=
" - id: " + expectedEndValues[i].id +
" expected: " + expectedValue +
" actual: " + realValue +
"<br>";
78 document.getElementById('result').innerHTML = result;
80 if (window.testRunner)
81 testRunner.notifyDone();
84 window.onload = function () {
85 document.addEventListener(
"webkitAnimationEnd", animationEnded, false);
91 This test performs an animation of the left property with four different
92 fill modes. It animates over
0.1 second with a
0.1 second delay.
93 At the end of the animations, we remove the animation name which should
94 cause the value to jump back to the unanimated style.
95 <div id=
"a" class=
"box">
98 <div id=
"b" class=
"box">
101 <div id=
"c" class=
"box">
104 <div id=
"d" class=
"box">