<!DOCTYPE html>
<body>
<style>
.target {
  width: 100px;
  height: 100px;
}
</style>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
  property: 'translate',
  underlying: '100px 200px 300px',
  addFrom: '-50px 50%',
  addTo: '100%',
}, [
  {at: -1, is: '-100% calc(200px + 100%) 300px'},
  {at: 0, is: '50px calc(200px + 50%) 300px'},
  {at: 0.25, is: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'},
  {at: 0.75, is: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'},
  {at: 1, is: 'calc(100px + 100%) 200px 300px'},
  {at: 2, is: 'calc(150px + 200%) calc(200px - 50%) 300px'},
]);

assertComposition({
  property: 'translate',
  underlying: '100px 200px 300px',
  addFrom: '50% 100px',
  replaceTo: '200px 50% 100px',
}, [
  {at: -1, is: '100% calc(600px - 50%) 500px'},
  {at: 0, is: 'calc(100px + 50%) 300px 300px'},
  {at: 0.25, is: 'calc(125px + 37.5%) calc(225px + 12.5%) 250px'},
  {at: 0.75, is: 'calc(175px + 12.5%) calc(75px + 37.5%) 150px'},
  {at: 1, is: '200px 50% 100px'},
  {at: 2, is: 'calc(300px - 50%) calc(-300px + 100%) -100px'},
]);

assertComposition({
  property: 'translate',
  underlying: '100px 200px 300px',
  replaceFrom: '50% 100px',
  addTo: '200px 50% 100px',
}, [
  {at: -1, is: 'calc(-300px + 100%) -50% -400px'},
  {at: 0, is: '50% 100px'},
  {at: 0.25, is: 'calc(75px + 37.5%) calc(125px + 12.5%) 100px'},
  {at: 0.75, is: 'calc(225px + 12.5%) calc(175px + 37.5%) 300px'},
  {at: 1, is: '300px calc(200px + 50%) 400px'},
  {at: 2, is: 'calc(600px - 50%) calc(300px + 100%) 800px'},
]);

assertComposition({
  property: 'translate',
  underlying: 'none',
  replaceFrom: 'none',
  addTo: '100px',
}, [
  {at: -1, is: '-100px'},
  {at: 0, is: 'none'},
  {at: 0.25, is: '25px'},
  {at: 0.75, is: '75px'},
  {at: 1, is: '100px'},
  {at: 2, is: '200px'},
]);

assertComposition({
  property: 'translate',
  underlying: 'none',
  addFrom: 'none',
  addTo: '100px',
}, [
  {at: -1, is: '-100px'},
  {at: 0, is: 'none'},
  {at: 0.25, is: '25px'},
  {at: 0.75, is: '75px'},
  {at: 1, is: '100px'},
  {at: 2, is: '200px'},
]);

assertComposition({
  property: 'translate',
  underlying: 'none',
  replaceFrom: '0px 40px 60px',
  replaceTo: 'none',
}, [
  {at: -1, is: '0px 80px 120px'},
  {at: 0, is: '0px 40px 60px'},
  {at: 0.25, is: '0px 30px 45px'},
  {at: 0.75, is: '0px 10px 15px'},
  {at: 1, is: 'none'},
  {at: 2, is: '0px -40px -60px'},
]);

assertComposition({
  property: 'translate',
  underlying: 'none',
  replaceFrom: '0px 40px 60px',
  addTo: 'none',
}, [
  {at: -1, is: '0px 80px 120px'},
  {at: 0, is: '0px 40px 60px'},
  {at: 0.25, is: '0px 30px 45px'},
  {at: 0.75, is: '0px 10px 15px'},
  {at: 1, is: 'none'},
  {at: 2, is: '0px -40px -60px'},
]);

assertComposition({
  property: 'translate',
  underlying: '80px 20px',
  addFrom: 'none',
  replaceTo: '0px 40px 60px',
}, [
  {at: -1, is: '160px 0px -60px'},
  {at: 0, is: '80px 20px'},
  {at: 0.25, is: '60px 25px 15px'},
  {at: 0.5, is: '40px 30px 30px'},
  {at: 0.75, is: '20px 35px 45px'},
  {at: 1, is: '0px 40px 60px'},
  {at: 2, is: '-80px 60px 120px'},
]);

assertComposition({
  property: 'translate',
  underlying: '80px 20px',
  addFrom: '0px 40px 60px',
  replaceTo: 'none',
}, [
  {at: -1, is: '160px 120px 120px'},
  {at: 0, is: '80px 60px 60px'},
  {at: 0.25, is: '60px 45px 45px'},
  {at: 0.5, is: '40px 30px 30px'},
  {at: 0.75, is: '20px 15px 15px'},
  {at: 1, is: 'none'},
  {at: 2, is: '-80px -60px -60px'},
]);
</script>
</body>