<!DOCTYPE html> | |
<meta charset="UTF-8"> | |
<body> | |
<script src="../interpolation/resources/interpolation-test.js"></script> | |
<script> | |
assertComposition({ | |
property: 'column-gap', | |
underlying: '50px', | |
addFrom: '100px', | |
addTo: '200px', | |
}, [ | |
{at: -0.3, is: '120px'}, | |
{at: 0, is: '150px'}, | |
{at: 0.5, is: '200px'}, | |
{at: 1, is: '250px'}, | |
{at: 1.5, is: '300px'}, | |
]); | |
assertComposition({ | |
property: 'column-gap', | |
underlying: '100px', | |
addFrom: '10px', | |
addTo: '2px', | |
}, [ | |
{at: -0.5, is: '114px'}, | |
{at: 0, is: '110px'}, | |
{at: 0.5, is: '106px'}, | |
{at: 1, is: '102px'}, | |
{at: 1.5, is: '98px'}, // Value clamping should happen after composition. | |
]); | |
assertComposition({ | |
property: 'column-gap', | |
underlying: '50px', | |
addFrom: '100px', | |
replaceTo: '200px', | |
}, [ | |
{at: -0.3, is: '135px'}, | |
{at: 0, is: '150px'}, | |
{at: 0.5, is: '175px'}, | |
{at: 1, is: '200px'}, | |
{at: 1.5, is: '225px'}, | |
]); | |
assertComposition({ | |
property: 'column-gap', | |
underlying: '100px', | |
addFrom: '100px', | |
addTo: 'normal', | |
}, [ | |
{at: -0.3, is: '200px'}, | |
{at: 0, is: '200px'}, | |
{at: 0.5, is: 'normal'}, | |
{at: 1, is: 'normal'}, | |
{at: 1.5, is: 'normal'}, | |
]); | |
</script> | |
</body> |