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.layoutTestController) {
52 layoutTestController.dumpAsText();
53 layoutTestController.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 = window.getComputedStyle(el).getPropertyCSSValue("left").getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
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.layoutTestController)
81 layoutTestController.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">