Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/path/property/d-interpolation-single.svg - WPT Dashboard Interop Dashboard
SVG Preview (Scaled)
<?xml version="1.0" encoding="UTF-8"?>
<metadata>
<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>