<!DOCTYPE html>
<meta charset="utf-8">
<title>translate composition</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<meta name="assert" content="translate supports <length> and <percentage> animation.">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>

<body>
<style>
.target {
  width: 100px;
  height: 100px;
}
</style>
<script>
test_composition({
  property: 'translate',
  underlying: '100px 200px 300px',
  addFrom: '-50px 50%',
  addTo: '100%',
}, [
  {at: -1, expect: '-100% calc(200px + 100%) 300px'},
  {at: 0, expect: 'calc(50px + 0%) calc(200px + 50%) 300px'},
  {at: 0.25, expect: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'},
  {at: 0.75, expect: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'},
  {at: 1, expect: 'calc(100px + 100%) calc(200px + 0%) 300px'},
  {at: 2, expect: 'calc(150px + 200%) calc(200px - 50%) 300px'},
]);

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

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

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

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

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

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

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

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