| <!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' |
| }); |
| </script> |
| </body> |
