[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / fill-mode-transform.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 simple fill mode on transform</title>
8   <style type="text/css" media="screen">
9     .box {
10       position: relative;
11       left: 10px;
12       top: 10px;
13       height: 100px;
14       width: 100px;
15       -webkit-transform: translate3d(100px, 0, 0);
16       -webkit-animation-delay: 0.1s;
17       -webkit-animation-duration: 0.1s;
18       -webkit-animation-timing-function: linear;
19       -webkit-animation-name: anim;
20     }
21     @-webkit-keyframes anim {
22         from { -webkit-transform: translate3d(200px, 0, 0); }
23         to   { -webkit-transform: translate3d(300px, 0, 0); }
24     }
25     #a {
26       background-color: blue;
27       -webkit-animation-fill-mode: none;
28     }
29     #b {
30       background-color: red;
31       -webkit-animation-fill-mode: backwards;
32     }
33     #c {
34       background-color: green;
35       -webkit-animation-fill-mode: forwards;
36     }
37     #d {
38       background-color: yellow;
39       -webkit-animation-fill-mode: both;
40     }
41     #e {
42       background-color: #999;
43       -webkit-animation-fill-mode: both;
44       -webkit-animation-iteration-count: 2;
45       -webkit-animation-direction: alternate;
46     }
47   </style>
48   <script type="text/javascript" charset="utf-8">
49     const numAnims = 5;
50     var animsFinished = 0;
51     const allowance = 5;
52     const expectedValues = [
53       {id: "a", start: 100, end: 100},
54       {id: "b", start: 200, end: 100},
55       {id: "c", start: 100, end: 300},
56       {id: "d", start: 200, end: 300},
57       {id: "e", start: 200, end: 200}
58     ];
59     var result = "";
60
61     if (window.testRunner) {
62         testRunner.dumpAsText();
63         testRunner.waitUntilDone();
64     }
65
66     function animationEnded(event) {
67         if (++animsFinished == numAnims) {
68             setTimeout(endTest, 0); // this set timeout should be ok in the test environment
69                                     // since we're just giving style a chance to resolve
70         }
71     };
72
73     function endTest() {
74
75         for (var i=0; i < expectedValues.length; i++) {
76             var el = document.getElementById(expectedValues[i].id);
77             var expectedValue = expectedValues[i].end;
78             var computedValue = window.getComputedStyle(el).webkitTransform;
79             var realValue = parseFloat(computedValue.split("(")[1].split(",")[4]);
80             if (Math.abs(expectedValue - realValue) < allowance) {
81               result += "PASS";
82             } else {
83               result += "FAIL";
84             }
85             result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
86         }
87         document.getElementById('result').innerHTML = result;
88
89         if (window.testRunner)
90             testRunner.notifyDone();
91     }
92     
93     window.onload = function () {
94       for (var i=0; i < expectedValues.length; i++) {
95           var el = document.getElementById(expectedValues[i].id);
96           var expectedValue = expectedValues[i].start;
97           var computedValue = window.getComputedStyle(el).webkitTransform;
98           var realValue = parseFloat(computedValue.split("(")[1].split(",")[4]);
99           if (Math.abs(expectedValue - realValue) < allowance) {
100             result += "PASS";
101           } else {
102             result += "FAIL";
103           }
104           result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
105       }
106       document.addEventListener("webkitAnimationEnd", animationEnded, false);
107     };
108
109   </script>
110 </head>
111 <body>
112 This test performs an animation of the transform property with four different
113 fill modes. It animates over 0.1 second with a 0.1 second delay.
114 It takes snapshots at document load and the end of the animations.
115 <div id="a" class="box">
116   None
117 </div>
118 <div id="b" class="box">
119   Backwards
120 </div>
121 <div id="c" class="box">
122   Forwards
123 </div>
124 <div id="d" class="box">
125   Both
126 </div>
127 <div id="e" class="box">
128   Both Iterate
129 </div>
130 <div id="result">
131 </div>
132 </body>
133 </html>