| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| :root { |
| font-size: 30px; |
| } |
| .parent { |
| font-size: 20px; |
| } |
| </style> |
| <body> |
| <script src="../interpolation/resources/interpolation-test.js"></script> |
| <script> |
| assertComposition({ |
| property: 'font-size', |
| underlying: '50px', |
| addFrom: '100px', |
| addTo: '200px', |
| }, [ |
| {at: -0.3, is: '120px'}, |
| {at: 0, is: '150px'}, |
| {at: 0.25, is: '175px'}, |
| {at: 0.5, is: '200px'}, |
| {at: 0.75, is: '225px'}, |
| {at: 1, is: '250px'}, |
| {at: 1.5, is: '300px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'font-size', |
| underlying: '100px', |
| addFrom: '10px', |
| addTo: 'large', |
| }, [ |
| {at: -0.5, is: '106px'}, |
| {at: 0, is: '110px'}, |
| {at: 0.25, is: '112px'}, |
| {at: 0.5, is: '114px'}, |
| {at: 0.75, is: '116px'}, |
| {at: 1, is: '118px'}, |
| {at: 1.5, is: '122px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'font-size', |
| underlying: '50%', |
| addFrom: 'small', |
| addTo: '20px', |
| }, [ |
| {at: -0.3, is: '20.9px'}, |
| {at: 0, is: '23px'}, |
| {at: 0.25, is: '24.75px'}, |
| {at: 0.5, is: '26.5px'}, |
| {at: 0.75, is: '28.25px'}, |
| {at: 1, is: '30px'}, |
| {at: 1.5, is: '33.5px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'font-size', |
| underlying: '20%', |
| addFrom: '10rem', |
| replaceTo: '5em', |
| }, [ |
| {at: -0.3, is: '365.2px'}, |
| {at: 0, is: '304px'}, |
| {at: 0.25, is: '253px'}, |
| {at: 0.5, is: '202px'}, |
| {at: 0.75, is: '151px'}, |
| {at: 1, is: '100px'}, |
| {at: 1.5, is: '0px'}, |
| ]); |
| |
| assertComposition({ |
| property: 'font-size', |
| underlying: 'small', |
| replaceFrom: 'medium', |
| addTo: 'larger', |
| }, [ |
| {at: -0.3, is: '9.7px'}, |
| {at: 0, is: '16px'}, |
| {at: 0.25, is: '21.25px'}, |
| {at: 0.5, is: '26.5px'}, |
| {at: 0.75, is: '31.75px'}, |
| {at: 1, is: '37px'}, |
| {at: 1.5, is: '47.5px'}, |
| ]); |
| </script> |
| </body> |
