| <!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(-60% + 520px)'}, |
| {at: 0, is: '40% 400px'}, |
| {at: 0.5, is: '30% calc(100% + 200px)'}, |
| {at: 1, is: '20% 200%'}, |
| {at: 1.5, is: '10% calc(300% + -200px)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'inherit', |
| to: '20px 200%', |
| }, [ |
| {at: -0.3, is: 'calc(39% + -6px) calc(-60% + 390px)'}, |
| {at: 0, is: '30% 300px'}, |
| {at: 0.5, is: 'calc(15% + 10px) calc(100% + 150px)'}, |
| {at: 1, is: '20px 200%'}, |
| {at: 1.5, is: 'calc(-15% + 30px) calc(300% + -150px)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'unset', |
| to: 'calc(100px + 120%) calc(100px + 120%)', |
| }, [ |
| {at: -0.3, is: 'calc(16% + -30px) calc(-36% + 490px)'}, |
| {at: 0, is: '40% 400px'}, |
| {at: 0.5, is: 'calc(80% + 50px) calc(60% + 250px)'}, |
| {at: 1, is: 'calc(120% + 100px) calc(120% + 100px)'}, |
| {at: 1.5, is: 'calc(160% + 150px) calc(180% + -50px)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'calc(-10px - 10%) -100px', |
| to: 'calc(10px + 10%) 100px', |
| }, [ |
| {at: -0.3, is: 'calc(-16% + -16px) -160px'}, |
| {at: 0, is: 'calc(-10% + -10px) -100px'}, |
| {at: 0.5, is: '0% 0px'}, |
| {at: 1, is: 'calc(10% + 10px) 100px'}, |
| {at: 1.5, is: 'calc(20% + 20px) 200px'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: 'calc(10em + 10%) 100em', |
| to: '20em calc(200em + 200%)', |
| }, [ |
| {at: -0.3, is: 'calc(13% + 140px) calc(-60% + 1400px)'}, |
| {at: 0, is: 'calc(10% + 200px) 2000px'}, |
| {at: 0.5, is: 'calc(5% + 300px) calc(100% + 3000px)'}, |
| {at: 1, is: '400px calc(200% + 4000px)'}, |
| {at: 1.5, is: 'calc(-5% + 500px) calc(300% + 5000px)'} |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage-list', |
| from: '0px', |
| to: 'calc(100px + 100%)', |
| }, [ |
| {at: -0.3, is: 'calc(-30% + -30px)'}, |
| {at: 0, is: '0px'}, |
| {at: 0.5, is: 'calc(50% + 50px)'}, |
| {at: 1, is: 'calc(100% + 100px)'}, |
| {at: 1.5, is: 'calc(150% + 150px)'} |
| ]); |
| |
| // 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> |
