| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| --length-percentage: 40%; |
| } |
| .target { |
| --length-percentage: 10px; |
| |
| /* Testing ems. */ |
| font-size: 20px; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: '--length-percentage', |
| syntax: '<length-percentage>', |
| initialValue: 'calc(40px + 80%)', |
| inherits: false, |
| }); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: neutralKeyframe, |
| to: '20px', |
| }, [ |
| {at: -0.3, is: '7px'}, |
| {at: 0, is: '10px'}, |
| {at: 0.5, is: '15px'}, |
| {at: 1, is: '20px'}, |
| {at: 1.5, is: '25px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: 'initial', |
| to: '40%', |
| }, [ |
| {at: -0.3, is: 'calc(52px + 92%)'}, |
| {at: 0, is: 'calc(40px + 80%)'}, |
| {at: 0.5, is: 'calc(20px + 60%)'}, |
| {at: 1, is: '40%'}, |
| {at: 1.5, is: 'calc(-20px + 20%)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: 'inherit', |
| to: '20px', |
| }, [ |
| {at: -0.3, is: 'calc(-6px + 52%)'}, |
| {at: 0, is: '40%'}, |
| {at: 0.5, is: 'calc(10px + 20%)'}, |
| {at: 1, is: '20px'}, |
| {at: 1.5, is: 'calc(30px + -20%)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: 'unset', |
| to: 'calc(20px + 40%)', |
| }, [ |
| {at: -0.3, is: 'calc(46px + 92%)'}, |
| {at: 0, is: 'calc(40px + 80%)'}, |
| {at: 0.5, is: 'calc(30px + 60%)'}, |
| {at: 1, is: 'calc(20px + 40%)'}, |
| {at: 1.5, is: 'calc(10px + 20%)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: '-10px', |
| to: '10px', |
| }, [ |
| {at: -0.3, is: '-16px'}, |
| {at: 0, is: '-10px'}, |
| {at: 0.5, is: '0px'}, |
| {at: 1, is: '10px'}, |
| {at: 1.5, is: '20px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: '10em', |
| to: '20em', |
| }, [ |
| {at: -0.3, is: '140px'}, |
| {at: 0, is: '200px'}, |
| {at: 0.5, is: '300px'}, |
| {at: 1, is: '400px'}, |
| {at: 1.5, is: '500px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: '10em', |
| to: '100px', |
| }, [ |
| {at: -0.3, is: '230px'}, |
| {at: 0, is: '200px'}, |
| {at: 0.5, is: '150px'}, |
| {at: 1, is: '100px'}, |
| {at: 1.5, is: '50px'}, |
| ]); |
| |
| assertInterpolation({ |
| property: '--length-percentage', |
| from: '10em', |
| to: '100%', |
| }, [ |
| {at: -0.3, is: 'calc(260px + -30%)'}, |
| {at: 0, is: '200px'}, |
| {at: 0.5, is: 'calc(100px + 50%)'}, |
| {at: 1, is: '100%'}, |
| {at: 1.5, is: 'calc(-100px + 150%)'}, |
| ]); |
| </script> |
| </body> |
