b7785c0c051e3af8a81669109b7e63ee3fc8e9ae
[WebKit-https.git] / LayoutTests / animations / animation-direction-reverse-fill-mode-hardware.html
1 <!doctype html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2 <html>
3 <head>
4   <title>Test simple fill mode on transform</title>
5   <style>
6     .box {
7       position: relative;
8       left: 10px;
9       top: 10px;
10       height: 100px;
11       width: 100px;
12       -webkit-transform: translate3d(100px, 0, 0);
13       -webkit-animation-delay: 0.1s;
14       -webkit-animation-duration: 0.1s;
15       -webkit-animation-timing-function: linear;
16       -webkit-animation-name: anim;
17     }
18     @-webkit-keyframes anim {
19         from { -webkit-transform: translate3d(200px, 0, 0); }
20         to   { -webkit-transform: translate3d(300px, 0, 0); }
21     }
22     #a {
23       background-color: #f99;
24       -webkit-animation-fill-mode: both;
25       -webkit-animation-iteration-count: 2;
26       -webkit-animation-direction: reverse;
27     }
28     #b {
29       background-color: #999;
30       -webkit-animation-fill-mode: both;
31       -webkit-animation-iteration-count: 2;
32       -webkit-animation-direction: alternate-reverse;
33     }
34   </style>
35   <script src="resources/animation-test-helpers.js"></script>
36   <script>
37     const numAnims = 1;
38     var animsFinished = 0;
39     const allowance = 5;
40     const expectedValues = [
41       {id: "a", start: 300, end: 200},
42       {id: "b", start: 300, end: 300}
43     ];
44     var result = "";
45
46     if (window.testRunner)
47         testRunner.dumpAsText();
48
49     function animationEnded(event) {
50         if (++animsFinished == numAnims) {
51             setTimeout(endTest, 0); // This call to setTimeout should be ok in the test environment
52                                     // since we're just giving style a chance to resolve.
53         }
54     };
55
56     function endTest() {
57
58         for (var i = 0; i < expectedValues.length; i++) {
59             var realValue = getPropertyValue("webkitTransform.4", expectedValues[i].id);
60             var expectedValue = expectedValues[i].end;
61             if (comparePropertyValue("webkitTransform.4", realValue, expectedValue, allowance))
62                 result += "PASS";
63             else
64                 result += "FAIL";
65             result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
66         }
67         document.getElementById('result').innerHTML = result;
68
69         if (window.testRunner)
70             testRunner.notifyDone();
71     }
72     
73     window.onload = function () {
74       for (var i = 0; i < expectedValues.length; i++) {
75           var realValue = getPropertyValue("webkitTransform.4", expectedValues[i].id);
76           var expectedValue = expectedValues[i].start;
77           if (comparePropertyValue("webkitTransform.4", realValue, expectedValue, allowance))
78               result += "PASS";
79           else
80               result += "FAIL";
81           result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
82       }
83       document.addEventListener("webkitAnimationEnd", animationEnded, false);
84     };
85
86   </script>
87 </head>
88 <body>
89 This test performs an animation of the transform property with different
90 fill modes. It animates over 0.1 second with a 0.1 second delay.
91 It takes snapshots at document load and the end of the animations.
92 <div id="a" class="box">
93   Both Iterate - Reverse
94 </div>
95 <div id="b" class="box">
96   Both Iterate - Alternate Reverse
97 </div>
98 <div id="result">
99 </div>
100 </body>
101 </html>