OLD | NEW |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
3 | 3 |
4 <html lang="en"> | 4 <html lang="en"> |
5 <head> | 5 <head> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
7 <title>Test simple animation with fill modes</title> | 7 <title>Test simple animation with fill modes</title> |
8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
9 .box { | 9 .box { |
10 position: relative; | 10 position: relative; |
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
86 setTimeout(endTest, 0); // this set timeout should be ok in the test
environment | 86 setTimeout(endTest, 0); // this set timeout should be ok in the test
environment |
87 // since we're just giving style a chance to
resolve | 87 // since we're just giving style a chance to
resolve |
88 } | 88 } |
89 }; | 89 }; |
90 | 90 |
91 function endTest() { | 91 function endTest() { |
92 | 92 |
93 for (var i=0; i < expectedValues.length; i++) { | 93 for (var i=0; i < expectedValues.length; i++) { |
94 var el = document.getElementById(expectedValues[i].id); | 94 var el = document.getElementById(expectedValues[i].id); |
95 var expectedValue = expectedValues[i].end; | 95 var expectedValue = expectedValues[i].end; |
96 var realValue = window.getComputedStyle(el).getPropertyCSSValue("lef
t").getFloatValue(CSSPrimitiveValue.CSS_NUMBER); | 96 var realValue = parseFloat(window.getComputedStyle(el).left); |
97 if (Math.abs(expectedValue - realValue) < allowance) { | 97 if (Math.abs(expectedValue - realValue) < allowance) { |
98 result += "PASS"; | 98 result += "PASS"; |
99 } else { | 99 } else { |
100 result += "FAIL"; | 100 result += "FAIL"; |
101 } | 101 } |
102 result += " - end of animation - id: " + expectedValues[i].id + " ex
pected: " + expectedValue + " actual: " + realValue + "<br>"; | 102 result += " - end of animation - id: " + expectedValues[i].id + " ex
pected: " + expectedValue + " actual: " + realValue + "<br>"; |
103 } | 103 } |
104 document.getElementById('result').innerHTML = result; | 104 document.getElementById('result').innerHTML = result; |
105 | 105 |
106 if (window.testRunner) | 106 if (window.testRunner) |
107 testRunner.notifyDone(); | 107 testRunner.notifyDone(); |
108 } | 108 } |
109 | 109 |
110 window.onload = function () { | 110 window.onload = function () { |
111 for (var i=0; i < expectedValues.length; i++) { | 111 for (var i=0; i < expectedValues.length; i++) { |
112 var el = document.getElementById(expectedValues[i].id); | 112 var el = document.getElementById(expectedValues[i].id); |
113 var expectedValue = expectedValues[i].start; | 113 var expectedValue = expectedValues[i].start; |
114 var realValue = window.getComputedStyle(el).getPropertyCSSValue("lef
t").getFloatValue(CSSPrimitiveValue.CSS_NUMBER); | 114 var realValue = parseFloat(window.getComputedStyle(el).left); |
115 if (Math.abs(expectedValue - realValue) < allowance) { | 115 if (Math.abs(expectedValue - realValue) < allowance) { |
116 result += "PASS"; | 116 result += "PASS"; |
117 } else { | 117 } else { |
118 result += "FAIL"; | 118 result += "FAIL"; |
119 } | 119 } |
120 result += " - start of animation - id: " + expectedValues[i].id + "
expected: " + expectedValue + " actual: " + realValue + "<br>"; | 120 result += " - start of animation - id: " + expectedValues[i].id + "
expected: " + expectedValue + " actual: " + realValue + "<br>"; |
121 } | 121 } |
122 document.addEventListener("webkitAnimationEnd", animationEnded, false); | 122 document.addEventListener("webkitAnimationEnd", animationEnded, false); |
123 }; | 123 }; |
124 | 124 |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
160 Both - 3 keyframes | 160 Both - 3 keyframes |
161 </div> | 161 </div> |
162 <div id="j" class="box three-keyframes"> | 162 <div id="j" class="box three-keyframes"> |
163 Both iterating - 3 keyframes | 163 Both iterating - 3 keyframes |
164 </div> | 164 </div> |
165 | 165 |
166 <div id="result"> | 166 <div id="result"> |
167 </div> | 167 </div> |
168 </body> | 168 </body> |
169 </html> | 169 </html> |
OLD | NEW |