| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| translate: 100px 200px 300px; |
| } |
| .target { |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| translate: 10px; |
| } |
| .expected { |
| background-color: green; |
| } |
| </style> |
| <template id="target-template"> |
| <div class="parent"> |
| <div class="target"></div> |
| </div> |
| </template> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| assertInterpolation({ |
| property: 'translate', |
| from: neutralKeyframe, |
| to: '20px', |
| }, [ |
| {at: -1, is: '0px'}, |
| {at: 0, is: '10px'}, |
| {at: 0.25, is: '12.5px'}, |
| {at: 0.75, is: '17.5px'}, |
| {at: 1, is: '20px'}, |
| {at: 2, is: '30px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: 'unset', |
| to: '20px', |
| }, [ |
| {at: -1, is: '-20px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '5px'}, |
| {at: 0.75, is: '15px'}, |
| {at: 1, is: '20px'}, |
| {at: 2, is: '40px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '-100px', |
| to: '100px', |
| }, [ |
| {at: -1, is: '-300px'}, |
| {at: 0, is: '-100px'}, |
| {at: 0.25, is: '-50px'}, |
| {at: 0.75, is: '50px'}, |
| {at: 1, is: '100px'}, |
| {at: 2, is: '300px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '-100%', |
| to: '100%', |
| }, [ |
| {at: -1, is: '-300%'}, |
| {at: 0, is: '-100%'}, |
| {at: 0.25, is: '-50%'}, |
| {at: 0.75, is: '50%'}, |
| {at: 1, is: '100%'}, |
| {at: 2, is: '300%'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '-100px -50px', |
| to: '100px 50px', |
| }, [ |
| {at: -1, is: '-300px -150px'}, |
| {at: 0, is: '-100px -50px'}, |
| {at: 0.25, is: '-50px -25px'}, |
| {at: 0.75, is: '50px 25px'}, |
| {at: 1, is: '100px 50px'}, |
| {at: 2, is: '300px 150px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '-100px -50px 100px', |
| to: '100px 50px 0px', |
| }, [ |
| {at: -1, is: '-300px -150px 200px'}, |
| {at: 0, is: '-100px -50px 100px'}, |
| {at: 0.25, is: '-50px -25px 75px'}, |
| {at: 0.75, is: '50px 25px 25px'}, |
| {at: 1, is: '100px 50px 0px'}, |
| {at: 2, is: '300px 150px -100px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '0px', |
| to: '-100px -50px 100px', |
| }, [ |
| {at: -1, is: '100px 50px -100px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '-25px -12.5px 25px'}, |
| {at: 0.75, is: '-75px -37.5px 75px'}, |
| {at: 1, is: '-100px -50px 100px'}, |
| {at: 2, is: '-200px -100px 200px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '-100px -50px 100px', |
| to: '0px', |
| }, [ |
| {at: -1, is: '-200px -100px 200px'}, |
| {at: 0, is: '-100px -50px 100px'}, |
| {at: 0.25, is: '-75px -37.5px 75px'}, |
| {at: 0.75, is: '-25px -12.5px 25px'}, |
| {at: 1, is: '0px'}, |
| {at: 2, is: '100px 50px -100px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: 'inherit', |
| to: '200px 100px 200px', |
| }, [ |
| {at: -1, is: '0px 300px 400px'}, |
| {at: 0, is: '100px 200px 300px'}, |
| {at: 0.25, is: '125px 175px 275px'}, |
| {at: 0.75, is: '175px 125px 225px'}, |
| {at: 1, is: '200px 100px 200px'}, |
| {at: 2, is: '300px 0px 100px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '200px 100px 200px', |
| to: 'inherit', |
| }, [ |
| {at: -1, is: '300px 0px 100px'}, |
| {at: 0, is: '200px 100px 200px'}, |
| {at: 0.25, is: '175px 125px 225px'}, |
| {at: 0.75, is: '125px 175px 275px'}, |
| {at: 1, is: '100px 200px 300px'}, |
| {at: 2, is: '0px 300px 400px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: 'initial', |
| to: '200px 100px 200px', |
| }, [ |
| {at: -1, is: '-200px -100px -200px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '50px 25px 50px'}, |
| {at: 0.75, is: '150px 75px 150px'}, |
| {at: 1, is: '200px 100px 200px'}, |
| {at: 2, is: '400px 200px 400px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: '200px 100px 200px', |
| to: 'initial', |
| }, [ |
| {at: -1, is: '400px 200px 400px'}, |
| {at: 0, is: '200px 100px 200px'}, |
| {at: 0.25, is: '150px 75px 150px'}, |
| {at: 0.75, is: '50px 25px 50px'}, |
| {at: 1, is: '0px'}, |
| {at: 2, is: '-200px -100px -200px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: 'initial', |
| to: 'inherit', |
| }, [ |
| {at: -1, is: '-100px -200px -300px'}, |
| {at: 0, is: '0px'}, |
| {at: 0.25, is: '25px 50px 75px'}, |
| {at: 0.75, is: '75px 150px 225px'}, |
| {at: 1, is: '100px 200px 300px'}, |
| {at: 2, is: '200px 400px 600px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'translate', |
| from: 'inherit', |
| to: 'initial', |
| }, [ |
| {at: -1, is: '200px 400px 600px'}, |
| {at: 0, is: '100px 200px 300px'}, |
| {at: 0.25, is: '75px 150px 225px'}, |
| {at: 0.75, is: '25px 50px 75px'}, |
| {at: 1, is: '0px'}, |
| {at: 2, is: '-100px -200px -300px'}, |
| ]); |
| </script> |
