<!DOCTYPE html>
<html>
<body>
<template id="target-template">
<svg width="90" height="90">
<line x1="1" y1="2" x2="3" y2="4" class="target" />
</svg>
</template>
<script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
<script>
'use strict';

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'translate(10 10)',
  from: 'translate(0 10)',
  fromComposite: 'add',
  to: 'translate(20 50)',
  toComposite: 'add'
}, [
  {at: -0.4, is: 'translate(10,10) translate(-8,-6)'},
  {at: 0, is: 'translate(10,10) translate(0,10)'},
  {at: 0.2, is: 'translate(10,10) translate(4,18)'},
  {at: 0.6, is: 'translate(10,10) translate(12,34)'},
  {at: 1, is: 'translate(10,10) translate(20,50)'},
  {at: 1.4, is: 'translate(10,10) translate(28,66)'}
]);

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

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'translate(10 20)',
  from: neutralKeyframe,
  to: 'translate(30 60)',
  toComposite: 'replace'
}, [
  {at: -0.4, is: 'translate(2,4)'},
  {at: 0, is: 'translate(10,20)'},
  {at: 0.2, is: 'translate(14,28)'},
  {at: 0.6, is: 'translate(22,44)'},
  {at: 1, is: 'translate(30,60)'},
  {at: 1.4, is: 'translate(38,76)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'scale(10 5)',
  from: 'scale(10 10)',
  fromComposite: 'add',
  to: 'scale(20 50)',
  toComposite: 'add'
}, [
  {at: -0.4, is: 'scale(10 5) scale(6 -6)'},
  {at: 0, is: 'scale(10 5) scale(10 10)'},
  {at: 0.2, is: 'scale(10 5) scale(12 18)'},
  {at: 0.6, is: 'scale(10 5) scale(16 34)'},
  {at: 1, is: 'scale(10 5) scale(20 50)'},
  {at: 1.4, is: 'scale(10 5) scale(24 66)'}
]);

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

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'scale(10 10)',
  from: neutralKeyframe,
  to: 'scale(20 50)',
  toComposite: 'replace'
}, [
  {at: -0.4, is: 'scale(6 -6)'},
  {at: 0, is: 'scale(10 10)'},
  {at: 0.2, is: 'scale(12 18)'},
  {at: 0.6, is: 'scale(16 34)'},
  {at: 1, is: 'scale(20 50)'},
  {at: 1.4, is: 'scale(24 66)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'rotate(10 10 10)',
  from: 'rotate(10 20 30)',
  fromComposite: 'add',
  to: 'rotate(40 80 160)',
  toComposite: 'add'
}, [
  {at: -0.4, is: 'rotate(10 10 10) rotate(-2 -4 -22)'},
  {at: 0, is: 'rotate(10 10 10) rotate(10 20 30)'},
  {at: 0.2, is: 'rotate(10 10 10) rotate(16 32 56)'},
  {at: 0.6, is: 'rotate(10 10 10) rotate(28 56 108)'},
  {at: 1, is: 'rotate(10 10 10) rotate(40 80 160)'},
  {at: 1.4, is: 'rotate(10 10 10) rotate(52 104 212)'}
]);

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

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'rotate(10 20 30)',
  from: neutralKeyframe,
  to: 'rotate(40 80 160)',
  toComposite: 'replace'
}, [
  {at: -0.4, is: 'rotate(-2 -4 -22)'},
  {at: 0, is: 'rotate(10 20 30)'},
  {at: 0.2, is: 'rotate(16 32 56)'},
  {at: 0.6, is: 'rotate(28 56 108)'},
  {at: 1, is: 'rotate(40 80 160)'},
  {at: 1.4, is: 'rotate(52 104 212)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'skewX(10)',
  from: 'skewX(30)',
  fromComposite: 'add',
  to: 'skewX(50)',
  toComposite: 'add'
}, [
  {at: -0.4, is: 'skewX(10) skewX(22)'},
  {at: 0, is: 'skewX(10) skewX(30)'},
  {at: 0.2, is: 'skewX(10) skewX(34)'},
  {at: 0.6, is: 'skewX(10) skewX(42)'},
  {at: 1, is: 'skewX(10) skewX(50)'},
  {at: 1.4, is: 'skewX(10) skewX(58)'}
]);

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

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'skewX(30)',
  from: neutralKeyframe,
  to: 'skewX(50)',
  toComposite: 'replace'
}, [
  {at: -0.4, is: 'skewX(22)'},
  {at: 0, is: 'skewX(30)'},
  {at: 0.2, is: 'skewX(34)'},
  {at: 0.6, is: 'skewX(42)'},
  {at: 1, is: 'skewX(50)'},
  {at: 1.4, is: 'skewX(58)'}
]);

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'skewY(10)',
  from: 'skewY(30)',
  fromComposite: 'add',
  to: 'skewY(50)',
  toComposite: 'add'
}, [
  {at: -0.4, is: 'skewY(10) skewY(22)'},
  {at: 0, is: 'skewY(10) skewY(30)'},
  {at: 0.2, is: 'skewY(10) skewY(34)'},
  {at: 0.6, is: 'skewY(10) skewY(42)'},
  {at: 1, is: 'skewY(10) skewY(50)'},
  {at: 1.4, is: 'skewY(10) skewY(58)'}
]);

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

assertAttributeInterpolation({
  property: 'transform',
  underlying: 'skewY(30)',
  from: neutralKeyframe,
  to: 'skewY(50)',
  toComposite: 'replace'
}, [
  {at: -0.4, is: 'skewY(22)'},
  {at: 0, is: 'skewY(30)'},
  {at: 0.2, is: 'skewY(34)'},
  {at: 0.6, is: 'skewY(42)'},
  {at: 1, is: 'skewY(50)'},
  {at: 1.4, is: 'skewY(58)'}
]);

</script>
</body>
</html>