| <!DOCTYPE html> |
| <html> |
| <body> |
| <template id="target-template"> |
| <svg width="0" height="0"> |
| <polygon class="target" /> |
| </svg> |
| </template> |
| <script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script> |
| <script> |
| 'use strict'; |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20', |
| from: '40 40, 30 30', |
| fromComposite: 'add', |
| to: '90 90, -10 -10', |
| toComposite: 'add', |
| }, [ |
| {at: -0.4, is: '30 30, 66 66'}, |
| {at: 0, is: '50 50, 50 50'}, |
| {at: 0.2, is: '60 60, 42 42'}, |
| {at: 0.6, is: '80 80, 26 26'}, |
| {at: 1, is: '100 100, 10 10'}, |
| {at: 1.4, is: '120 120, -6 -6'}, |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20', |
| from: '40 40, 30 30', |
| fromComposite: 'add', |
| to: '90 90, -10 -10, 50 50', |
| toComposite: 'add', |
| }, [ |
| {at: -0.4, is: '50 50, 50 50'}, |
| {at: 0, is: '50 50, 50 50'}, |
| {at: 0.2, is: '50 50, 50 50'}, |
| {at: 0.6, is: '90 90, -10 -10, 50 50'}, |
| {at: 1, is: '90 90, -10 -10, 50 50'}, |
| {at: 1.4, is: '90 90, -10 -10, 50 50'}, |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20, 50 50', |
| from: '40 40', |
| fromComposite: 'add', |
| to: '90 90, -10 -10', |
| toComposite: 'add', |
| }, [ |
| {at: -0.4, is: '40 40'}, |
| {at: 0, is: '40 40'}, |
| {at: 0.2, is: '40 40'}, |
| {at: 0.6, is: '90 90, -10 -10'}, |
| {at: 1, is: '90 90, -10 -10'}, |
| {at: 1.4, is: '90 90, -10 -10'}, |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20', |
| from: '40 40, 30 30', |
| fromComposite: 'add', |
| to: '90 90, -10 -10', |
| toComposite: 'replace', |
| }, [ |
| {at: -0.4, is: '34 34, 74 74'}, |
| {at: 0, is: '50 50, 50 50'}, |
| {at: 0.2, is: '58 58, 38 38'}, |
| {at: 0.6, is: '74 74, 14 14'}, |
| {at: 1, is: '90 90, -10 -10'}, |
| {at: 1.4, is: '106 106, -34 -34'}, |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20', |
| from: '40 40, 30 30', |
| fromComposite: 'add', |
| to: '90 90, -10 -10, 50 50', |
| toComposite: 'replace', |
| }, [ |
| {at: -0.4, is: '50 50, 50 50'}, |
| {at: 0, is: '50 50, 50 50'}, |
| {at: 0.2, is: '50 50, 50 50'}, |
| {at: 0.6, is: '90 90, -10 -10, 50 50'}, |
| {at: 1, is: '90 90, -10 -10, 50 50'}, |
| {at: 1.4, is: '90 90, -10 -10, 50 50'}, |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20, 50 50', |
| from: '40 40', |
| fromComposite: 'add', |
| to: '90 90, -10 -10', |
| toComposite: 'replace', |
| }, [ |
| {at: -0.4, is: '40 40'}, |
| {at: 0, is: '40 40'}, |
| {at: 0.2, is: '40 40'}, |
| {at: 0.6, is: '90 90, -10 -10'}, |
| {at: 1, is: '90 90, -10 -10'}, |
| {at: 1.4, is: '90 90, -10 -10'}, |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20', |
| from: neutralKeyframe, |
| to: '90 90, -10 -10', |
| toComposite: 'replace', |
| }, [ |
| {at: -0.4, is: '-22 -22, 32 32'}, |
| {at: 0, is: '10 10, 20 20'}, |
| {at: 0.2, is: '26 26, 14 14'}, |
| {at: 0.6, is: '58 58, 2 2'}, |
| {at: 1, is: '90 90, -10 -10'}, |
| {at: 1.4, is: '122 122, -22 -22'}, |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'points', |
| underlying: '10 10, 20 20', |
| from: neutralKeyframe, |
| to: '90 90, -10 -10, 50 50', |
| toComposite: 'replace', |
| }, [ |
| {at: -0.4, is: '10 10, 20 20'}, |
| {at: 0, is: '10 10, 20 20'}, |
| {at: 0.2, is: '10 10, 20 20'}, |
| {at: 0.6, is: '90 90, -10 -10, 50 50'}, |
| {at: 1, is: '90 90, -10 -10, 50 50'}, |
| {at: 1.4, is: '90 90, -10 -10, 50 50'}, |
| ]); |
| </script> |
| </body> |
| </html> |
