svg-points-composition.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
<template id="target-template">
<svg width="0" height="0">
<polygon class="target" />
</svg>
</template>
<script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
<script>
'use strict';
assertAttributeInterpolation({
  property: 'points',
  underlying: '10 10, 20 20',
  from: '40 40, 30 30',
  fromComposite: 'add',
  to: '90 90, -10 -10',
  toComposite: 'add',
}, [
  {at: -0.4, is: '30 30, 66 66'},
  {at: 0, is: '50 50, 50 50'},
  {at: 0.2, is: '60 60, 42 42'},
  {at: 0.6, is: '80 80, 26 26'},
  {at: 1, is: '100 100, 10 10'},
  {at: 1.4, is: '120 120, -6 -6'},
]);

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

assertAttributeInterpolation({
  property: 'points',
  underlying: '10 10, 20 20, 50 50',
  from: '40 40',
  fromComposite: 'add',
  to: '90 90, -10 -10',
  toComposite: 'add',
}, [
  {at: -0.4, is: '40 40'},
  {at: 0, is: '40 40'},
  {at: 0.2, is: '40 40'},
  {at: 0.6, is: '90 90, -10 -10'},
  {at: 1, is: '90 90, -10 -10'},
  {at: 1.4, is: '90 90, -10 -10'},
]);

assertAttributeInterpolation({
  property: 'points',
  underlying: '10 10, 20 20',
  from: '40 40, 30 30',
  fromComposite: 'add',
  to: '90 90, -10 -10',
  toComposite: 'replace',
}, [
  {at: -0.4, is: '34 34, 74 74'},
  {at: 0, is: '50 50, 50 50'},
  {at: 0.2, is: '58 58, 38 38'},
  {at: 0.6, is: '74 74, 14 14'},
  {at: 1, is: '90 90, -10 -10'},
  {at: 1.4, is: '106 106, -34 -34'},
]);

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

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

assertAttributeInterpolation({
  property: 'points',
  underlying: '10 10, 20 20',
  from: neutralKeyframe,
  to: '90 90, -10 -10',
  toComposite: 'replace',
}, [
  {at: -0.4, is: '-22 -22, 32 32'},
  {at: 0, is: '10 10, 20 20'},
  {at: 0.2, is: '26 26, 14 14'},
  {at: 0.6, is: '58 58, 2 2'},
  {at: 1, is: '90 90, -10 -10'},
  {at: 1.4, is: '122 122, -22 -22'},
]);

assertAttributeInterpolation({
  property: 'points',
  underlying: '10 10, 20 20',
  from: neutralKeyframe,
  to: '90 90, -10 -10, 50 50',
  toComposite: 'replace',
}, [
  {at: -0.4, is: '10 10, 20 20'},
  {at: 0, is: '10 10, 20 20'},
  {at: 0.2, is: '10 10, 20 20'},
  {at: 0.6, is: '90 90, -10 -10, 50 50'},
  {at: 1, is: '90 90, -10 -10, 50 50'},
  {at: 1.4, is: '90 90, -10 -10, 50 50'},
]);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/svg-attribute-composition/svg-points-composition.html
