third_party/WebKit/LayoutTests/animations/composition/translate-composition.html

<!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: '-100px 300px 300px'},
  {at: 0, is: '50px 250px 300px'},
  {at: 0.25, is: '87.5px 237.5px 300px'},
  {at: 0.75, is: '162.5px 212.5px 300px'},
  {at: 1, is: '200px 200px 300px'},
  {at: 2, is: '350px 150px 300px'},
]);

assertComposition({
  property: 'translate',
  underlying: '100px 200px 300px',
  addFrom: '50% 100px',
  replaceTo: '200px 50% 100px',
}, [
  {at: -1, is: '100px 550px 500px'},
  {at: 0, is: '150px 300px 300px'},
  {at: 0.25, is: '162.5px 237.5px 250px'},
  {at: 0.75, is: '187.5px 112.5px 150px'},
  {at: 1, is: '200px 50px 100px'},
  {at: 2, is: '250px -200px -100px'},
]);

assertComposition({
  property: 'translate',
  underlying: '100px 200px 300px',
  replaceFrom: '50% 100px',
  addTo: '200px 50% 100px',
}, [
  {at: -1, is: '-200px -50px -400px'},
  {at: 0, is: '50px 100px'},
  {at: 0.25, is: '112.5px 137.5px 100px'},
  {at: 0.75, is: '237.5px 212.5px 300px'},
  {at: 1, is: '300px 250px 400px'},
  {at: 2, is: '550px 400px 800px'},
]);
</script>
</body>