Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transforms/animation/translate-composition.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>translate composition</title>
<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>