| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <style> |
| .parent { |
| cx: 100px; |
| } |
| .target { |
| font-size: 16px; |
| cx: 50px; |
| } |
| .expected { |
| fill: green; |
| } |
| </style> |
| <body> |
| <template id="target-template"> |
| <svg width="90" height="90"> |
| <path class="target" /> |
| </svg> |
| </template> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| 'use strict'; |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 C 32 42 52 62 12 22')", |
| to: "path('m 0 0 C 37 47 57 67 17 27')", |
| }, [ |
| {at: -0.4, is: "path('M 0 0 C 30 40 50 60 10 20')"}, |
| {at: 0, is: "path('M 0 0 C 32 42 52 62 12 22')"}, |
| {at: 0.2, is: "path('M 0 0 C 33 43 53 63 13 23')"}, |
| {at: 0.6, is: "path('M 0 0 C 35 45 55 65 15 25')"}, |
| {at: 1, is: "path('M 0 0 C 37 47 57 67 17 27')"}, |
| {at: 1.4, is: "path('M 0 0 C 39 49 59 69 19 29')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 c 32 42 52 62 12 22')", |
| to: "path('m 0 0 c 37 47 57 67 17 27')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 C 30 40 50 60 10 20')"}, |
| {at: 0, is: "path('M 0 0 C 32 42 52 62 12 22')"}, |
| {at: 0.2, is: "path('M 0 0 C 33 43 53 63 13 23')"}, |
| {at: 0.6, is: "path('M 0 0 C 35 45 55 65 15 25')"}, |
| {at: 1, is: "path('M 0 0 C 37 47 57 67 17 27')"}, |
| {at: 1.4, is: "path('M 0 0 C 39 49 59 69 19 29')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 Q 32 42 52 62')", |
| to: "path('m 0 0 Q 37 47 57 67')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 Q 30 40 50 60')"}, |
| {at: 0, is: "path('M 0 0 Q 32 42 52 62')"}, |
| {at: 0.2, is: "path('M 0 0 Q 33 43 53 63')"}, |
| {at: 0.6, is: "path('M 0 0 Q 35 45 55 65')"}, |
| {at: 1, is: "path('M 0 0 Q 37 47 57 67')"}, |
| {at: 1.4, is: "path('M 0 0 Q 39 49 59 69')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 q 32 42 52 62')", |
| to: "path('m 0 0 q 37 47 57 67')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 Q 30 40 50 60')"}, |
| {at: 0, is: "path('M 0 0 Q 32 42 52 62')"}, |
| {at: 0.2, is: "path('M 0 0 Q 33 43 53 63')"}, |
| {at: 0.6, is: "path('M 0 0 Q 35 45 55 65')"}, |
| {at: 1, is: "path('M 0 0 Q 37 47 57 67')"}, |
| {at: 1.4, is: "path('M 0 0 Q 39 49 59 69')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 A 10 20 30 1 0 40 50')", |
| to: "path('m 0 0 A 60 70 80 0 1 90 100')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 A -10 0 10 1 0 20 30')"}, |
| {at: 0, is: "path('M 0 0 A 10 20 30 1 0 40 50')"}, |
| {at: 0.2, is: "path('M 0 0 A 20 30 40 1 0 50 60')"}, |
| {at: 0.6, is: "path('M 0 0 A 40 50 60 0 1 70 80')"}, |
| {at: 1, is: "path('M 0 0 A 60 70 80 0 1 90 100')"}, |
| {at: 1.4, is: "path('M 0 0 A 80 90 100 0 1 110 120')"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 a 10 20 30 1 0 40 50')", |
| to: "path('m 0 0 a 60 70 80 0 1 90 100')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 A -10 0 10 1 0 20 30')"}, |
| {at: 0, is: "path('M 0 0 A 10 20 30 1 0 40 50')"}, |
| {at: 0.2, is: "path('M 0 0 A 20 30 40 1 0 50 60')"}, |
| {at: 0.6, is: "path('M 0 0 A 40 50 60 0 1 70 80')"}, |
| {at: 1, is: "path('M 0 0 A 60 70 80 0 1 90 100')"}, |
| {at: 1.4, is: "path('M 0 0 A 80 90 100 0 1 110 120')"} |
| ]); |
| </script> |
| </body> |
