| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .target { |
| font-size: 16px; |
| stroke-width: 10px; |
| stroke: black; |
| } |
| .replica { |
| stroke: green; |
| } |
| </style> |
| <body> |
| <template id="target-template"> |
| <svg height="200" width="10"> |
| <path d="M5,0 l0,400" class="target"> |
| </svg> |
| </template> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| // 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 |
| assertInterpolation({ |
| property: 'stroke-dasharray', |
| from: 'none', |
| to: '5 10' |
| }, [ |
| {at: -0.2, is: ' 0 0'}, // Values must be non-negative. |
| {at: 0, is: '0px, 0px'}, |
| {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'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'stroke-dasharray', |
| from: 'none', |
| to: '5em 10em' |
| }, [ |
| {at: -0.2, is: ' 0em 0em'}, // Values must be non-negative. |
| {at: 0, is: '0em, 0em'}, |
| {at: 0.2, is: ' 1em 2em'}, |
| {at: 0.4, is: ' 2em 4em'}, |
| {at: 0.6, is: ' 3em 6em'}, |
| {at: 0.8, is: ' 4em 8em'}, |
| {at: 1.0, is: ' 5em 10em'}, |
| {at: 1.2, is: ' 6em 12em'}, |
| ]); |
| |
| // To none |
| assertInterpolation({ |
| property: 'stroke-dasharray', |
| from: '5 10', |
| to: 'none' |
| }, [ |
| {at: -0.2, is: ' 6 12'}, |
| {at: 0, is: ' 5 10'}, |
| {at: 0.2, is: ' 4 8'}, |
| {at: 0.4, is: ' 3 6'}, |
| {at: 0.6, is: ' 2 4'}, |
| {at: 0.8, is: ' 1 2'}, |
| {at: 1.0, is: '0px, 0px'}, |
| {at: 1.2, is: ' 0 0'}, // Values must be non-negative. |
| ]); |
| |
| // Both none |
| assertInterpolation({ |
| property: 'stroke-dasharray', |
| from: 'none', |
| to: 'none' |
| }, [ |
| {at: -0.2, is: '0px'}, |
| {at: 0, is: '0px'}, |
| {at: 2.2, is: '0px'}, |
| {at: 4.2, is: '0px'}, |
| {at: 6.2, is: '0px'}, |
| {at: 8.2, is: '0px'}, |
| {at: 0.2, is: '0px'}, |
| {at: 1.2, is: '0px'}, |
| ]); |
| |
| // 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 5 10 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 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 5 10 15 20 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 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 5 10 15 5 10 15 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 20 25 30 35 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 5 10 15 5 10 15 5 10 15 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 20 25 30 35 40 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 0px 20px 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 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 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 100em 200px 300em 400px 100em 200px 300em 400px'}, |
| {at: 1.2, is: '118em 236px 354em 472px 110em 228px 358em 476px 114em 232px 350em 468px'}, |
| ]); |
| </script> |
| </body> |
