<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  translate: 100px 200px 300px;
}
.target {
  width: 100px;
  height: 100px;
  background-color: black;
  translate: 10px;
}
.expected {
  background-color: green;
}
</style>
<template id="target-template">
<div class="parent">
    <div class="target"></div>
</div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: 'translate',
  from: neutralKeyframe,
  to: '20px',
}, [
  {at: -1, is: '0px'},
  {at: 0, is: '10px'},
  {at: 0.25, is: '12.5px'},
  {at: 0.75, is: '17.5px'},
  {at: 1, is: '20px'},
  {at: 2, is: '30px'},
]);

assertInterpolation({
  property: 'translate',
  from: 'unset',
  to: '20px',
}, [
  {at: -1, is: '-20px'},
  {at: 0, is: '0px'},
  {at: 0.25, is: '5px'},
  {at: 0.75, is: '15px'},
  {at: 1, is: '20px'},
  {at: 2, is: '40px'},
]);

assertInterpolation({
  property: 'translate',
  from: '-100px',
  to: '100px',
}, [
  {at: -1, is: '-300px'},
  {at: 0, is: '-100px'},
  {at: 0.25, is: '-50px'},
  {at: 0.75, is: '50px'},
  {at: 1, is: '100px'},
  {at: 2, is: '300px'},
]);

assertInterpolation({
  property: 'translate',
  from: '-100%',
  to: '100%',
}, [
  {at: -1, is: '-300%'},
  {at: 0, is: '-100%'},
  {at: 0.25, is: '-50%'},
  {at: 0.75, is: '50%'},
  {at: 1, is: '100%'},
  {at: 2, is: '300%'},
]);

assertInterpolation({
  property: 'translate',
  from: '-100px -50px',
  to: '100px 50px',
}, [
  {at: -1, is: '-300px -150px'},
  {at: 0, is: '-100px -50px'},
  {at: 0.25, is: '-50px -25px'},
  {at: 0.75, is: '50px 25px'},
  {at: 1, is: '100px 50px'},
  {at: 2, is: '300px 150px'},
]);

assertInterpolation({
  property: 'translate',
  from: '-100px -50px 100px',
  to: '100px 50px 0px',
}, [
  {at: -1, is: '-300px -150px 200px'},
  {at: 0, is: '-100px -50px 100px'},
  {at: 0.25, is: '-50px -25px 75px'},
  {at: 0.75, is: '50px 25px 25px'},
  {at: 1, is: '100px 50px 0px'},
  {at: 2, is: '300px 150px -100px'},
]);

assertInterpolation({
  property: 'translate',
  from: '0px',
  to: '-100px -50px 100px',
}, [
  {at: -1, is: '100px 50px -100px'},
  {at: 0, is: '0px'},
  {at: 0.25, is: '-25px -12.5px 25px'},
  {at: 0.75, is: '-75px -37.5px 75px'},
  {at: 1, is: '-100px -50px 100px'},
  {at: 2, is: '-200px -100px 200px'},
]);

assertInterpolation({
  property: 'translate',
  from: '-100px -50px 100px',
  to: '0px',
}, [
  {at: -1, is: '-200px -100px 200px'},
  {at: 0, is: '-100px -50px 100px'},
  {at: 0.25, is: '-75px -37.5px 75px'},
  {at: 0.75, is: '-25px -12.5px 25px'},
  {at: 1, is: '0px'},
  {at: 2, is: '100px 50px -100px'},
]);

assertInterpolation({
  property: 'translate',
  from: 'inherit',
  to: '200px 100px 200px',
}, [
  {at: -1, is: '0px 300px 400px'},
  {at: 0, is: '100px 200px 300px'},
  {at: 0.25, is: '125px 175px 275px'},
  {at: 0.75, is: '175px 125px 225px'},
  {at: 1, is: '200px 100px 200px'},
  {at: 2, is: '300px 0px 100px'},
]);

assertInterpolation({
  property: 'translate',
  from: '200px 100px 200px',
  to: 'inherit',
}, [
  {at: -1, is: '300px 0px 100px'},
  {at: 0, is: '200px 100px 200px'},
  {at: 0.25, is: '175px 125px 225px'},
  {at: 0.75, is: '125px 175px 275px'},
  {at: 1, is: '100px 200px 300px'},
  {at: 2, is: '0px 300px 400px'},
]);

assertInterpolation({
  property: 'translate',
  from: 'initial',
  to: '200px 100px 200px',
}, [
  {at: -1, is: '-200px -100px -200px'},
  {at: 0, is: '0px'},
  {at: 0.25, is: '50px 25px 50px'},
  {at: 0.75, is: '150px 75px 150px'},
  {at: 1, is: '200px 100px 200px'},
  {at: 2, is: '400px 200px 400px'},
]);

assertInterpolation({
  property: 'translate',
  from: '200px 100px 200px',
  to: 'initial',
}, [
  {at: -1, is: '400px 200px 400px'},
  {at: 0, is: '200px 100px 200px'},
  {at: 0.25, is: '150px 75px 150px'},
  {at: 0.75, is: '50px 25px 50px'},
  {at: 1, is: '0px'},
  {at: 2, is: '-200px -100px -200px'},
]);

assertInterpolation({
  property: 'translate',
  from: 'initial',
  to: 'inherit',
}, [
  {at: -1, is: '-100px -200px -300px'},
  {at: 0, is: '0px'},
  {at: 0.25, is: '25px 50px 75px'},
  {at: 0.75, is: '75px 150px 225px'},
  {at: 1, is: '100px 200px 300px'},
  {at: 2, is: '200px 400px 600px'},
]);

assertInterpolation({
  property: 'translate',
  from: 'inherit',
  to: 'initial',
}, [
  {at: -1, is: '200px 400px 600px'},
  {at: 0, is: '100px 200px 300px'},
  {at: 0.25, is: '75px 150px 225px'},
  {at: 0.75, is: '25px 50px 75px'},
  {at: 1, is: '0px'},
  {at: 2, is: '-100px -200px -300px'},
]);
</script>