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

// 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 11')",
  to: "path('M 20 0 V 2')"
});

assertNoInterpolation({
  property: 'd',
  from: "path('M 1 2 L 4 6 Z')",
  to: "path('M 1 2 L 4 6')"
});

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