OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style type="text/css" media="screen"> | 4 <style type="text/css" media="screen"> |
5 .box { | 5 .box { |
6 position: relative; | 6 position: relative; |
7 margin: 10px; | 7 margin: 10px; |
8 left: 0; | 8 left: 0; |
9 width: 100px; | 9 width: 100px; |
10 height: 100px; | 10 height: 100px; |
(...skipping 15 matching lines...) Expand all Loading... |
26 to { | 26 to { |
27 left: 400px; | 27 left: 400px; |
28 } | 28 } |
29 } | 29 } |
30 | 30 |
31 #box2 { | 31 #box2 { |
32 -webkit-animation-name: move2; | 32 -webkit-animation-name: move2; |
33 } | 33 } |
34 @-webkit-keyframes move2 { | 34 @-webkit-keyframes move2 { |
35 from { | 35 from { |
36 -webkit-transform: translateX(0); | 36 transform: translateX(0); |
37 } | 37 } |
38 50% { | 38 50% { |
39 opacity: 0; | 39 opacity: 0; |
40 } | 40 } |
41 to { | 41 to { |
42 -webkit-transform: translateX(400px); | 42 transform: translateX(400px); |
43 } | 43 } |
44 } | 44 } |
45 | 45 |
46 </style> | 46 </style> |
47 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | 47 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> |
48 <script type="text/javascript" charset="utf-8"> | 48 <script type="text/javascript" charset="utf-8"> |
49 | 49 |
50 const expectedValues = [ | 50 const expectedValues = [ |
51 // [time, element-id, property, expected-value, tolerance] | 51 // [time, element-id, property, expected-value, tolerance] |
52 [1, "box1", "left", 200, 15], | 52 [1, "box1", "left", 200, 15], |
53 [1, "box2", "webkitTransform.4", 200, 15], | 53 [1, "box2", "webkitTransform.4", 200, 15], |
54 [0.5, "box1", "opacity", 0.5, 0.1], | 54 [0.5, "box1", "opacity", 0.5, 0.1], |
55 [1, "box1", "opacity", 0, 0.1], | 55 [1, "box1", "opacity", 0, 0.1], |
56 [1.5, "box1", "left", 300, 15], | 56 [1.5, "box1", "left", 300, 15], |
57 [1.5, "box2", "webkitTransform.4", 300, 15], | 57 [1.5, "box2", "webkitTransform.4", 300, 15], |
58 [1.5, "box1", "opacity", 0.5, 0.1], | 58 [1.5, "box1", "opacity", 0.5, 0.1], |
59 ]; | 59 ]; |
60 | 60 |
61 runAnimationTest(expectedValues); | 61 runAnimationTest(expectedValues); |
62 </script> | 62 </script> |
63 </head> | 63 </head> |
64 <body> | 64 <body> |
65 <div id="box1" class="box"></div> | 65 <div id="box1" class="box"></div> |
66 <div id="box2" class="box"></div> | 66 <div id="box2" class="box"></div> |
67 <div id="result"> | 67 <div id="result"> |
68 </div> | 68 </div> |
69 </body> | 69 </body> |
70 </html> | 70 </html> |
OLD | NEW |