blob: efe3d87410d3eda9a1ca230a655fb69afc477918 [file] [log] [blame]
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'min-height',
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: 'min-height',
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: 'min-height',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, is: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'},
{at: 1, is: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'},
]);
assertComposition({
property: 'min-height',
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: 'min-height',
underlying: '100px',
addFrom: '100px',
addTo: 'auto',
}, [
{at: -0.3, is: '200px'},
{at: 0, is: '200px'},
{at: 0.5, is: 'auto'},
{at: 1, is: 'auto'},
{at: 1.5, is: 'auto'},
]);
</script>
</body>