svg-r-composition.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="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
<script>
'use strict';
assertAttributeInterpolation({
  property: 'r',
  underlying: '5ch',
  from: '5ch',
  fromComposite: 'add',
  to: '55ch',
  toComposite: 'add'
}, [
  {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',
  underlying: '5mm',
  from: '5mm',
  fromComposite: 'add',
  to: '5.5cm',
  toComposite: 'add'
}, [
  {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',
  underlying: '20',
  from: '10pc',
  fromComposite: 'add',
  to: '20ch',
  toComposite: 'add'
}, [
  {at: -0.4, is: '164'},
  {at: 0, is: '180'},
  {at: 0.2, is: '188'},
  {at: 0.6, is: '204'},
  {at: 1, is: '220'},
  {at: 1.4, is: '236'}
]);

assertAttributeInterpolation({
  property: 'r',
  underlying: '20ch',
  from: '10ch',
  fromComposite: 'replace',
  to: '40ch',
  toComposite: 'add'
}, [
  {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',
  underlying: '2cm',
  from: '10mm',
  fromComposite: 'replace',
  to: '4cm',
  toComposite: 'add'
}, [
  {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',
  underlying: '10ch',
  from: '10pc',
  fromComposite: 'replace',
  to: '10ch',
  toComposite: 'add'
}, [
  {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'}
]);

assertAttributeInterpolation({
  property: 'r',
  underlying: '10ch',
  from: neutralKeyframe,
  to: '60ch',
  toComposite: 'replace'
}, [
  {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',
  underlying: '10mm',
  from: neutralKeyframe,
  to: '6cm',
  toComposite: 'replace'
}, [
  {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',
  underlying: '10pc',
  from: neutralKeyframe,
  to: '20ch',
  toComposite: 'replace'
}, [
  {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-composition/svg-r-composition.html
