| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| --length-percentage-list: 30% 300px; |
| } |
| .target { |
| --length-percentage-list: 10% 100px; |
| font-size: 20px; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: '--length-percentage-list', |
| syntax: '<length-percentage>+', |
| initialValue: '40% 400px', |
| inherits: false, |
| }); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'initial', |
| to: '20% 200%', |
| }, [ |
| {at: -0.3, is: '46% calc(520px - 60%)'}, |
| {at: 0, is: '40% 400px'}, |
| {at: 0.5, is: '30% calc(200px + 100%)'}, |
| {at: 1, is: '20% 200%'}, |
| {at: 1.5, is: '10% calc(-200px + 300%)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'inherit', |
| to: '20px 200%', |
| }, [ |
| {at: -0.3, is: 'calc(-6px + 39%) calc(390px - 60%)'}, |
| {at: 0, is: '30% 300px'}, |
| {at: 0.5, is: 'calc(10px + 15%) calc(150px + 100%)'}, |
| {at: 1, is: '20px 200%'}, |
| {at: 1.5, is: 'calc(30px - 15%) calc(-150px + 300%)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'unset', |
| to: 'calc(100px + 120%) calc(100px + 120%)', |
| }, [ |
| {at: -0.3, is: 'calc(-30px + 16%) calc(490px - 36%)'}, |
| {at: 0, is: '40% 400px'}, |
| {at: 0.5, is: 'calc(50px + 80%) calc(250px + 60%)'}, |
| {at: 1, is: 'calc(100px + 120%) calc(100px + 120%)'}, |
| {at: 1.5, is: 'calc(150px + 160%) calc(-50px + 180%)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'calc(-10px - 10%) -100px', |
| to: 'calc(10px + 10%) 100px', |
| }, [ |
| {at: -0.3, is: 'calc(-16px - 16%) -160px'}, |
| {at: 0, is: 'calc(-10px - 10%) -100px'}, |
| {at: 0.5, is: '0% 0px'}, |
| {at: 1, is: 'calc(10px + 10%) 100px'}, |
| {at: 1.5, is: 'calc(20px + 20%) 200px'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'calc(10em + 10%) 100em', |
| to: '20em calc(200em + 200%)', |
| }, [ |
| {at: -0.3, is: 'calc(140px + 13%) calc(1400px - 60%)'}, |
| {at: 0, is: 'calc(200px + 10%) 2000px'}, |
| {at: 0.5, is: 'calc(300px + 5%) calc(3000px + 100%)'}, |
| {at: 1, is: '400px calc(4000px + 200%)'}, |
| {at: 1.5, is: 'calc(500px - 5%) calc(5000px + 300%)'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: '0px', |
| to: 'calc(100px + 100%)', |
| }, [ |
| {at: -0.3, is: 'calc(-30px - 30%)'}, |
| {at: 0, is: '0px'}, |
| {at: 0.5, is: 'calc(50px + 50%)'}, |
| {at: 1, is: 'calc(100px + 100%)'}, |
| {at: 1.5, is: 'calc(150px + 150%)'} |
| ]); |
| |
| // 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-percentage-list', |
| from: neutralKeyframe, |
| to: '20% 200px', |
| }, [ |
| {at: -0.3, is: '7% 70px'}, |
| {at: 0, is: '10% 100px'}, |
| {at: 0.5, is: '15% 150px'}, |
| {at: 1, is: '20% 200px'}, |
| {at: 1.5, is: '25% 250px'}, |
| ]); |
| |
| assertComposition({ |
| property: '--length-percentage-list', |
| underlying: '50px 60%', |
| addFrom: '10% 140px', |
| addTo: '110% 40px', |
| }, [ |
| {at: -0.3, is: 'calc(50px - 20%) calc(170px + 60%)'}, |
| {at: 0, is: 'calc(50px + 10%) calc(140px + 60%)'}, |
| {at: 0.5, is: 'calc(50px + 60%) calc(90px + 60%)'}, |
| {at: 1, is: 'calc(50px + 110%) calc(40px + 60%)'}, |
| {at: 1.5, is: 'calc(50px + 160%) calc(-10px + 60%)'}, |
| ]); |
| |
| assertComposition({ |
| property: '--length-percentage-list', |
| underlying: '50px 60%', |
| addFrom: '10% 140px', |
| replaceTo: '110% 40px', |
| }, [ |
| {at: -0.3, is: 'calc(65px - 20%) calc(170px + 78%)'}, |
| {at: 0, is: 'calc(50px + 10%) calc(140px + 60%)'}, |
| {at: 0.5, is: 'calc(25px + 60%) calc(90px + 30%)'}, |
| {at: 1, is: '110% 40px'}, |
| {at: 1.5, is: 'calc(-25px + 160%) calc(-10px - 30%)'}, |
| ]); |
| |
| </script> |
| </body> |
