svg-d-interpolation-003.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 H 10')",
  to: "path('m 0 0 H 60')"
}, [
  {at: -0.4, is: "path('M 0 0 H -10')"},
  {at: 0, is: "path('M 0 0 H 10')"},
  {at: 0.2, is: "path('M 0 0 H 20')"},
  {at: 0.6, is: "path('M 0 0 H 40')"},
  {at: 1, is: "path('M 0 0 H 60')"},
  {at: 1.4, is: "path('M 0 0 H 80')"}
]);

assertInterpolation({
  property: 'd',
  from: "path('m 0 0 h 10')",
  to: "path('m 0 0 h 60')"
}, [
  {at: -0.4, is: "path('M 0 0 H -10')"},
  {at: 0, is: "path('M 0 0 H 10')"},
  {at: 0.2, is: "path('M 0 0 H 20')"},
  {at: 0.6, is: "path('M 0 0 H 40')"},
  {at: 1, is: "path('M 0 0 H 60')"},
  {at: 1.4, is: "path('M 0 0 H 80')"}
]);

assertInterpolation({
  property: 'd',
  from: "path('m 0 0 V 10')",
  to: "path('m 0 0 V 60')"
}, [
  {at: -0.4, is: "path('M 0 0 V -10')"},
  {at: 0, is: "path('M 0 0 V 10')"},
  {at: 0.2, is: "path('M 0 0 V 20')"},
  {at: 0.6, is: "path('M 0 0 V 40')"},
  {at: 1, is: "path('M 0 0 V 60')"},
  {at: 1.4, is: "path('M 0 0 V 80')"}
]);

assertInterpolation({
  property: 'd',
  from: "path('m 0 0 v 10')",
  to: "path('m 0 0 v 60')"
}, [
  {at: -0.4, is: "path('M 0 0 V -10')"},
  {at: 0, is: "path('M 0 0 V 10')"},
  {at: 0.2, is: "path('M 0 0 V 20')"},
  {at: 0.6, is: "path('M 0 0 V 40')"},
  {at: 1, is: "path('M 0 0 V 60')"},
  {at: 1.4, is: "path('M 0 0 V 80')"}
]);

assertInterpolation({
  property: 'd',
  from: "path('m 0 0 S 32 42 52 62')",
  to: "path('m 0 0 S 37 47 57 67')"
}, [
  {at: -0.4, is: "path('M 0 0 S 30 40 50 60')"},
  {at: 0, is: "path('M 0 0 S 32 42 52 62')"},
  {at: 0.2, is: "path('M 0 0 S 33 43 53 63')"},
  {at: 0.6, is: "path('M 0 0 S 35 45 55 65')"},
  {at: 1, is: "path('M 0 0 S 37 47 57 67')"},
  {at: 1.4, is: "path('M 0 0 S 39 49 59 69')"},
]);

assertInterpolation({
  property: 'd',
  from: "path('m 0 0 s 32 42 52 62')",
  to: "path('m 0 0 s 37 47 57 67')"
}, [
  {at: -0.4, is: "path('M 0 0 S 30 40 50 60')"},
  {at: 0, is: "path('M 0 0 S 32 42 52 62')"},
  {at: 0.2, is: "path('M 0 0 S 33 43 53 63')"},
  {at: 0.6, is: "path('M 0 0 S 35 45 55 65')"},
  {at: 1, is: "path('M 0 0 S 37 47 57 67')"},
  {at: 1.4, is: "path('M 0 0 S 39 49 59 69')"},
]);

assertInterpolation({
  property: 'd',
  from: "path('m 0 0 T 20 50')",
  to: "path('m 0 0 T 30 70')"
}, [
  {at: -0.4, is: "path('M 0 0 T 16 42')"},
  {at: 0, is: "path('M 0 0 T 20 50')"},
  {at: 0.2, is: "path('M 0 0 T 22 54')"},
  {at: 0.6, is: "path('M 0 0 T 26 62')"},
  {at: 1, is: "path('M 0 0 T 30 70')"},
  {at: 1.4, is: "path('M 0 0 T 34 78')"},
]);

assertInterpolation({
  property: 'd',
  from: "path('m 0 0 t 20 50')",
  to: "path('m 0 0 t 30 70')"
}, [
  {at: -0.4, is: "path('M 0 0 T 16 42')"},
  {at: 0, is: "path('M 0 0 T 20 50')"},
  {at: 0.2, is: "path('M 0 0 T 22 54')"},
  {at: 0.6, is: "path('M 0 0 T 26 62')"},
  {at: 1, is: "path('M 0 0 T 30 70')"},
  {at: 1.4, is: "path('M 0 0 T 34 78')"},
]);
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/svg-d-interpolation-003.html
