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/transform-translate-composition.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-translate composition</title>
<meta name="assert" content="transform-translate supports animation as a transform list">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
// ------------ Addition tests --------------
test_composition({
property: 'transform',
underlying: 'translate(10px, 20px)',
addFrom: 'translate(100px, 200px)',
addTo: 'translate(200px, 400px)',
}, [
{at: -0.5, expect: 'translate(60px, 120px)'},
{at: 0, expect: 'translate(110px, 220px)'},
{at: 0.25, expect: 'translate(135px, 270px)'},
{at: 0.5, expect: 'translate(160px, 320px)'},
{at: 0.75, expect: 'translate(185px, 370px)'},
{at: 1, expect: 'translate(210px, 420px)'},
{at: 1.5, expect: 'translate(260px, 520px)'},
]);
test_composition({
property: 'transform',
underlying: 'translate(10px, 20px)',
addFrom: 'translate(100px, 200px)',
replaceTo: 'translate(210px, 420px)',
}, [
{at: -0.5, expect: 'translate(60px, 120px)'},
{at: 0, expect: 'translate(110px, 220px)'},
{at: 0.25, expect: 'translate(135px, 270px)'},
{at: 0.5, expect: 'translate(160px, 320px)'},
{at: 0.75, expect: 'translate(185px, 370px)'},
{at: 1, expect: 'translate(210px, 420px)'},
{at: 1.5, expect: 'translate(260px, 520px)'},
]);
// When testing translate functions in isolation, the additive and accumulation
// behaviors are functionally identical. This test includes a rotate to ensure
// both methods are implemented; add should append the from/to after the rotate.
test_composition({
property: 'transform',
underlying: 'translateX(100px) rotate(90deg)',
addFrom: 'translateX(100px)',
addTo: 'translateX(200px)',
}, [
{at: -0.5, expect: 'translateX(100px) rotate(90deg) translateX(50px)'},
{at: 0, expect: 'translateX(100px) rotate(90deg) translateX(100px)'},
{at: 0.25, expect: 'translateX(100px) rotate(90deg) translateX(125px)'},
{at: 0.5, expect: 'translateX(100px) rotate(90deg) translateX(150px)'},
{at: 0.75, expect: 'translateX(100px) rotate(90deg) translateX(175px)'},
{at: 1, expect: 'translateX(100px) rotate(90deg) translateX(200px)'},
{at: 1.5, expect: 'translateX(100px) rotate(90deg) translateX(250px)'},
]);
// ------------ Accumulation tests --------------
test_composition({
property: 'transform',
underlying: 'translateX(100px)',
accumulateFrom: 'translateX(50px)',
accumulateTo: 'translateX(250px)',
}, [
{at: -0.5, expect: 'translateX(50px)'},
{at: 0, expect: 'translateX(150px)'},
{at: 0.25, expect: 'translateX(200px)'},
{at: 0.5, expect: 'translateX(250px)'},
{at: 0.75, expect: 'translateX(300px)'},
{at: 1, expect: 'translateX(350px)'},
{at: 1.5, expect: 'translateX(450px)'},
]);
test_composition({
property: 'transform',
underlying: 'translateY(100px)',
accumulateFrom: 'translateY(50px)',
accumulateTo: 'translateY(250px)',
}, [
{at: -0.5, expect: 'translateY(50px)'},
{at: 0, expect: 'translateY(150px)'},
{at: 0.25, expect: 'translateY(200px)'},
{at: 0.5, expect: 'translateY(250px)'},
{at: 0.75, expect: 'translateY(300px)'},
{at: 1, expect: 'translateY(350px)'},
{at: 1.5, expect: 'translateY(450px)'},
]);
test_composition({
property: 'transform',
underlying: 'translateZ(100px)',
accumulateFrom: 'translateZ(50px)',
accumulateTo: 'translateZ(250px)',
}, [
{at: -0.5, expect: 'translateZ(50px)'},
{at: 0, expect: 'translateZ(150px)'},
{at: 0.25, expect: 'translateZ(200px)'},
{at: 0.5, expect: 'translateZ(250px)'},
{at: 0.75, expect: 'translateZ(300px)'},
{at: 1, expect: 'translateZ(350px)'},
{at: 1.5, expect: 'translateZ(450px)'},
]);
// The translate functions all share the same primitive type (translate3d), so
// can be accumulated between.
test_composition({
property: 'transform',
underlying: 'translate(100px, 50px)',
accumulateFrom: 'translateZ(50px)',
accumulateTo: 'translateZ(250px)',
}, [
{at: -0.5, expect: 'translate3d(100px, 50px, -50px)'},
{at: 0, expect: 'translate3d(100px, 50px, 50px)'},
{at: 0.25, expect: 'translate3d(100px, 50px, 100px)'},
{at: 0.5, expect: 'translate3d(100px, 50px, 150px)'},
{at: 0.75, expect: 'translate3d(100px, 50px, 200px)'},
{at: 1, expect: 'translate3d(100px, 50px, 250px)'},
{at: 1.5, expect: 'translate3d(100px, 50px, 350px)'},
]);
// When testing translate functions in isolation, the additive and accumulation
// behaviors are functionally identical. This test includes a rotate to ensure
// both methods are implemented; accumulate should combine the transform before
// the rotate.
test_composition({
property: 'transform',
underlying: 'translateX(100px) rotate(90deg)',
accumulateFrom: 'translateX(100px)',
accumulateTo: 'translateX(200px)',
}, [
{at: -0.5, expect: 'translateX(150px) rotate(90deg)'},
{at: 0, expect: 'translateX(200px) rotate(90deg)'},
{at: 0.25, expect: 'translateX(225px) rotate(90deg)'},
{at: 0.5, expect: 'translateX(250px) rotate(90deg)'},
{at: 0.75, expect: 'translateX(275px) rotate(90deg)'},
{at: 1, expect: 'translateX(300px) rotate(90deg)'},
{at: 1.5, expect: 'translateX(350px) rotate(90deg)'},
]);
</script>
</body>