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-rotate-composition.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-rotate composition</title>
<meta name="assert" content="transform-rotate 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>
// ------------ Addition tests --------------
test_composition({
property: 'transform',
underlying: 'rotateX(20deg)',
addFrom: 'rotateX(40deg)',
addTo: 'rotateX(60deg)',
}, [
{at: -0.5, expect: 'rotateX(50deg)'},
{at: 0, expect: 'rotateX(60deg)'},
{at: 0.25, expect: 'rotateX(65deg)'},
{at: 0.5, expect: 'rotateX(70deg)'},
{at: 0.75, expect: 'rotateX(75deg)'},
{at: 1, expect: 'rotateX(80deg)'},
{at: 1.5, expect: 'rotateX(90deg)'},
]);
test_composition({
property: 'transform',
underlying: 'rotateY(20deg)',
addFrom: 'rotateY(40deg)',
addTo: 'rotateY(60deg)',
}, [
{at: -0.5, expect: 'rotateY(50deg)'},
{at: 0, expect: 'rotateY(60deg)'},
{at: 0.25, expect: 'rotateY(65deg)'},
{at: 0.5, expect: 'rotateY(70deg)'},
{at: 0.75, expect: 'rotateY(75deg)'},
{at: 1, expect: 'rotateY(80deg)'},
{at: 1.5, expect: 'rotateY(90deg)'},
]);
test_composition({
property: 'transform',
underlying: 'rotateZ(20deg)',
addFrom: 'rotateZ(40deg)',
addTo: 'rotateZ(60deg)',
}, [
{at: -0.5, expect: 'rotateZ(50deg)'},
{at: 0, expect: 'rotateZ(60deg)'},
{at: 0.25, expect: 'rotateZ(65deg)'},
{at: 0.5, expect: 'rotateZ(70deg)'},
{at: 0.75, expect: 'rotateZ(75deg)'},
{at: 1, expect: 'rotateZ(80deg)'},
{at: 1.5, expect: 'rotateZ(90deg)'},
]);
// When testing rotate functions in isolation, the additive and accumulation
// behaviors are functionally identical. This test includes a skew to ensure
// both methods are implemented; add should append the from/to after the skew.
test_composition({
property: 'transform',
underlying: 'rotate(45deg) skew(10deg, 20deg)',
addFrom: 'rotate(45deg)',
addTo: 'rotate(225deg)',
}, [
{at: -0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(-45deg)'},
{at: 0, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(45deg)'},
{at: 0.25, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(90deg)'},
{at: 0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(135deg)'},
{at: 0.75, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(180deg)'},
{at: 1, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(225deg)'},
{at: 1.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(315deg)'},
]);
// ------------ Accumulation tests --------------
test_composition({
property: 'transform',
underlying: 'rotateX(20deg)',
accumulateFrom: 'rotateX(40deg)',
accumulateTo: 'rotateX(60deg)',
}, [
{at: -0.5, expect: 'rotateX(50deg)'},
{at: 0, expect: 'rotateX(60deg)'},
{at: 0.25, expect: 'rotateX(65deg)'},
{at: 0.5, expect: 'rotateX(70deg)'},
{at: 0.75, expect: 'rotateX(75deg)'},
{at: 1, expect: 'rotateX(80deg)'},
{at: 1.5, expect: 'rotateX(90deg)'},
]);
test_composition({
property: 'transform',
underlying: 'rotateY(20deg)',
accumulateFrom: 'rotateY(40deg)',
accumulateTo: 'rotateY(60deg)',
}, [
{at: -0.5, expect: 'rotateY(50deg)'},
{at: 0, expect: 'rotateY(60deg)'},
{at: 0.25, expect: 'rotateY(65deg)'},
{at: 0.5, expect: 'rotateY(70deg)'},
{at: 0.75, expect: 'rotateY(75deg)'},
{at: 1, expect: 'rotateY(80deg)'},
{at: 1.5, expect: 'rotateY(90deg)'},
]);
test_composition({
property: 'transform',
underlying: 'rotateZ(20deg)',
accumulateFrom: 'rotateZ(40deg)',
accumulateTo: 'rotateZ(60deg)',
}, [
{at: -0.5, expect: 'rotateZ(50deg)'},
{at: 0, expect: 'rotateZ(60deg)'},
{at: 0.25, expect: 'rotateZ(65deg)'},
{at: 0.5, expect: 'rotateZ(70deg)'},
{at: 0.75, expect: 'rotateZ(75deg)'},
{at: 1, expect: 'rotateZ(80deg)'},
{at: 1.5, expect: 'rotateZ(90deg)'},
]);
// The rotate functions all share the same primitive type (rotate3d), so can be
// accumulated between. If primitive type matching is not properly being
// performed, this test would likely fail with a fallback to replace behavior.
test_composition({
property: 'transform',
underlying: 'rotateX(45deg)',
accumulateFrom: 'rotateY(30deg)',
accumulateTo: 'rotateY(70deg)',
}, [
// Due to how rotation is accumulated (addition of underlying angles), the
// behavior is identical to concatenating the components. The expectations
// are expressed as concatenations for readability.
{at: -0.5, expect: 'rotateX(45deg) rotateY(10deg)'},
{at: 0, expect: 'rotateX(45deg) rotateY(30deg)'},
{at: 0.25, expect: 'rotateX(45deg) rotateY(40deg)'},
{at: 0.5, expect: 'rotateX(45deg) rotateY(50deg)'},
{at: 0.75, expect: 'rotateX(45deg) rotateY(60deg)'},
{at: 1, expect: 'rotateX(45deg) rotateY(70deg)'},
{at: 1.5, expect: 'rotateX(45deg) rotateY(90deg)'},
]);
// When testing rotate functions in isolation, the additive and accumulation
// behaviors are functionally identical. This test includes a skew to ensure
// both methods are implemented; accumulate should combine the rotate before
// the skew.
test_composition({
property: 'transform',
underlying: 'rotate(45deg) skew(10deg, 20deg)',
accumulateFrom: 'rotate(45deg)',
accumulateTo: 'rotate(225deg)',
}, [
{at: -0.5, expect: 'rotate(0deg) skew(10deg, 20deg)'},
{at: 0, expect: 'rotate(90deg) skew(10deg, 20deg)'},
{at: 0.25, expect: 'rotate(135deg) skew(10deg, 20deg)'},
{at: 0.5, expect: 'rotate(180deg) skew(10deg, 20deg)'},
{at: 0.75, expect: 'rotate(225deg) skew(10deg, 20deg)'},
{at: 1, expect: 'rotate(270deg) skew(10deg, 20deg)'},
{at: 1.5, expect: 'rotate(360deg) skew(10deg, 20deg)'},
]);
</script>
</body>