svg-viewBox-composition.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
<template id="target-template">
<svg width="0" height="0">
  <defs>
    <marker class="target" />
  </defs>
</svg>
</template>
<script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
<script>
'use strict';
assertAttributeInterpolation({
  property: 'viewBox',
  underlying: '10, 10, 10, 10',
  from: '10, 20, 80, 90',
  fromComposite: 'add',
  to: '20, 30, 70, 80',
  toComposite: 'add',
}, [
  {at: -0.4, is: '16, 26, 94, 104'},
  {at: 0, is: '20, 30, 90, 100'},
  {at: 0.2, is: '22, 32, 88, 98'},
  {at: 0.6, is: '26, 36, 84, 94'},
  {at: 1, is: '30, 40, 80, 90'},
  {at: 1.4, is: '34, 44, 76, 86'},
]);

assertAttributeInterpolation({
  property: 'viewBox',
  underlying: '10, 10, 10, 10',
  from: '10, 20, 80, 90',
  fromComposite: 'add',
  to: '20, 30, 70, 80',
  toComposite: 'replace',
}, [
  {at: -0.4, is: '20, 30, 98, 108'},
  {at: 0, is: '20, 30, 90, 100'},
  {at: 0.2, is: '20, 30, 86, 96'},
  {at: 0.6, is: '20, 30, 78, 88'},
  {at: 1, is: '20, 30, 70, 80'},
  {at: 1.4, is: '20, 30, 62, 72'},
]);

assertAttributeInterpolation({
  property: 'viewBox',
  underlying: '10, 10, 10, 10',
  from: '10, 20, 80, 90',
  fromComposite: 'replace',
  to: '20, 30, 70, 80',
  toComposite: 'add',
}, [
  {at: -0.4, is: '2, 12, 80, 90'},
  {at: 0, is: '10, 20, 80, 90'},
  {at: 0.2, is: '14, 24, 80, 90'},
  {at: 0.6, is: '22, 32, 80, 90'},
  {at: 1, is: '30, 40, 80, 90'},
  {at: 1.4, is: '38, 48, 80, 90'},
]);

assertAttributeInterpolation({
  property: 'viewBox',
  underlying: '10, 20, 80, 90',
  from: neutralKeyframe,
  to: '20, 30, 70, 80',
  toComposite: 'replace',
}, [
  {at: -0.4, is: '6, 16, 84, 94'},
  {at: 0, is: '10, 20, 80, 90'},
  {at: 0.2, is: '12, 22, 78, 88'},
  {at: 0.6, is: '16, 26, 74, 84'},
  {at: 1, is: '20, 30, 70, 80'},
  {at: 1.4, is: '24, 34, 66, 76'},
]);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/svg-attribute-composition/svg-viewBox-composition.html
