| <!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="resources/interpolation-test.js"></script> |
| <script> |
| 'use strict'; |
| |
| // Single transforms |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'translate(10 20)', |
| to: 'translate(30 60)' |
| }, [ |
| {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', |
| from: 'scale(10 20)', |
| to: 'scale(30 60)' |
| }, [ |
| {at: -0.4, is: 'scale(2 4)'}, |
| {at: 0, is: 'scale(10 20)'}, |
| {at: 0.2, is: 'scale(14 28)'}, |
| {at: 0.6, is: 'scale(22 44)'}, |
| {at: 1, is: 'scale(30 60)'}, |
| {at: 1.4, is: 'scale(38 76)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'rotate(10 20 30)', |
| to: 'rotate(40 80 160)' |
| }, [ |
| {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', |
| from: 'skewX(10)', |
| to: 'skewX(20)' |
| }, [ |
| {at: -0.4, is: 'skewX(6)'}, |
| {at: 0, is: 'skewX(10)'}, |
| {at: 0.2, is: 'skewX(12)'}, |
| {at: 0.6, is: 'skewX(16)'}, |
| {at: 1, is: 'skewX(20)'}, |
| {at: 1.4, is: 'skewX(24)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'skewY(10)', |
| to: 'skewY(20)' |
| }, [ |
| {at: -0.4, is: 'skewY(6)'}, |
| {at: 0, is: 'skewY(10)'}, |
| {at: 0.2, is: 'skewY(12)'}, |
| {at: 0.6, is: 'skewY(16)'}, |
| {at: 1, is: 'skewY(20)'}, |
| {at: 1.4, is: 'skewY(24)'} |
| ]); |
| |
| // Distinct transforms |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'translate(10 20)', |
| to: 'rotate(30 40 50)' |
| }, [ |
| {at: -0.4, is: 'translate(10 20)'}, |
| {at: 0, is: 'translate(10 20)'}, |
| {at: 0.2, is: 'translate(10 20)'}, |
| {at: 0.6, is: 'rotate(30 40 50)'}, |
| {at: 1, is: 'rotate(30 40 50)'}, |
| {at: 1.4, is: 'rotate(30 40 50)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'skewX(10)', |
| to: 'skewY(20)' |
| }, [ |
| {at: -0.4, is: 'skewX(10)'}, |
| {at: 0, is: 'skewX(10)'}, |
| {at: 0.2, is: 'skewX(10)'}, |
| {at: 0.6, is: 'skewY(20)'}, |
| {at: 1, is: 'skewY(20)'}, |
| {at: 1.4, is: 'skewY(20)'} |
| ]); |
| |
| // Common list of transforms |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'translate(110 20) scale(10 20) rotate(10 20 30)', |
| to: 'translate(130 60) scale(30 60) rotate(40 80 160)' |
| }, [ |
| {at: -0.4, is: 'translate(102,4) scale(2 4) rotate(-2 -4 -22)'}, |
| {at: 0, is: 'translate(110 20) scale(10 20) rotate(10 20 30)'}, |
| {at: 0.2, is: 'translate(114,28) scale(14 28) rotate(16 32 56)'}, |
| {at: 0.6, is: 'translate(122,44) scale(22 44) rotate(28 56 108)'}, |
| {at: 1, is: 'translate(130 60) scale(30 60) rotate(40 80 160)'}, |
| {at: 1.4, is: 'translate(138,76) scale(38 76) rotate(52 104 212)'} |
| ]); |
| |
| // Distinct list of transforms |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)', |
| to: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)' |
| }, [ |
| {at: -0.4, is: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)'}, |
| {at: 0, is: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)'}, |
| {at: 0.2, is: 'translate(110 20) scale(10 20) skewX(10) rotate(10 20 30)'}, |
| {at: 0.6, is: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)'}, |
| {at: 1, is: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)'}, |
| {at: 1.4, is: 'translate(130 60) scale(30 60) skewY(-30) rotate(40 80 160)'} |
| ]); |
| |
| assertAttributeInterpolation({ |
| property: 'transform', |
| from: 'translate(110 20) scale(10 20) skewX(10)', |
| to: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)' |
| }, [ |
| {at: -0.4, is: 'translate(110 20) scale(10 20) skewX(10)'}, |
| {at: 0, is: 'translate(110 20) scale(10 20) skewX(10)'}, |
| {at: 0.2, is: 'translate(110 20) scale(10 20) skewX(10)'}, |
| {at: 0.6, is: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)'}, |
| {at: 1, is: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)'}, |
| {at: 1.4, is: 'translate(130 60) scale(30 60) skewX(-30) rotate(40 80 160)'} |
| ]); |
| |
| </script> |
| </body> |
| </html> |
