| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| --length-list: 30px 300px; |
| } |
| .target { |
| --length-list: 10px 100px; |
| font-size: 20px; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: '--length-list', |
| syntax: '<length>+', |
| initialValue: '40px 400px', |
| inherits: false, |
| }); |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: 'initial', |
| to: '20px 200px', |
| }, [ |
| {at: -0.3, is: '46px 460px'}, |
| {at: 0, is: '40px 400px'}, |
| {at: 0.5, is: '30px 300px'}, |
| {at: 1, is: '20px 200px'}, |
| {at: 1.5, is: '10px 100px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: 'inherit', |
| to: '20px 200px', |
| }, [ |
| {at: -0.3, is: '33px 330px'}, |
| {at: 0, is: '30px 300px'}, |
| {at: 0.5, is: '25px 250px'}, |
| {at: 1, is: '20px 200px'}, |
| {at: 1.5, is: '15px 150px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: 'unset', |
| to: '20px 200px', |
| }, [ |
| {at: -0.3, is: '46px 460px'}, |
| {at: 0, is: '40px 400px'}, |
| {at: 0.5, is: '30px 300px'}, |
| {at: 1, is: '20px 200px'}, |
| {at: 1.5, is: '10px 100px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: '-10px -100px', |
| to: '10px 100px', |
| }, [ |
| {at: -0.3, is: '-16px -160px'}, |
| {at: 0, is: '-10px -100px'}, |
| {at: 0.5, is: '0px 0px'}, |
| {at: 1, is: '10px 100px'}, |
| {at: 1.5, is: '20px 200px'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: '10em 100em', |
| to: '20em 200em', |
| }, [ |
| {at: -0.3, is: '140px 1400px'}, |
| {at: 0, is: '200px 2000px'}, |
| {at: 0.5, is: '300px 3000px'}, |
| {at: 1, is: '400px 4000px'}, |
| {at: 1.5, is: '500px 5000px'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: '10em 100em', |
| to: '100px 1000px', |
| }, [ |
| {at: -0.3, is: '230px 2300px'}, |
| {at: 0, is: '200px 2000px'}, |
| {at: 0.5, is: '150px 1500px'}, |
| {at: 1, is: '100px 1000px'}, |
| {at: 1.5, is: '50px 500px'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: '10px', |
| to: '100px', |
| }, [ |
| {at: -0.3, is: '-17px'}, |
| {at: 0, is: '10px'}, |
| {at: 0.5, is: '55px'}, |
| {at: 1, is: '100px'}, |
| {at: 1.5, is: '145px'} |
| ]); |
| |
| // Composition and neutralKeyframe tests assume that composite:add means |
| // component-wise addition, which may or may not be the behavior we want. |
| // https://github.com/w3c/css-houdini-drafts/issues/799 |
| |
| assertInterpolation({ |
| property: '--length-list', |
| from: neutralKeyframe, |
| to: '20px 200px', |
| }, [ |
| {at: -0.3, is: '7px 70px'}, |
| {at: 0, is: '10px 100px'}, |
| {at: 0.5, is: '15px 150px'}, |
| {at: 1, is: '20px 200px'}, |
| {at: 1.5, is: '25px 250px'}, |
| ]); |
| |
| assertComposition({ |
| property: '--length-list', |
| underlying: '50px 60px', |
| addFrom: '10px 140px', |
| addTo: '110px 40px', |
| }, [ |
| {at: -0.3, is: '30px 230px'}, |
| {at: 0, is: '60px 200px'}, |
| {at: 0.5, is: '110px 150px'}, |
| {at: 1, is: '160px 100px'}, |
| {at: 1.5, is: '210px 50px'}, |
| ]); |
| |
| assertComposition({ |
| property: '--length-list', |
| underlying: '50px 60px', |
| addFrom: '10px 140px', |
| replaceTo: '110px 40px', |
| }, [ |
| {at: -0.3, is: '45px 248px'}, |
| {at: 0, is: '60px 200px'}, |
| {at: 0.5, is: '85px 120px'}, |
| {at: 1, is: '110px 40px'}, |
| {at: 1.5, is: '135px -40px'}, |
| ]); |
| |
| </script> |
| </body> |
