svg-d-interpolation-002.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';

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')"}
]);
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/svg-d-interpolation-002.html
