| <!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'; |
| |
| // Distinct number of path segments |
| assertNoInterpolation({ |
| property: 'd', |
| from: "path('M 0 0 H 1 H 2')", |
| to: "path('M 0 0 H 3')" |
| }); |
| |
| assertNoInterpolation({ |
| property: 'd', |
| from: "path('M 1 2 L 3 4 Z')", |
| to: "none" |
| }); |
| |
| // Distinct segment types |
| assertNoInterpolation({ |
| property: 'd', |
| from: "path('M 10 0 H 11')", |
| to: "path('M 20 0 V 2')" |
| }); |
| |
| assertNoInterpolation({ |
| property: 'd', |
| from: "path('M 1 2 L 4 6 Z')", |
| to: "path('M 1 2 L 4 6')" |
| }); |
| |
| // Exercise each segment type |
| assertInterpolation({ |
| property: 'd', |
| from: "path('M 0 0 Z')", |
| to: "path('M 0 0 Z')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 Z')"}, |
| {at: 0, is: "path('M 0 0 Z')"}, |
| {at: 0.2, is: "path('M 0 0 Z')"}, |
| {at: 0.6, is: "path('M 0 0 Z')"}, |
| {at: 1, is: "path('M 0 0 Z')"}, |
| {at: 1.4, is: "path('M 0 0 Z')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('M 20 50')", |
| to: "path('M 30 70')" |
| }, [ |
| {at: -0.4, is: "path('M 16 42')"}, |
| {at: 0, is: "path('M 20 50')"}, |
| {at: 0.2, is: "path('M 22 54')"}, |
| {at: 0.6, is: "path('M 26 62')"}, |
| {at: 1, is: "path('M 30 70')"}, |
| {at: 1.4, is: "path('M 34 78')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 20 50')", |
| to: "path('m 30 70')" |
| }, [ |
| {at: -0.4, is: "path('M 16 42')"}, |
| {at: 0, is: "path('M 20 50')"}, |
| {at: 0.2, is: "path('M 22 54')"}, |
| {at: 0.6, is: "path('M 26 62')"}, |
| {at: 1, is: "path('M 30 70')"}, |
| {at: 1.4, is: "path('M 34 78')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 L 20 50')", |
| to: "path('m 0 0 L 30 70')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 L 16 42')"}, |
| {at: 0, is: "path('M 0 0 L 20 50')"}, |
| {at: 0.2, is: "path('M 0 0 L 22 54')"}, |
| {at: 0.6, is: "path('M 0 0 L 26 62')"}, |
| {at: 1, is: "path('M 0 0 L 30 70')"}, |
| {at: 1.4, is: "path('M 0 0 L 34 78')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 l 20 50')", |
| to: "path('m 0 0 l 30 70')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 L 16 42')"}, |
| {at: 0, is: "path('M 0 0 L 20 50')"}, |
| {at: 0.2, is: "path('M 0 0 L 22 54')"}, |
| {at: 0.6, is: "path('M 0 0 L 26 62')"}, |
| {at: 1, is: "path('M 0 0 L 30 70')"}, |
| {at: 1.4, is: "path('M 0 0 L 34 78')"} |
| ]); |
| </script> |
| </body> |
