svg-d-interpolation-004.html | Explore in Territory

<!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';

// 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 100 200 L 200 200 Z L 160 20 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 100 200 L 200 200 Z L 220 140 Z')"},
  {at: 0.6, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z')"},
  {at: 1, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z')"},
  {at: 1.4, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 340 380 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 100 200 L 200 200 Z L 200 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 100 200 L 200 200 Z L 200 100 Z')"},
  {at: 0.6, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
  {at: 1, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
  {at: 1.4, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 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 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220')"},
  {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 50 70 40 80 90 90 C 180 190 230 200 210 220')"},
  {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 40 80 50 70 Q 150 140 140 150')"},
  {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 40 80 50 70 S 150 140 140 150')"},
  {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 40 V 60 H 90 V 120 L 160 200')"},
  {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 50 70 A 110 120 30 1 1 190 120')"},
  {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>
chromium/third_party/blink/web_tests/animations/interpolation/svg-d-interpolation-004.html
