| <?xml version="1.0" encoding="UTF-8"?> |
| <svg xmlns="http://www.w3.org/2000/svg" |
| xmlns:h="http://www.w3.org/1999/xhtml"> |
| <metadata> |
| <h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#TheDProperty"/> |
| <h:meta name="assert" content="Each path command interpolates."/> |
| </metadata> |
| |
| <g id="container"/> |
| |
| <h:script src="/resources/testharness.js"/> |
| <h:script src="/resources/testharnessreport.js"/> |
| <h:script src="resources/interpolation-test-common.js"/> |
| <script><![CDATA[ |
| 'use strict'; |
| |
| // Exercise each segment type |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 20 70")', |
| to: 'path("M 100 30")' |
| }, [ |
| {at: -1, expect: 'path("M -60 110")'}, |
| {at: 0, expect: 'path("M 20 70")'}, |
| {at: 0.125, expect: 'path("M 30 65")'}, |
| {at: 0.875, expect: 'path("M 90 35")'}, |
| {at: 1, expect: 'path("M 100 30")'}, |
| {at: 2, expect: 'path("M 180 -10")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 20 70")', |
| to: 'path("m 100 30")' |
| }, [ |
| {at: -1, expect: 'path("M -60 110")'}, |
| {at: 0, expect: 'path("M 20 70")'}, |
| {at: 0.125, expect: 'path("M 30 65")'}, |
| {at: 0.875, expect: 'path("M 90 35")'}, |
| {at: 1, expect: 'path("M 100 30")'}, |
| {at: 2, expect: 'path("M 180 -10")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 100 200 L 120 270")', |
| to: 'path("m 100 200 L 200 230")' |
| }, [ |
| {at: -1, expect: 'path("M 100 200 L 40 310")'}, |
| {at: 0, expect: 'path("M 100 200 L 120 270")'}, |
| {at: 0.125, expect: 'path("M 100 200 L 130 265")'}, |
| {at: 0.875, expect: 'path("M 100 200 L 190 235")'}, |
| {at: 1, expect: 'path("M 100 200 L 200 230")'}, |
| {at: 2, expect: 'path("M 100 200 L 280 190")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 100 200 l 20 70")', |
| to: 'path("m 100 200 l 100 30")' |
| }, [ |
| {at: -1, expect: 'path("M 100 200 L 40 310")'}, |
| {at: 0, expect: 'path("M 100 200 L 120 270")'}, |
| {at: 0.125, expect: 'path("M 100 200 L 130 265")'}, |
| {at: 0.875, expect: 'path("M 100 200 L 190 235")'}, |
| {at: 1, expect: 'path("M 100 200 L 200 230")'}, |
| {at: 2, expect: 'path("M 100 200 L 280 190")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 20 10 C 32 42 52 62 120 2200")', |
| to: 'path("M 20 10 C 40 50 60 70 200 3000")', |
| }, [ |
| {at: -1, expect: 'path("M 20 10 C 24 34 44 54 40 1400")'}, |
| {at: 0, expect: 'path("M 20 10 C 32 42 52 62 120 2200")'}, |
| {at: 0.125, expect: 'path("M 20 10 C 33 43 53 63 130 2300")'}, |
| {at: 0.875, expect: 'path("M 20 10 C 39 49 59 69 190 2900")'}, |
| {at: 1, expect: 'path("M 20 10 C 40 50 60 70 200 3000")'}, |
| {at: 2, expect: 'path("M 20 10 C 48 58 68 78 280 3800")'} |
| ]); |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 20 10 c 12 32 32 52 100 2190")', |
| to: 'path("m 20 10 c 20 40 40 60 180 2990")' |
| }, [ |
| {at: -1, expect: 'path("M 20 10 C 24 34 44 54 40 1400")'}, |
| {at: 0, expect: 'path("M 20 10 C 32 42 52 62 120 2200")'}, |
| {at: 0.125, expect: 'path("M 20 10 C 33 43 53 63 130 2300")'}, |
| {at: 0.875, expect: 'path("M 20 10 C 39 49 59 69 190 2900")'}, |
| {at: 1, expect: 'path("M 20 10 C 40 50 60 70 200 3000")'}, |
| {at: 2, expect: 'path("M 20 10 C 48 58 68 78 280 3800")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 20 10 Q 32 42 120 2200")', |
| to: 'path("M 20 10 Q 40 50 200 3000")' |
| }, [ |
| {at: -1, expect: 'path("M 20 10 Q 24 34 40 1400")'}, |
| {at: 0, expect: 'path("M 20 10 Q 32 42 120 2200")'}, |
| {at: 0.125, expect: 'path("M 20 10 Q 33 43 130 2300")'}, |
| {at: 0.875, expect: 'path("M 20 10 Q 39 49 190 2900")'}, |
| {at: 1, expect: 'path("M 20 10 Q 40 50 200 3000")'}, |
| {at: 2, expect: 'path("M 20 10 Q 48 58 280 3800")'} |
| ]); |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 20 10 q 12 32 100 2190")', |
| to: 'path("m 20 10 q 20 40 180 2990")' |
| }, [ |
| {at: -1, expect: 'path("M 20 10 Q 24 34 40 1400")'}, |
| {at: 0, expect: 'path("M 20 10 Q 32 42 120 2200")'}, |
| {at: 0.125, expect: 'path("M 20 10 Q 33 43 130 2300")'}, |
| {at: 0.875, expect: 'path("M 20 10 Q 39 49 190 2900")'}, |
| {at: 1, expect: 'path("M 20 10 Q 40 50 200 3000")'}, |
| {at: 2, expect: 'path("M 20 10 Q 48 58 280 3800")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 100 400 A 10 20 30 1 0 140 450")', |
| to: 'path("M 300 200 A 50 60 70 0 1 380 290")' |
| }, [ |
| {at: -1, expect: 'path("M -100 600 A -30 -20 -10 1 0 -100 610")'}, |
| {at: 0, expect: 'path("M 100 400 A 10 20 30 1 0 140 450")'}, |
| {at: 0.125, expect: 'path("M 125 375 A 15 25 35 1 0 170 430")'}, |
| {at: 0.875, expect: 'path("M 275 225 A 45 55 65 0 1 350 310")'}, |
| {at: 1, expect: 'path("M 300 200 A 50 60 70 0 1 380 290")'}, |
| {at: 2, expect: 'path("M 500 0 A 90 100 110 0 1 620 130")'} |
| ]); |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 100 400 a 10 20 30 1 0 40 50")', |
| to: 'path("m 300 200 a 50 60 70 0 1 80 90")' |
| }, [ |
| {at: -1, expect: 'path("M -100 600 A -30 -20 -10 1 0 -100 610")'}, |
| {at: 0, expect: 'path("M 100 400 A 10 20 30 1 0 140 450")'}, |
| {at: 0.125, expect: 'path("M 125 375 A 15 25 35 1 0 170 430")'}, |
| {at: 0.875, expect: 'path("M 275 225 A 45 55 65 0 1 350 310")'}, |
| {at: 1, expect: 'path("M 300 200 A 50 60 70 0 1 380 290")'}, |
| {at: 2, expect: 'path("M 500 0 A 90 100 110 0 1 620 130")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 50 60 H 70")', |
| to: 'path("M 10 140 H 270")' |
| }, [ |
| {at: -1, expect: 'path("M 90 -20 H -130")'}, |
| {at: 0, expect: 'path("M 50 60 H 70")'}, |
| {at: 0.125, expect: 'path("M 45 70 H 95")'}, |
| {at: 0.875, expect: 'path("M 15 130 H 245")'}, |
| {at: 1, expect: 'path("M 10 140 H 270")'}, |
| {at: 2, expect: 'path("M -30 220 H 470")'} |
| ]); |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 50 60 h 20")', |
| to: 'path("m 10 140 h 260")' |
| }, [ |
| {at: -1, expect: 'path("M 90 -20 H -130")'}, |
| {at: 0, expect: 'path("M 50 60 H 70")'}, |
| {at: 0.125, expect: 'path("M 45 70 H 95")'}, |
| {at: 0.875, expect: 'path("M 15 130 H 245")'}, |
| {at: 1, expect: 'path("M 10 140 H 270")'}, |
| {at: 2, expect: 'path("M -30 220 H 470")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 50 60 V 70")', |
| to: 'path("M 10 140 V 270")' |
| }, [ |
| {at: -1, expect: 'path("M 90 -20 V -130")'}, |
| {at: 0, expect: 'path("M 50 60 V 70")'}, |
| {at: 0.125, expect: 'path("M 45 70 V 95")'}, |
| {at: 0.875, expect: 'path("M 15 130 V 245")'}, |
| {at: 1, expect: 'path("M 10 140 V 270")'}, |
| {at: 2, expect: 'path("M -30 220 V 470")'} |
| ]); |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 50 60 v 10")', |
| to: 'path("m 10 140 v 130")' |
| }, [ |
| {at: -1, expect: 'path("M 90 -20 V -130")'}, |
| {at: 0, expect: 'path("M 50 60 V 70")'}, |
| {at: 0.125, expect: 'path("M 45 70 V 95")'}, |
| {at: 0.875, expect: 'path("M 15 130 V 245")'}, |
| {at: 1, expect: 'path("M 10 140 V 270")'}, |
| {at: 2, expect: 'path("M -30 220 V 470")'} |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 12 34 S 45 67 89 123")', |
| to: 'path("M 20 26 S 61 51 113 99")' |
| }, [ |
| {at: -1, expect: 'path("M 4 42 S 29 83 65 147")'}, |
| {at: 0, expect: 'path("M 12 34 S 45 67 89 123")'}, |
| {at: 0.125, expect: 'path("M 13 33 S 47 65 92 120")'}, |
| {at: 0.875, expect: 'path("M 19 27 S 59 53 110 102")'}, |
| {at: 1, expect: 'path("M 20 26 S 61 51 113 99")'}, |
| {at: 2, expect: 'path("M 28 18 S 77 35 137 75")'}, |
| ]); |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 12 34 s 33 33 77 89")', |
| to: 'path("m 20 26 s 41 25 93 73")' |
| }, [ |
| {at: -1, expect: 'path("M 4 42 S 29 83 65 147")'}, |
| {at: 0, expect: 'path("M 12 34 S 45 67 89 123")'}, |
| {at: 0.125, expect: 'path("M 13 33 S 47 65 92 120")'}, |
| {at: 0.875, expect: 'path("M 19 27 S 59 53 110 102")'}, |
| {at: 1, expect: 'path("M 20 26 S 61 51 113 99")'}, |
| {at: 2, expect: 'path("M 28 18 S 77 35 137 75")'}, |
| ]); |
| |
| test_interpolation({ |
| property: 'd', |
| from: 'path("M 12 34 T 45 67")', |
| to: 'path("M 20 26 T 61 51")' |
| }, [ |
| {at: -1, expect: 'path("M 4 42 T 29 83")'}, |
| {at: 0, expect: 'path("M 12 34 T 45 67")'}, |
| {at: 0.125, expect: 'path("M 13 33 T 47 65")'}, |
| {at: 0.875, expect: 'path("M 19 27 T 59 53")'}, |
| {at: 1, expect: 'path("M 20 26 T 61 51")'}, |
| {at: 2, expect: 'path("M 28 18 T 77 35")'}, |
| ]); |
| test_interpolation({ |
| property: 'd', |
| from: 'path("m 12 34 t 33 33")', |
| to: 'path("m 20 26 t 41 25")' |
| }, [ |
| {at: -1, expect: 'path("M 4 42 T 29 83")'}, |
| {at: 0, expect: 'path("M 12 34 T 45 67")'}, |
| {at: 0.125, expect: 'path("M 13 33 T 47 65")'}, |
| {at: 0.875, expect: 'path("M 19 27 T 59 53")'}, |
| {at: 1, expect: 'path("M 20 26 T 61 51")'}, |
| {at: 2, expect: 'path("M 28 18 T 77 35")'}, |
| ]); |
| ]]></script> |
| </svg> |