| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>translate interpolation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> |
| <meta name="assert" content="translate supports <length> and <percentage> animation."> |
| <meta name="timeout" content="long"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/interpolation-testcommon.js"></script> |
| <style> |
| .parent { |
| translate: 100px 200px 300px; |
| } |
| .target { |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| translate: 10px; |
| } |
| .expected { |
| background-color: green; |
| } |
| </style> |
| </head> |
| <body> |
| <template id="target-template"> |
| <div class="parent"> |
| <div class="target"></div> |
| </div> |
| </template> |
| <script> |
| // Matching one-length (pixels) animation. |
| test_interpolation({ |
| property: 'translate', |
| from: '-100px', |
| to: '100px', |
| }, [ |
| {at: -1, expect: '-300px'}, |
| {at: 0, expect: '-100px'}, |
| {at: 0.25, expect: '-50px'}, |
| {at: 0.75, expect: '50px'}, |
| {at: 1, expect: '100px'}, |
| {at: 2, expect: '300px'}, |
| ]); |
| |
| // Matching one-length (percentage) animation. |
| test_interpolation({ |
| property: 'translate', |
| from: '-100%', |
| to: '100%', |
| }, [ |
| {at: -1, expect: '-300%'}, |
| {at: 0, expect: '-100%'}, |
| {at: 0.25, expect: '-50%'}, |
| {at: 0.75, expect: '50%'}, |
| {at: 1, expect: '100%'}, |
| {at: 2, expect: '300%'}, |
| ]); |
| |
| // Matching two-length (all pixels) animation. |
| test_interpolation({ |
| property: 'translate', |
| from: '-100px -50px', |
| to: '100px 50px', |
| }, [ |
| {at: -1, expect: '-300px -150px'}, |
| {at: 0, expect: '-100px -50px'}, |
| {at: 0.25, expect: '-50px -25px'}, |
| {at: 0.75, expect: '50px 25px'}, |
| {at: 1, expect: '100px 50px'}, |
| {at: 2, expect: '300px 150px'}, |
| ]); |
| |
| // Matching three-length (all pixels) animation. |
| test_interpolation({ |
| property: 'translate', |
| from: '220px 240px 260px', |
| to: '300px 400px 500px', |
| }, [ |
| {at: -1, expect: '140px 80px 20px'}, |
| {at: 0, expect: '220px 240px 260px'}, |
| {at: 0.125, expect: '230px 260px 290px'}, |
| {at: 0.875, expect: '290px 380px 470px'}, |
| {at: 1, expect: '300px 400px 500px'}, |
| {at: 2, expect: '380px 560px 740px'} |
| ]); |
| |
| // Going from one length to three lengths. |
| test_interpolation({ |
| property: 'translate', |
| from: '0px', |
| to: '-100px -50px 100px', |
| }, [ |
| {at: -1, expect: '100px 50px -100px'}, |
| {at: 0, expect: '0px'}, |
| {at: 0.25, expect: '-25px -12.5px 25px'}, |
| {at: 0.75, expect: '-75px -37.5px 75px'}, |
| {at: 1, expect: '-100px -50px 100px'}, |
| {at: 2, expect: '-200px -100px 200px'}, |
| ]); |
| |
| // Going from three lengths to one length. |
| test_interpolation({ |
| property: 'translate', |
| from: '-100px -50px 100px', |
| to: '0px', |
| }, [ |
| {at: -1, expect: '-200px -100px 200px'}, |
| {at: 0, expect: '-100px -50px 100px'}, |
| {at: 0.25, expect: '-75px -37.5px 75px'}, |
| {at: 0.75, expect: '-25px -12.5px 25px'}, |
| {at: 1, expect: '0px'}, |
| {at: 2, expect: '100px 50px -100px'}, |
| ]); |
| |
| // Going from three-lengths to two-percentages. |
| test_interpolation({ |
| property: 'translate', |
| from: '480px 400px 320px', |
| to: '240% 160%', |
| }, [ |
| {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%) 640px'}, |
| {at: 0, expect: 'calc(0% + 480px) calc(0% + 400px) 320px'}, |
| {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%) 280px'}, |
| {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px) 40px'}, |
| {at: 1, expect: '240% 160%'}, |
| {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px) -320px'} |
| ]); |
| |
| // Handling of the none value. |
| test_interpolation({ |
| property: 'translate', |
| from: 'none', |
| to: 'none', |
| }, [ |
| {at: -1, expect: 'none'}, |
| {at: 0, expect: 'none'}, |
| {at: 0.125, expect: 'none'}, |
| {at: 0.875, expect: 'none'}, |
| {at: 1, expect: 'none'}, |
| {at: 2, expect: 'none'} |
| ]); |
| |
| // Going from none to a valid value; test that it converts properly. |
| test_interpolation({ |
| property: 'translate', |
| from: 'none', |
| to: '8px 80% 800px', |
| }, [ |
| {at: -1, expect: '-8px -80% -800px'}, |
| {at: 0, expect: '0px'}, |
| {at: 0.125, expect: '1px 10% 100px'}, |
| {at: 0.875, expect: '7px 70% 700px'}, |
| {at: 1, expect: '8px 80% 800px'}, |
| {at: 2, expect: '16px 160% 1600px'} |
| ]); |
| |
| // Test neutral keyframe; make sure it adds the underlying. |
| test_interpolation({ |
| property: 'translate', |
| from: neutralKeyframe, |
| to: '20px', |
| }, [ |
| {at: -1, expect: '0px'}, |
| {at: 0, expect: '10px'}, |
| {at: 0.25, expect: '12.5px'}, |
| {at: 0.75, expect: '17.5px'}, |
| {at: 1, expect: '20px'}, |
| {at: 2, expect: '30px'}, |
| ]); |
| |
| // Test initial value; for 'scale' this is 'none'. |
| test_interpolation({ |
| property: 'translate', |
| from: 'initial', |
| to: '200px 100px 200px', |
| }, [ |
| {at: -1, expect: '-200px -100px -200px'}, |
| {at: 0, expect: '0px'}, |
| {at: 0.25, expect: '50px 25px 50px'}, |
| {at: 0.75, expect: '150px 75px 150px'}, |
| {at: 1, expect: '200px 100px 200px'}, |
| {at: 2, expect: '400px 200px 400px'}, |
| ]); |
| |
| test_interpolation({ |
| property: 'translate', |
| from: '200px 100px 400px', |
| to: 'initial', |
| }, [ |
| {at: -1, expect: '400px 200px 800px'}, |
| {at: 0, expect: '200px 100px 400px'}, |
| {at: 0.25, expect: '150px 75px 300px'}, |
| {at: 0.75, expect: '50px 25px 100px'}, |
| {at: 1, expect: '0px'}, |
| {at: 2, expect: '-200px -100px -400px'}, |
| ]); |
| |
| |
| // Test unset value; for 'translate' this is 'none'. |
| test_interpolation({ |
| property: 'translate', |
| from: 'unset', |
| to: '20px', |
| }, [ |
| {at: -1, expect: '-20px'}, |
| {at: 0, expect: '0px'}, |
| {at: 0.25, expect: '5px'}, |
| {at: 0.75, expect: '15px'}, |
| {at: 1, expect: '20px'}, |
| {at: 2, expect: '40px'}, |
| ]); |
| |
| // Test inherited value. |
| test_interpolation({ |
| property: 'translate', |
| from: 'inherit', |
| to: '200px 100px 200px', |
| }, [ |
| {at: -1, expect: '0px 300px 400px'}, |
| {at: 0, expect: '100px 200px 300px'}, |
| {at: 0.25, expect: '125px 175px 275px'}, |
| {at: 0.75, expect: '175px 125px 225px'}, |
| {at: 1, expect: '200px 100px 200px'}, |
| {at: 2, expect: '300px 0px 100px'}, |
| ]); |
| |
| test_interpolation({ |
| property: 'translate', |
| from: '200px 100px 200px', |
| to: 'inherit', |
| }, [ |
| {at: -1, expect: '300px 0px 100px'}, |
| {at: 0, expect: '200px 100px 200px'}, |
| {at: 0.25, expect: '175px 125px 225px'}, |
| {at: 0.75, expect: '125px 175px 275px'}, |
| {at: 1, expect: '100px 200px 300px'}, |
| {at: 2, expect: '0px 300px 400px'}, |
| ]); |
| |
| // Test combination of initial and inherit. |
| test_interpolation({ |
| property: 'translate', |
| from: 'initial', |
| to: 'inherit', |
| }, [ |
| {at: -1, expect: '-100px -200px -300px'}, |
| {at: 0, expect: '0px'}, |
| {at: 0.25, expect: '25px 50px 75px'}, |
| {at: 0.75, expect: '75px 150px 225px'}, |
| {at: 1, expect: '100px 200px 300px'}, |
| {at: 2, expect: '200px 400px 600px'}, |
| ]); |
| |
| test_interpolation({ |
| property: 'translate', |
| from: 'inherit', |
| to: 'initial', |
| }, [ |
| {at: -1, expect: '200px 400px 600px'}, |
| {at: 0, expect: '100px 200px 300px'}, |
| {at: 0.25, expect: '75px 150px 225px'}, |
| {at: 0.75, expect: '25px 50px 75px'}, |
| {at: 1, expect: '0px'}, |
| {at: 2, expect: '-100px -200px -300px'}, |
| ]); |
| </script> |
| </body> |
| </html> |