OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <meta charset="utf-8"> | 2 <meta charset="utf-8"> |
3 <style> | 3 <style> |
4 .parent { | 4 .parent { |
5 background-position: 80px 80px; | 5 background-position: 80px 80px; |
6 } | 6 } |
7 .target { | 7 .target { |
8 border: 3px solid skyblue; | 8 border: 3px solid skyblue; |
9 width: 100px; | 9 width: 100px; |
10 height: 100px; | 10 height: 100px; |
(...skipping 10 matching lines...) Expand all Loading... |
21 .expected { | 21 .expected { |
22 margin-left: -106px; | 22 margin-left: -106px; |
23 } | 23 } |
24 </style> | 24 </style> |
25 <body> | 25 <body> |
26 <script src="resources/interpolation-test.js"></script> | 26 <script src="resources/interpolation-test.js"></script> |
27 <script> | 27 <script> |
28 // neutral | 28 // neutral |
29 assertInterpolation({ | 29 assertInterpolation({ |
30 property: 'background-position', | 30 property: 'background-position', |
31 from: '', | 31 from: neutralKeyframe, |
32 to: 'left 20px top 20px', | 32 to: 'left 20px top 20px', |
33 }, [ | 33 }, [ |
34 {at: 0, is: '10px 10px'}, | 34 {at: 0, is: '10px 10px'}, |
35 {at: 0.25, is: '12.5px 12.5px'}, | 35 {at: 0.25, is: '12.5px 12.5px'}, |
36 {at: 0.5, is: '15px 15px'}, | 36 {at: 0.5, is: '15px 15px'}, |
37 {at: 0.75, is: '17.5px 17.5px'}, | 37 {at: 0.75, is: '17.5px 17.5px'}, |
38 {at: 1, is: '20px 20px'}, | 38 {at: 1, is: '20px 20px'}, |
39 ]); | 39 ]); |
40 | 40 |
41 // initial | 41 // initial |
(...skipping 159 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
201 to: 'bottom', | 201 to: 'bottom', |
202 }, [ | 202 }, [ |
203 {at: 0, is: '50% 50%'}, | 203 {at: 0, is: '50% 50%'}, |
204 {at: 0.25, is: '50% 62.5%'}, | 204 {at: 0.25, is: '50% 62.5%'}, |
205 {at: 0.5, is: '50% 75%'}, | 205 {at: 0.5, is: '50% 75%'}, |
206 {at: 0.75, is: '50% 87.5%'}, | 206 {at: 0.75, is: '50% 87.5%'}, |
207 {at: 1, is: '50% 100%'}, | 207 {at: 1, is: '50% 100%'}, |
208 ]); | 208 ]); |
209 </script> | 209 </script> |
210 </body> | 210 </body> |
OLD | NEW |