blob: c063c6122b7fbc8ddbb69aef8ab28f2553ac9adc [file] [log] [blame]
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.container {
display: inline-block;
}
.parent {
stroke-dasharray: 30 10;
}
.target {
font-size: 16px;
stroke: black;
stroke-width: 10px;
stroke-dasharray: 10 30;
}
.expected {
stroke: green;
}
</style>
<body>
<template id="target-template">
<svg height="400" width="5">
<path d="M0,0 l0,400" class="target">
</svg>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'stroke-dasharray',
from: neutralKeyframe,
to: '20 20',
}, [
{at: -0.6, is: '4px, 36px'},
{at: -0.4, is: '6px, 34px'},
{at: -0.2, is: '8px, 32px'},
{at: 0, is: '10px, 30px'},
{at: 0.2, is: '12px, 28px'},
{at: 0.4, is: '14px, 26px'},
{at: 0.6, is: '16px, 24px'},
{at: 0.8, is: '18px, 22px'},
{at: 1, is: '20px, 20px'},
{at: 1.2, is: '22px, 18px'},
]);
assertNoInterpolation({
property: 'stroke-dasharray',
from: 'initial',
to: '20 20',
});
assertInterpolation({
property: 'stroke-dasharray',
from: 'inherit',
to: '20 20',
}, [
{at: -0.6, is: '36px, 4px'},
{at: -0.4, is: '34px, 6px'},
{at: -0.2, is: '32px, 8px'},
{at: 0, is: '30px, 10px'},
{at: 0.2, is: '28px, 12px'},
{at: 0.4, is: '26px, 14px'},
{at: 0.6, is: '24px, 16px'},
{at: 0.8, is: '22px, 18px'},
{at: 1, is: '20px, 20px'},
{at: 1.2, is: '18px, 22px'},
]);
assertInterpolation({
property: 'stroke-dasharray',
from: 'unset',
to: '20 20',
}, [
{at: -0.6, is: '36px, 4px'},
{at: -0.4, is: '34px, 6px'},
{at: -0.2, is: '32px, 8px'},
{at: 0, is: '30px, 10px'},
{at: 0.2, is: '28px, 12px'},
{at: 0.4, is: '26px, 14px'},
{at: 0.6, is: '24px, 16px'},
{at: 0.8, is: '22px, 18px'},
{at: 1, is: '20px, 20px'},
{at: 1.2, is: '18px, 22px'},
]);
// Basic case
assertInterpolation({
property: 'stroke-dasharray',
from: '5 10',
to: '15 20'
}, [
{at: -0.6, is: ' 0 4'}, // Values must be non-negative.
{at: -0.4, is: ' 1 6'},
{at: -0.2, is: ' 3 8'},
{at: 0, is: ' 5 10'},
{at: 0.2, is: ' 7 12'},
{at: 0.4, is: ' 9 14'},
{at: 0.6, is: '11 16'},
{at: 0.8, is: '13 18'},
{at: 1, is: '15 20'},
{at: 1.2, is: '17 22'},
]);
// Zero value
assertInterpolation({
property: 'stroke-dasharray',
from: '0 0',
to: '5 10'
}, [
{at: -0.2, is: ' 0 0'}, // Values must be non-negative.
{at: 0, is: ' 0 0'},
{at: 0.2, is: ' 1 2'},
{at: 0.4, is: ' 2 4'},
{at: 0.6, is: ' 3 6'},
{at: 0.8, is: ' 4 8'},
{at: 1.0, is: ' 5 10'},
{at: 1.2, is: ' 6 12'},
]);
// From none
assertNoInterpolation({
property: 'stroke-dasharray',
from: 'none',
to: '5 10'
});
assertNoInterpolation({
property: 'stroke-dasharray',
from: 'none',
to: '5em 10em'
});
// To none
assertNoInterpolation({
property: 'stroke-dasharray',
from: '5 10',
to: 'none'
});
// Both none
assertNoInterpolation({
property: 'stroke-dasharray',
from: 'none',
to: 'none'
});
// Differing list lengths
// Lists are repeated until length is equal to lowest common multiple of lengths.
assertInterpolation({
property: 'stroke-dasharray',
from: '5 10',
to: '15 20 25'
}, [
{at: -0.2, is: ' 3 8 1 9 2 7'},
{at: 0, is: ' 5 10'},
{at: 0.2, is: ' 7 12 9 11 8 13'},
{at: 0.4, is: ' 9 14 13 12 11 16'},
{at: 0.6, is: '11 16 17 13 14 19'},
{at: 0.8, is: '13 18 21 14 17 22'},
{at: 1, is: '15 20 25'},
{at: 1.2, is: '17 22 29 16 23 28'},
]);
// Lowest common multiple of list lengths not equal to multiple of list lengths
assertInterpolation({
property: 'stroke-dasharray',
from: '5 10 15 20',
to: '25 30 35 40 45 50'
}, [
{at: -0.2, is: ' 1 6 11 16 0 2 13 18 0 4 9 14'}, // Values must be non-negative.
{at: 0, is: ' 5 10 15 20'},
{at: 0.2, is: ' 9 14 19 24 13 18 17 22 11 16 21 26'},
{at: 0.4, is: '13 18 23 28 21 26 19 24 17 22 27 32'},
{at: 0.6, is: '17 22 27 32 29 34 21 26 23 28 33 38'},
{at: 0.8, is: '21 26 31 36 37 42 23 28 29 34 39 44'},
{at: 1, is: '25 30 35 40 45 50'},
{at: 1.2, is: '29 34 39 44 53 58 27 32 41 46 51 56'},
]);
// One list has odd length
assertInterpolation({
property: 'stroke-dasharray',
from: '5 10 15',
to: '20 25 30 35'
}, [
{at: -0.2, is: ' 2 7 12 0 8 13 0 5 14 1 6 11'}, // Values must be non-negative.
{at: 0, is: ' 5 10 15'},
{at: 0.2, is: ' 8 13 18 11 12 17 10 15 16 9 14 19'},
{at: 0.4, is: '11 16 21 17 14 19 15 20 17 13 18 23'},
{at: 0.6, is: '14 19 24 23 16 21 20 25 18 17 22 27'},
{at: 0.8, is: '17 22 27 29 18 23 25 30 19 21 26 31'},
{at: 1, is: '20 25 30 35'},
{at: 1.2, is: '23 28 33 41 22 27 35 40 21 29 34 39'},
]);
// Both lists have odd length
assertInterpolation({
property: 'stroke-dasharray',
from: '5 10 15',
to: '20 25 30 35 40'
}, [
{at: -0.2, is: ' 2 7 12 0 4 14 1 6 11 0 8 13 0 5 10'}, // Values must be non-negative.
{at: 0, is: ' 5 10 15'},
{at: 0.2, is: ' 8 13 18 11 16 16 9 14 19 12 12 17 10 15 20'},
{at: 0.4, is: '11 16 21 17 22 17 13 18 23 19 14 19 15 20 25'},
{at: 0.6, is: '14 19 24 23 28 18 17 22 27 26 16 21 20 25 30'},
{at: 0.8, is: '17 22 27 29 34 19 21 26 31 33 18 23 25 30 35'},
{at: 1, is: '20 25 30 35 40'},
{at: 1.2, is: '23 28 33 41 46 21 29 34 39 47 22 27 35 40 45'},
]);
// Common units
assertInterpolation({
property: 'stroke-dasharray',
from: '0em 20px 30px',
to: '40px 0em 60px'
}, [
{at: -0.2, is: '0px 24px 24px'},
{at: 0, is: '0px 20px 30px'},
{at: 0.2, is: '8px 16px 36px'},
{at: 0.4, is: '16px 12px 42px'},
{at: 0.6, is: '24px 8px 48px'},
{at: 0.8, is: '32px 4px 54px'},
{at: 1, is: '40px 0px 60px'},
{at: 1.2, is: '48px 0px 66px'},
]);
// Inconsistent units
assertInterpolation({
property: 'stroke-dasharray',
from: '0em 20px 30px',
to: '40em 0em 60em'
}, [
{at: -0.2, is: '0em 24px 0px'},
{at: 0, is: '0em 20px 30px'},
{at: 0.2, is: '8em 16px 216px'},
{at: 0.4, is: '16em 12px 402px'},
{at: 0.6, is: '24em 8px 588px'},
{at: 0.8, is: '32em 4px 774px'},
{at: 1, is: '40em 0em 60em'},
{at: 1.2, is: '48em 0px 1146px'},
]);
assertInterpolation({
property: 'stroke-dasharray',
from: '0px 20px',
to: '40px 0px 60em'
}, [
{at: -0.2, is: '0px 24px 0px 16px 0px 0px'},
{at: 0, is: '0px 20px'},
{at: 0.2, is: '8px 16px 192px 24px 0px 208px'},
{at: 0.4, is: '16px 12px 384px 28px 0px 396px'},
{at: 0.6, is: '24px 8px 576px 32px 0px 584px'},
{at: 0.8, is: '32px 4px 768px 36px 0px 772px'},
{at: 1, is: '40px 0px 60em'},
{at: 1.2, is: '48px 0px 1152px 44px 0px 1148px'},
]);
// Mixed units
assertInterpolation({
property: 'stroke-dasharray',
from: '10em 30px',
to: '20em 40px'
}, [
{at: -0.2, is: '8em 28px'},
{at: 0, is: '10em 30px'},
{at: 0.2, is: '12em 32px'},
{at: 0.4, is: '14em 34px'},
{at: 0.6, is: '16em 36px'},
{at: 0.8, is: '18em 38px'},
{at: 1, is: '20em 40px'},
{at: 1.2, is: '22em 42px'},
]);
assertInterpolation({
property: 'stroke-dasharray',
from: '10em 20px 30em 40px 50em 60px',
to: '100em 200px 300em 400px'
}, [
{at: -0.2, is: '0em 0px 0em 0px 40em 32px 0em 0px 16em 8px 0em 0px'},
{at: 0, is: '10em 20px 30em 40px 50em 60px'},
{at: 0.2, is: '28em 56px 84em 112px 60em 88px 68em 96px 44em 72px 100em 128px'},
{at: 0.4, is: '46em 92px 138em 184px 70em 116px 126em 172px 58em 104px 150em 196px'},
{at: 0.6, is: '64em 128px 192em 256px 80em 144px 184em 248px 72em 136px 200em 264px'},
{at: 0.8, is: '82em 164px 246em 328px 90em 172px 242em 324px 86em 168px 250em 332px'},
{at: 1, is: '100em 200px 300em 400px'},
{at: 1.2, is: '118em 236px 354em 472px 110em 228px 358em 476px 114em 232px 350em 468px'},
]);
</script>
</body>