Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / animation-direction-reverse-fill-mode-hardware.html
blob2c99f63b4bd4509ad0433b37197dd2168bb3b330
1 <!doctype html>
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 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;
18 @-webkit-keyframes anim {
19 from { transform: translate3d(200px, 0, 0); }
20 to { transform: translate3d(300px, 0, 0); }
22 #a {
23 background-color: #f99;
24 -webkit-animation-fill-mode: both;
25 -webkit-animation-iteration-count: 2;
26 -webkit-animation-direction: reverse;
28 #b {
29 background-color: #999;
30 -webkit-animation-fill-mode: both;
31 -webkit-animation-iteration-count: 2;
32 -webkit-animation-direction: alternate-reverse;
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}
44 var result = "";
46 if (window.testRunner) {
47 testRunner.dumpAsText();
48 testRunner.waitUntilDone();
51 function animationEnded(event) {
52 if (++animsFinished == numAnims) {
53 setTimeout(endTest, 0); // This call to setTimeout should be ok in the test environment
54 // since we're just giving style a chance to resolve.
58 function endTest() {
60 for (var i = 0; i < expectedValues.length; i++) {
61 var realValue = getPropertyValue("transform", expectedValues[i].id);
62 var expectedValue = expectedValues[i].end;
63 if (comparePropertyValue(realValue, expectedValue, allowance, 4))
64 result += "PASS";
65 else
66 result += "FAIL";
67 result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
69 document.getElementById('result').innerHTML = result;
71 if (window.testRunner)
72 testRunner.notifyDone();
75 window.onload = function () {
76 for (var i = 0; i < expectedValues.length; i++) {
77 var realValue = getPropertyValue("transform", expectedValues[i].id);
78 var expectedValue = expectedValues[i].start;
79 if (comparePropertyValue(realValue, expectedValue, allowance, 4))
80 result += "PASS";
81 else
82 result += "FAIL";
83 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
85 document.addEventListener("webkitAnimationEnd", animationEnded, false);
88 </script>
89 </head>
90 <body>
91 This test performs an animation of the transform property with different
92 fill modes. It animates over 0.1 second with a 0.1 second delay.
93 It takes snapshots at document load and the end of the animations.
94 <div id="a" class="box">
95 Both Iterate - Reverse
96 </div>
97 <div id="b" class="box">
98 Both Iterate - Alternate Reverse
99 </div>
100 <div id="result">
101 </div>
102 </body>
103 </html>