| <!DOCTYPE html> |
| <html> |
| <body> |
| <template id="target-template"> |
| <svg width="90" height="90"> |
| <line x1="1" y1="2" x2="3" y2="4" class="target" /> |
| </svg> |
| </template> |
| <script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script> |
| <script> |
| 'use strict'; |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'translate(10 10)', |
| from: 'translate(0 10)', |
| fromComposite: 'add', |
| to: 'translate(20 50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'translate(10,10) translate(-8,-6)'}, |
| {at: 0, is: 'translate(10,10) translate(0,10)'}, |
| {at: 0.2, is: 'translate(10,10) translate(4,18)'}, |
| {at: 0.6, is: 'translate(10,10) translate(12,34)'}, |
| {at: 1, is: 'translate(10,10) translate(20,50)'}, |
| {at: 1.4, is: 'translate(10,10) translate(28,66)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'translate(10 10)', |
| from: 'translate(10 20)', |
| fromComposite: 'replace', |
| to: 'translate(20 50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'translate(10 20)'}, |
| {at: 0, is: 'translate(10 20)'}, |
| {at: 0.2, is: 'translate(10 20)'}, |
| {at: 0.6, is: 'translate(10 10) translate(20 50)'}, |
| {at: 1, is: 'translate(10 10) translate(20 50)'}, |
| {at: 1.4, is: 'translate(10 10) translate(20 50)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'translate(10 20)', |
| from: neutralKeyframe, |
| to: 'translate(30 60)', |
| toComposite: 'replace' |
| }, [ |
| {at: -0.4, is: 'translate(2,4)'}, |
| {at: 0, is: 'translate(10,20)'}, |
| {at: 0.2, is: 'translate(14,28)'}, |
| {at: 0.6, is: 'translate(22,44)'}, |
| {at: 1, is: 'translate(30,60)'}, |
| {at: 1.4, is: 'translate(38,76)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'scale(10 5)', |
| from: 'scale(10 10)', |
| fromComposite: 'add', |
| to: 'scale(20 50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'scale(10 5) scale(6 -6)'}, |
| {at: 0, is: 'scale(10 5) scale(10 10)'}, |
| {at: 0.2, is: 'scale(10 5) scale(12 18)'}, |
| {at: 0.6, is: 'scale(10 5) scale(16 34)'}, |
| {at: 1, is: 'scale(10 5) scale(20 50)'}, |
| {at: 1.4, is: 'scale(10 5) scale(24 66)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'scale(10 5)', |
| from: 'scale(10 10)', |
| fromComposite: 'replace', |
| to: 'scale(20 50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'scale(10 10)'}, |
| {at: 0, is: 'scale(10 10)'}, |
| {at: 0.2, is: 'scale(10 10)'}, |
| {at: 0.6, is: 'scale(10 5) scale(20 50)'}, |
| {at: 1, is: 'scale(10 5) scale(20 50)'}, |
| {at: 1.4, is: 'scale(10 5) scale(20 50)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'scale(10 10)', |
| from: neutralKeyframe, |
| to: 'scale(20 50)', |
| toComposite: 'replace' |
| }, [ |
| {at: -0.4, is: 'scale(6 -6)'}, |
| {at: 0, is: 'scale(10 10)'}, |
| {at: 0.2, is: 'scale(12 18)'}, |
| {at: 0.6, is: 'scale(16 34)'}, |
| {at: 1, is: 'scale(20 50)'}, |
| {at: 1.4, is: 'scale(24 66)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'rotate(10 10 10)', |
| from: 'rotate(10 20 30)', |
| fromComposite: 'add', |
| to: 'rotate(40 80 160)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'rotate(10 10 10) rotate(-2 -4 -22)'}, |
| {at: 0, is: 'rotate(10 10 10) rotate(10 20 30)'}, |
| {at: 0.2, is: 'rotate(10 10 10) rotate(16 32 56)'}, |
| {at: 0.6, is: 'rotate(10 10 10) rotate(28 56 108)'}, |
| {at: 1, is: 'rotate(10 10 10) rotate(40 80 160)'}, |
| {at: 1.4, is: 'rotate(10 10 10) rotate(52 104 212)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'rotate(10 10 10)', |
| from: 'rotate(10 20 30)', |
| fromComposite: 'replace', |
| to: 'rotate(40 80 160)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'rotate(10 20 30)'}, |
| {at: 0, is: 'rotate(10 20 30)'}, |
| {at: 0.2, is: 'rotate(10 20 30)'}, |
| {at: 0.6, is: 'rotate(10 10 10) rotate(40 80 160)'}, |
| {at: 1, is: 'rotate(10 10 10) rotate(40 80 160)'}, |
| {at: 1.4, is: 'rotate(10 10 10) rotate(40 80 160)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'rotate(10 20 30)', |
| from: neutralKeyframe, |
| to: 'rotate(40 80 160)', |
| toComposite: 'replace' |
| }, [ |
| {at: -0.4, is: 'rotate(-2 -4 -22)'}, |
| {at: 0, is: 'rotate(10 20 30)'}, |
| {at: 0.2, is: 'rotate(16 32 56)'}, |
| {at: 0.6, is: 'rotate(28 56 108)'}, |
| {at: 1, is: 'rotate(40 80 160)'}, |
| {at: 1.4, is: 'rotate(52 104 212)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'skewX(10)', |
| from: 'skewX(30)', |
| fromComposite: 'add', |
| to: 'skewX(50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'skewX(10) skewX(22)'}, |
| {at: 0, is: 'skewX(10) skewX(30)'}, |
| {at: 0.2, is: 'skewX(10) skewX(34)'}, |
| {at: 0.6, is: 'skewX(10) skewX(42)'}, |
| {at: 1, is: 'skewX(10) skewX(50)'}, |
| {at: 1.4, is: 'skewX(10) skewX(58)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'skewX(10)', |
| from: 'skewX(30)', |
| fromComposite: 'replace', |
| to: 'skewX(50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'skewX(30)'}, |
| {at: 0, is: 'skewX(30)'}, |
| {at: 0.2, is: 'skewX(30)'}, |
| {at: 0.6, is: 'skewX(10) skewX(50)'}, |
| {at: 1, is: 'skewX(10) skewX(50)'}, |
| {at: 1.4, is: 'skewX(10) skewX(50)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'skewX(30)', |
| from: neutralKeyframe, |
| to: 'skewX(50)', |
| toComposite: 'replace' |
| }, [ |
| {at: -0.4, is: 'skewX(22)'}, |
| {at: 0, is: 'skewX(30)'}, |
| {at: 0.2, is: 'skewX(34)'}, |
| {at: 0.6, is: 'skewX(42)'}, |
| {at: 1, is: 'skewX(50)'}, |
| {at: 1.4, is: 'skewX(58)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'skewY(10)', |
| from: 'skewY(30)', |
| fromComposite: 'add', |
| to: 'skewY(50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'skewY(10) skewY(22)'}, |
| {at: 0, is: 'skewY(10) skewY(30)'}, |
| {at: 0.2, is: 'skewY(10) skewY(34)'}, |
| {at: 0.6, is: 'skewY(10) skewY(42)'}, |
| {at: 1, is: 'skewY(10) skewY(50)'}, |
| {at: 1.4, is: 'skewY(10) skewY(58)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'skewY(10)', |
| from: 'skewY(30)', |
| fromComposite: 'replace', |
| to: 'skewY(50)', |
| toComposite: 'add' |
| }, [ |
| {at: -0.4, is: 'skewY(30)'}, |
| {at: 0, is: 'skewY(30)'}, |
| {at: 0.2, is: 'skewY(30)'}, |
| {at: 0.6, is: 'skewY(10) skewY(50)'}, |
| {at: 1, is: 'skewY(10) skewY(50)'}, |
| {at: 1.4, is: 'skewY(10) skewY(50)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| underlying: 'skewY(30)', |
| from: neutralKeyframe, |
| to: 'skewY(50)', |
| toComposite: 'replace' |
| }, [ |
| {at: -0.4, is: 'skewY(22)'}, |
| {at: 0, is: 'skewY(30)'}, |
| {at: 0.2, is: 'skewY(34)'}, |
| {at: 0.6, is: 'skewY(42)'}, |
| {at: 1, is: 'skewY(50)'}, |
| {at: 1.4, is: 'skewY(58)'} |
| ]); |
| |
| </script> |
| </body> |
| </html> |