svg-rotate-composition.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
<template id="target-template">
<svg width="90" height="90">
  <text>
    <tspan class="target">abcd</tspan>
  </text>
</svg>
</template>
<script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
<script>
'use strict';
assertAttributeInterpolation({
  property: 'rotate',
  underlying: '10, 20',
  from: '30, 40',
  fromComposite: 'add',
  to: '50, -10',
  toComposite: 'add',
}, [
  {at: -0.4, is: '32, 80'},
  {at: 0, is: '40, 60'},
  {at: 0.2, is: '44, 50'},
  {at: 0.6, is: '52, 30'},
  {at: 1, is: '60, 10'},
  {at: 1.4, is: '68, -10'},
]);

assertAttributeInterpolation({
  property: 'rotate',
  underlying: '10, 20',
  from: '30',
  fromComposite: 'add',
  to: '50',
  toComposite: 'add',
}, [
  {at: -0.4, is: '32, 20'},
  {at: 0, is: '40, 20'},
  {at: 0.2, is: '44, 20'},
  {at: 0.6, is: '52, 20'},
  {at: 1, is: '60, 20'},
  {at: 1.4, is: '68, 20'},
]);

assertAttributeInterpolation({
  property: 'rotate',
  underlying: '10',
  from: '20, 30, 40',
  fromComposite: 'add',
  to: '50, 40, 30',
  toComposite: 'add',
}, [
  {at: -0.4, is: '18, 26, 44'},
  {at: 0, is: '30, 30, 40'},
  {at: 0.2, is: '36, 32, 38'},
  {at: 0.6, is: '48, 36, 34'},
  {at: 1, is: '60, 40, 30'},
  {at: 1.4, is: '72, 44, 26'},
]);

assertAttributeInterpolation({
  property: 'rotate',
  underlying: '10',
  from: '30, 40',
  fromComposite: 'add',
  to: '50, 60, 70',
  toComposite: 'replace',
}, [
  {at: -0.4, is: '40, 40'},
  {at: 0, is: '40, 40'},
  {at: 0.2, is: '40, 40'},
  {at: 0.6, is: '50, 60, 70'},
  {at: 1, is: '50, 60, 70'},
  {at: 1.4, is: '50, 60, 70'},
]);

assertAttributeInterpolation({
  property: 'rotate',
  underlying: '10',
  from: neutralKeyframe,
  to: '50, -10',
  toComposite: 'replace',
}, [
  {at: -0.4, is: '10'},
  {at: 0, is: '10'},
  {at: 0.2, is: '10'},
  {at: 0.6, is: '50, -10'},
  {at: 1, is: '50, -10'},
  {at: 1.4, is: '50, -10'},
]);

assertAttributeInterpolation({
  property: 'rotate',
  underlying: '10, 20',
  from: neutralKeyframe,
  to: '50, -10',
  toComposite: 'add',
}, [
  {at: -0.4, is: '-10, 24'},
  {at: 0, is: '10, 20'},
  {at: 0.2, is: '20, 18'},
  {at: 0.6, is: '40, 14'},
  {at: 1, is: '60, 10'},
  {at: 1.4, is: '80, 6'},
]);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/svg-attribute-composition/svg-rotate-composition.html
