2010-09-09 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / animations / fill-mode-removed.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
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">
9     .box {
10       position: relative;
11       left: 100px;
12       top: 10px;
13       height: 100px;
14       width: 100px;
15       -webkit-animation-delay: 0.1s;
16       -webkit-animation-duration: 0.1s;
17       -webkit-animation-timing-function: linear;
18       -webkit-animation-name: "anim";
19     }
20     @-webkit-keyframes "anim" {
21         from { left: 200px; }
22         to   { left: 300px; }
23     }
24     #a {
25       background-color: blue;
26       -webkit-animation-fill-mode: none;
27     }
28     #b {
29       background-color: red;
30       -webkit-animation-fill-mode: backwards;
31     }
32     #c {
33       background-color: green;
34       -webkit-animation-fill-mode: forwards;
35     }
36     #d {
37       background-color: yellow;
38       -webkit-animation-fill-mode: both;
39     }
40   </style>
41   <script type="text/javascript" charset="utf-8">
42     const numAnims = 4;
43     var animsFinished = 0;
44     const expectedEndValues = [
45       {id: "a", value: 100},
46       {id: "b", value: 100},
47       {id: "c", value: 100},
48       {id: "d", value: 100}
49     ];
50   
51     if (window.layoutTestController) {
52         layoutTestController.dumpAsText();
53         layoutTestController.waitUntilDone();
54     }
55   
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
61         }
62     };
63   
64     function endTest() {
65
66         var result = "";
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) {
72               result += "PASS";
73             } else {
74               result += "FAIL";
75             }
76             result += " - id: " + expectedEndValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
77         }
78         document.getElementById('result').innerHTML = result;
79
80         if (window.layoutTestController)
81             layoutTestController.notifyDone();
82     }
83   
84     window.onload = function () {
85         document.addEventListener("webkitAnimationEnd", animationEnded, false);
86     };
87   
88   </script>
89 </head>
90 <body>
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">
96   None
97 </div>
98 <div id="b" class="box">
99   Backwards
100 </div>
101 <div id="c" class="box">
102   Forwards
103 </div>
104 <div id="d" class="box">
105   Both
106 </div>
107 <div id="result">
108 </div>
109 </body>
110 </html>