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 21 matching lines...) Expand all Loading... |
32 left: 400px; | 32 left: 400px; |
33 } | 33 } |
34 } | 34 } |
35 | 35 |
36 #box2 { | 36 #box2 { |
37 -webkit-animation-name: move2; | 37 -webkit-animation-name: move2; |
38 } | 38 } |
39 @-webkit-keyframes move2 { | 39 @-webkit-keyframes move2 { |
40 from { | 40 from { |
41 opacity: 0; | 41 opacity: 0; |
42 -webkit-transform: translateX(100px); | 42 transform: translateX(100px); |
43 } | 43 } |
44 25% { | 44 25% { |
45 opacity: 0.25; | 45 opacity: 0.25; |
46 } | 46 } |
47 50% { | 47 50% { |
48 -webkit-transform: translateX(200px); | 48 transform: translateX(200px); |
49 -webkit-animation-timing-function: linear; | 49 -webkit-animation-timing-function: linear; |
50 } | 50 } |
51 to { | 51 to { |
52 -webkit-transform: translateX(400px); | 52 transform: translateX(400px); |
53 } | 53 } |
54 } | 54 } |
55 | 55 |
56 </style> | 56 </style> |
57 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | 57 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> |
58 <script type="text/javascript" charset="utf-8"> | 58 <script type="text/javascript" charset="utf-8"> |
59 | 59 |
60 const expectedValues = [ | 60 const expectedValues = [ |
61 // [time, element-id, property, expected-value, tolerance] | 61 // [time, element-id, property, expected-value, tolerance] |
62 [0.5, "box1", "left", 132, 15], | 62 [0.5, "box1", "left", 132, 15], |
63 [0.5, "box2", "webkitTransform.4", 132, 15], | 63 [0.5, "box2", "webkitTransform.4", 132, 15], |
64 [1.5, "box1", "left", 300, 15], | 64 [1.5, "box1", "left", 300, 15], |
65 [1.5, "box2", "webkitTransform.4", 300, 15], | 65 [1.5, "box2", "webkitTransform.4", 300, 15], |
66 ]; | 66 ]; |
67 | 67 |
68 runAnimationTest(expectedValues); | 68 runAnimationTest(expectedValues); |
69 </script> | 69 </script> |
70 </head> | 70 </head> |
71 <body> | 71 <body> |
72 <div id="box1" class="box"></div> | 72 <div id="box1" class="box"></div> |
73 <div id="box2" class="box"></div> | 73 <div id="box2" class="box"></div> |
74 <div id="result"> | 74 <div id="result"> |
75 </div> | 75 </div> |
76 </body> | 76 </body> |
77 </html> | 77 </html> |
OLD | NEW |