| <!DOCTYPE html> |
| <body> |
| <style> |
| .target { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| assertComposition({ |
| property: 'translate', |
| underlying: '100px 200px 300px', |
| addFrom: '-50px 50%', |
| addTo: '100%', |
| }, [ |
| {at: -1, is: '-100% calc(200px + 100%) 300px'}, |
| {at: 0, is: '50px calc(200px + 50%) 300px'}, |
| {at: 0.25, is: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'}, |
| {at: 0.75, is: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'}, |
| {at: 1, is: 'calc(100px + 100%) 200px 300px'}, |
| {at: 2, is: 'calc(150px + 200%) calc(200px - 50%) 300px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: '100px 200px 300px', |
| addFrom: '50% 100px', |
| replaceTo: '200px 50% 100px', |
| }, [ |
| {at: -1, is: '100% calc(600px - 50%) 500px'}, |
| {at: 0, is: 'calc(100px + 50%) 300px 300px'}, |
| {at: 0.25, is: 'calc(125px + 37.5%) calc(225px + 12.5%) 250px'}, |
| {at: 0.75, is: 'calc(175px + 12.5%) calc(75px + 37.5%) 150px'}, |
| {at: 1, is: '200px 50% 100px'}, |
| {at: 2, is: 'calc(300px - 50%) calc(-300px + 100%) -100px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: '100px 200px 300px', |
| replaceFrom: '50% 100px', |
| addTo: '200px 50% 100px', |
| }, [ |
| {at: -1, is: 'calc(-300px + 100%) -50% -400px'}, |
| {at: 0, is: '50% 100px'}, |
| {at: 0.25, is: 'calc(75px + 37.5%) calc(125px + 12.5%) 100px'}, |
| {at: 0.75, is: 'calc(225px + 12.5%) calc(175px + 37.5%) 300px'}, |
| {at: 1, is: '300px calc(200px + 50%) 400px'}, |
| {at: 2, is: 'calc(600px - 50%) calc(300px + 100%) 800px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: 'none', |
| replaceFrom: 'none', |
| addTo: '100px', |
| }, [ |
| {at: -1, is: '-100px'}, |
| {at: 0, is: 'none'}, |
| {at: 0.25, is: '25px'}, |
| {at: 0.75, is: '75px'}, |
| {at: 1, is: '100px'}, |
| {at: 2, is: '200px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: 'none', |
| addFrom: 'none', |
| addTo: '100px', |
| }, [ |
| {at: -1, is: '-100px'}, |
| {at: 0, is: 'none'}, |
| {at: 0.25, is: '25px'}, |
| {at: 0.75, is: '75px'}, |
| {at: 1, is: '100px'}, |
| {at: 2, is: '200px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: 'none', |
| replaceFrom: '0px 40px 60px', |
| replaceTo: 'none', |
| }, [ |
| {at: -1, is: '0px 80px 120px'}, |
| {at: 0, is: '0px 40px 60px'}, |
| {at: 0.25, is: '0px 30px 45px'}, |
| {at: 0.75, is: '0px 10px 15px'}, |
| {at: 1, is: 'none'}, |
| {at: 2, is: '0px -40px -60px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: 'none', |
| replaceFrom: '0px 40px 60px', |
| addTo: 'none', |
| }, [ |
| {at: -1, is: '0px 80px 120px'}, |
| {at: 0, is: '0px 40px 60px'}, |
| {at: 0.25, is: '0px 30px 45px'}, |
| {at: 0.75, is: '0px 10px 15px'}, |
| {at: 1, is: 'none'}, |
| {at: 2, is: '0px -40px -60px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: '80px 20px', |
| addFrom: 'none', |
| replaceTo: '0px 40px 60px', |
| }, [ |
| {at: -1, is: '160px 0px -60px'}, |
| {at: 0, is: '80px 20px'}, |
| {at: 0.25, is: '60px 25px 15px'}, |
| {at: 0.5, is: '40px 30px 30px'}, |
| {at: 0.75, is: '20px 35px 45px'}, |
| {at: 1, is: '0px 40px 60px'}, |
| {at: 2, is: '-80px 60px 120px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'translate', |
| underlying: '80px 20px', |
| addFrom: '0px 40px 60px', |
| replaceTo: 'none', |
| }, [ |
| {at: -1, is: '160px 120px 120px'}, |
| {at: 0, is: '80px 60px 60px'}, |
| {at: 0.25, is: '60px 45px 45px'}, |
| {at: 0.5, is: '40px 30px 30px'}, |
| {at: 0.75, is: '20px 15px 15px'}, |
| {at: 1, is: 'none'}, |
| {at: 2, is: '-80px -60px -60px'}, |
| ]); |
| </script> |
| </body> |
