| <!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 1')", |
| to: "path('m 20 0 v 2')" |
| }); |
| |
| assertNoInterpolation({ |
| property: 'd', |
| from: "path('m 1 2 l 3 4 Z')", |
| to: "path('m 1 2 l 3 4')" |
| }); |
| |
| // 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')"} |
| ]); |
| |
| 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')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 H 10')", |
| to: "path('m 0 0 H 60')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 H -10')"}, |
| {at: 0, is: "path('m 0 0 H 10')"}, |
| {at: 0.2, is: "path('m 0 0 H 20')"}, |
| {at: 0.6, is: "path('m 0 0 H 40')"}, |
| {at: 1, is: "path('m 0 0 H 60')"}, |
| {at: 1.4, is: "path('m 0 0 H 80')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 h 10')", |
| to: "path('m 0 0 h 60')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 h -10')"}, |
| {at: 0, is: "path('m 0 0 h 10')"}, |
| {at: 0.2, is: "path('m 0 0 h 20')"}, |
| {at: 0.6, is: "path('m 0 0 h 40')"}, |
| {at: 1, is: "path('m 0 0 h 60')"}, |
| {at: 1.4, is: "path('m 0 0 h 80')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 V 10')", |
| to: "path('m 0 0 V 60')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 V -10')"}, |
| {at: 0, is: "path('m 0 0 V 10')"}, |
| {at: 0.2, is: "path('m 0 0 V 20')"}, |
| {at: 0.6, is: "path('m 0 0 V 40')"}, |
| {at: 1, is: "path('m 0 0 V 60')"}, |
| {at: 1.4, is: "path('m 0 0 V 80')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 v 10')", |
| to: "path('m 0 0 v 60')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 v -10')"}, |
| {at: 0, is: "path('m 0 0 v 10')"}, |
| {at: 0.2, is: "path('m 0 0 v 20')"}, |
| {at: 0.6, is: "path('m 0 0 v 40')"}, |
| {at: 1, is: "path('m 0 0 v 60')"}, |
| {at: 1.4, is: "path('m 0 0 v 80')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 S 32 42 52 62')", |
| to: "path('m 0 0 S 37 47 57 67')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 S 30 40 50 60')"}, |
| {at: 0, is: "path('m 0 0 S 32 42 52 62')"}, |
| {at: 0.2, is: "path('m 0 0 S 33 43 53 63')"}, |
| {at: 0.6, is: "path('m 0 0 S 35 45 55 65')"}, |
| {at: 1, is: "path('m 0 0 S 37 47 57 67')"}, |
| {at: 1.4, is: "path('m 0 0 S 39 49 59 69')"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 s 32 42 52 62')", |
| to: "path('m 0 0 s 37 47 57 67')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 s 30 40 50 60')"}, |
| {at: 0, is: "path('m 0 0 s 32 42 52 62')"}, |
| {at: 0.2, is: "path('m 0 0 s 33 43 53 63')"}, |
| {at: 0.6, is: "path('m 0 0 s 35 45 55 65')"}, |
| {at: 1, is: "path('m 0 0 s 37 47 57 67')"}, |
| {at: 1.4, is: "path('m 0 0 s 39 49 59 69')"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 T 20 50')", |
| to: "path('m 0 0 T 30 70')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 T 16 42')"}, |
| {at: 0, is: "path('m 0 0 T 20 50')"}, |
| {at: 0.2, is: "path('m 0 0 T 22 54')"}, |
| {at: 0.6, is: "path('m 0 0 T 26 62')"}, |
| {at: 1, is: "path('m 0 0 T 30 70')"}, |
| {at: 1.4, is: "path('m 0 0 T 34 78')"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 0 0 t 20 50')", |
| to: "path('m 0 0 t 30 70')" |
| }, [ |
| {at: -0.4, is: "path('m 0 0 t 16 42')"}, |
| {at: 0, is: "path('m 0 0 t 20 50')"}, |
| {at: 0.2, is: "path('m 0 0 t 22 54')"}, |
| {at: 0.6, is: "path('m 0 0 t 26 62')"}, |
| {at: 1, is: "path('m 0 0 t 30 70')"}, |
| {at: 1.4, is: "path('m 0 0 t 34 78')"}, |
| ]); |
| |
| // Mix relative and non-relative |
| assertInterpolation({ |
| property: 'd', |
| from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')", |
| to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 60 -180 Z')"}, |
| {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, |
| {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 120 -60 Z')"}, |
| {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')"}, |
| {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 200 100 Z')"}, |
| {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 240 180 Z')"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')", |
| to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')" |
| }, [ |
| {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, |
| {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"}, |
| {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, |
| {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, |
| {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, |
| {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120')", |
| to: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')" |
| }, [ |
| {at: -0.4, is: "path('M -30 -20 L -10 10 Z L 52 68 Z M 72 84 L 162 144 Z T 126 220')"}, |
| {at: 0, is: "path('m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120')"}, |
| {at: 0.2, is: "path('M 30 40 L 50 70 Z L 64 86 Z M 84 108 L 174 168 Z T 162 220')"}, |
| {at: 0.6, is: "path('M 70 80 L 90 110 Z L 72 98 Z M 92 124 L 182 184 Z T 186 220')"}, |
| {at: 1, is: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')"}, |
| {at: 1.4, is: "path('M 150 160 L 170 190 Z L 88 122 Z M 108 156 L 198 216 Z T 234 220')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')", |
| to: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')" |
| }, [ |
| {at: -0.4, is: "path('M -30 -20 C 14 38 4 48 54 58 C 136 146 186 156 166 176')"}, |
| {at: 0, is: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')"}, |
| {at: 0.2, is: "path('M 30 40 C 68 86 58 96 108 106 C 202 212 252 222 232 242')"}, |
| {at: 0.6, is: "path('M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 286')"}, |
| {at: 1, is: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')"}, |
| {at: 1.4, is: "path('M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')", |
| to: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')" |
| }, [ |
| {at: -0.4, is: "path('M -30 -20 Q 4 48 14 38 Q 130 128 120 138')"}, |
| {at: 0, is: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')"}, |
| {at: 0.2, is: "path('M 30 40 Q 58 96 68 86 Q 160 146 150 156')"}, |
| {at: 0.6, is: "path('M 70 80 Q 94 128 104 118 Q 180 158 170 168')"}, |
| {at: 1, is: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"}, |
| {at: 1.4, is: "path('M 150 160 Q 166 192 176 182 Q 220 182 210 192')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')", |
| to: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')" |
| }, [ |
| {at: -0.4, is: "path('M -30 -20 S 4 48 14 38 S 130 128 120 138')"}, |
| {at: 0, is: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')"}, |
| {at: 0.2, is: "path('M 30 40 S 58 96 68 86 S 160 146 150 156')"}, |
| {at: 0.6, is: "path('M 70 80 S 94 128 104 118 S 180 158 170 168')"}, |
| {at: 1, is: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"}, |
| {at: 1.4, is: "path('M 150 160 S 166 192 176 182 S 220 182 210 192')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')", |
| to: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')" |
| }, [ |
| {at: -0.4, is: "path('M -30 -20 H 4 V 28 H 26 V 64 L 116 168')"}, |
| {at: 0, is: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')"}, |
| {at: 0.2, is: "path('M 30 40 H 58 V 76 H 122 V 148 L 182 216')"}, |
| {at: 0.6, is: "path('M 70 80 H 94 V 108 H 186 V 204 L 226 248')"}, |
| {at: 1, is: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"}, |
| {at: 1.4, is: "path('M 150 160 H 166 V 172 H 314 V 316 L 314 312')"} |
| ]); |
| |
| assertInterpolation({ |
| property: 'd', |
| from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')", |
| to: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')" |
| }, [ |
| {at: -0.4, is: "path('M 6 16 A -10 0 10 1 0 34 58 A 90 100 10 1 1 230 128')"}, |
| {at: 0, is: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')"}, |
| {at: 0.2, is: "path('M 12 22 A 20 30 40 1 0 58 76 A 120 130 40 1 1 170 116')"}, |
| {at: 0.6, is: "path('M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108')"}, |
| {at: 1, is: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"}, |
| {at: 1.4, is: "path('M 24 34 A 80 90 100 0 1 106 112 A 180 190 100 0 1 50 92')"} |
| ]); |
| |
| </script> |
| </body> |
| </html> |