svg-r-interpolation.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  font: 10px Ahem;
}
</style>
</head>
<body>
<template id="target-template">
<svg width="7px" height="17px" viewBox="0 0 140 340">
<circle class="target" cx="70" cy="70" />
</svg>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
'use strict';
assertAttributeInterpolation({
  property: 'r',
  from: '10ch',
  to: '60ch'
}, [
  {at: -0.4, is: '0ch'},
  {at: 0, is: '10ch'},
  {at: 0.2, is: '20ch'},
  {at: 0.6, is: '40ch'},
  {at: 1, is: '60ch'},
  {at: 1.4, is: '80ch'}
]);
assertAttributeInterpolation({
  property: 'r',
  from: '10mm',
  to: '6cm'
}, [
  {at: -0.4, is: '0mm'},
  {at: 0, is: '10mm'},
  {at: 0.2, is: '20mm'},
  {at: 0.6, is: '40mm'},
  {at: 1, is: '60mm'},
  {at: 1.4, is: '80mm'}
]);
assertAttributeInterpolation({
  property: 'r',
  from: '50%', // http://www.w3.org/TR/SVG11/coords.html#Units 50% * sqrt(140**2+340**2)/sqrt(2) == 130
  to: '14em' // 14*10 == 140
}, [
  {at: -0.4, is: 126},
  {at: 0, is: 130},
  {at: 0.2, is: 132},
  {at: 0.6, is: 136},
  {at: 1, is: 140},
  {at: 1.4, is: 144}
]);
assertAttributeInterpolation({
  property: 'r',
  from: '10pc',
  to: '20ch'
}, [
  {at: -0.4, is: '144'},
  {at: 0, is: '10pc'},
  {at: 0.2, is: '168'},
  {at: 0.6, is: '184'},
  {at: 1, is: '20ch'},
  {at: 1.4, is: '216'}
]);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/svg-attribute-interpolation/svg-r-interpolation.html
