OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <html lang="en"> | 2 <html lang="en"> |
3 <head> | 3 <head> |
4 <title>Test animation direction reverse with fill modes</title> | 4 <title>Test animation direction reverse with fill modes</title> |
5 <style> | 5 <style> |
6 .box { | 6 .box { |
7 position: relative; | 7 position: relative; |
8 left: 100px; | 8 left: 100px; |
9 height: 100px; | 9 height: 100px; |
10 width: 100px; | 10 width: 100px; |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
46 -webkit-animation-iteration-count: 2; | 46 -webkit-animation-iteration-count: 2; |
47 -webkit-animation-direction: alternate-reverse; | 47 -webkit-animation-direction: alternate-reverse; |
48 } | 48 } |
49 </style> | 49 </style> |
50 <script src="resources/animation-test-helpers.js"></script> | 50 <script src="resources/animation-test-helpers.js"></script> |
51 <script type="text/javascript" charset="utf-8"> | 51 <script type="text/javascript" charset="utf-8"> |
52 const numAnims = 6; | 52 const numAnims = 6; |
53 var animsFinished = 0; | 53 var animsFinished = 0; |
54 const allowance = 5; | 54 const allowance = 5; |
55 const expectedValues = [ | 55 const expectedValues = [ |
56 {id: "none", start: 100, end: 100}, | 56 {id: "none", start: "100px", end: "100px"}, |
57 {id: "backwards", start: 300, end: 100}, | 57 {id: "backwards", start: "300px", end: "100px"}, |
58 {id: "forwards", start: 100, end: 200}, | 58 {id: "forwards", start: "100px", end: "200px"}, |
59 {id: "both", start: 300, end: 200}, | 59 {id: "both", start: "300px", end: "200px"}, |
60 {id: "both_iterating", start: 200, end: 200}, | 60 {id: "both_iterating", start: "200px", end: "200px"}, |
61 {id: "both_iterating_reverse", start: 300, end: 300} | 61 {id: "both_iterating_reverse", start: "300px", end: "300px"} |
62 ]; | 62 ]; |
63 var result = ""; | 63 var result = ""; |
64 | 64 |
65 if (window.testRunner) { | 65 if (window.testRunner) { |
66 testRunner.dumpAsText(); | 66 testRunner.dumpAsText(); |
67 testRunner.waitUntilDone(); | 67 testRunner.waitUntilDone(); |
68 } | 68 } |
69 | 69 |
70 function animationEnded(event) { | 70 function animationEnded(event) { |
71 if (++animsFinished == numAnims) { | 71 if (++animsFinished == numAnims) { |
72 // This call to setTimeout should be ok in the test environment | 72 // This call to setTimeout should be ok in the test environment |
73 // since we're just giving style a chance to resolve. | 73 // since we're just giving style a chance to resolve. |
74 setTimeout(endTest, 0); | 74 setTimeout(endTest, 0); |
75 } | 75 } |
76 }; | 76 }; |
77 | 77 |
78 function endTest() { | 78 function endTest() { |
79 for (var i = 0; i < expectedValues.length; i++) { | 79 for (var i = 0; i < expectedValues.length; i++) { |
80 var realValue = getPropertyValue("left", expectedValues[i].id); | 80 var realValue = getPropertyValue("left", expectedValues[i].id); |
81 var expectedValue = expectedValues[i].end; | 81 var expectedValue = expectedValues[i].end; |
82 if (comparePropertyValue("left", realValue, expectedValue, allowance
)) | 82 if (comparePropertyValue(realValue, expectedValue, allowance)) |
83 result += "PASS"; | 83 result += "PASS"; |
84 else | 84 else |
85 result += "FAIL"; | 85 result += "FAIL"; |
86 result += " - end of animation - id: " + expectedValues[i].id + " ex
pected: " + expectedValue + " actual: " + realValue + "<br>"; | 86 result += " - end of animation - id: " + expectedValues[i].id + " ex
pected: " + expectedValue + " actual: " + realValue + "<br>"; |
87 } | 87 } |
88 document.getElementById('result').innerHTML = result; | 88 document.getElementById('result').innerHTML = result; |
89 | 89 |
90 if (window.testRunner) | 90 if (window.testRunner) |
91 testRunner.notifyDone(); | 91 testRunner.notifyDone(); |
92 } | 92 } |
93 | 93 |
94 window.onload = function () { | 94 window.onload = function () { |
95 for (var i = 0; i < expectedValues.length; i++) { | 95 for (var i = 0; i < expectedValues.length; i++) { |
96 var realValue = getPropertyValue("left", expectedValues[i].id); | 96 var realValue = getPropertyValue("left", expectedValues[i].id); |
97 var expectedValue = expectedValues[i].start; | 97 var expectedValue = expectedValues[i].start; |
98 if (comparePropertyValue("left", realValue, expectedValue, allowance
)) | 98 if (comparePropertyValue(realValue, expectedValue, allowance)) |
99 result += "PASS"; | 99 result += "PASS"; |
100 else | 100 else |
101 result += "FAIL"; | 101 result += "FAIL"; |
102 result += " - start of animation - id: " + expectedValues[i].id + "
expected: " + expectedValue + " actual: " + realValue + "<br>"; | 102 result += " - start of animation - id: " + expectedValues[i].id + "
expected: " + expectedValue + " actual: " + realValue + "<br>"; |
103 } | 103 } |
104 document.addEventListener("webkitAnimationEnd", animationEnded, false); | 104 document.addEventListener("webkitAnimationEnd", animationEnded, false); |
105 }; | 105 }; |
106 </script> | 106 </script> |
107 </head> | 107 </head> |
108 <body> | 108 <body> |
(...skipping 18 matching lines...) Expand all Loading... |
127 <div id="both_iterating" class="box"> | 127 <div id="both_iterating" class="box"> |
128 Both iterating | 128 Both iterating |
129 </div> | 129 </div> |
130 <div id="both_iterating_reverse" class="box"> | 130 <div id="both_iterating_reverse" class="box"> |
131 Both iterating reverse | 131 Both iterating reverse |
132 </div> | 132 </div> |
133 <div id="result"> | 133 <div id="result"> |
134 </div> | 134 </div> |
135 </body> | 135 </body> |
136 </html> | 136 </html> |
OLD | NEW |