OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Test of animation-direction timing functions</title> | 2 <title>Test of animation-direction timing functions</title> |
3 <script src="../resources/testharness.js"></script> | 3 <script src="../../resources/testharness.js"></script> |
4 <script src="../resources/testharnessreport.js"></script> | 4 <script src="../../resources/testharnessreport.js"></script> |
5 <style> | 5 <style> |
6 .box { | 6 .box { |
7 animation-duration: 2s; | 7 animation-duration: 2s; |
8 animation-iteration-count: 4; | 8 animation-iteration-count: 4; |
9 animation-name: move1; | 9 animation-name: move1; |
10 animation-timing-function: ease; /* ease is good for testing because it is
not symmetric */ | 10 animation-timing-function: ease; /* ease is good for testing because it is
not symmetric */ |
11 background-color: blue; | 11 background-color: blue; |
12 color: white; | 12 color: white; |
13 height: 50px; | 13 height: 50px; |
14 left: 20px; | 14 left: 20px; |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
72 box2.style.animationDelay = '-2.2s'; | 72 box2.style.animationDelay = '-2.2s'; |
73 assert_approx_equals(computedLeft(box2), 198.864, epsilon, 'late box2'); | 73 assert_approx_equals(computedLeft(box2), 198.864, epsilon, 'late box2'); |
74 | 74 |
75 box3.style.animationDelay = '-2.2s'; | 75 box3.style.animationDelay = '-2.2s'; |
76 assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'late box3'); | 76 assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'late box3'); |
77 | 77 |
78 box4.style.animationDelay = '-2.2s'; | 78 box4.style.animationDelay = '-2.2s'; |
79 assert_approx_equals(computedLeft(box4), 18.6525, epsilon, 'late box4'); | 79 assert_approx_equals(computedLeft(box4), 18.6525, epsilon, 'late box4'); |
80 }, "animation-direction works with timing functions"); | 80 }, "animation-direction works with timing functions"); |
81 </script> | 81 </script> |
OLD | NEW |