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-perspective-composition.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-perspective composition</title>
<meta name="assert" content="transform-perspective 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 and accumulation of perspective values are very similar, but not
// identical. We can test the difference by constructing a scenario where a
// perspective parameter would go negative in one case (and thus be clamped
// to 0), and would not go negative in the other case.
//
// In the test below, the values differ at 1.5 progress. The reason for this
// is that at 1.5 progress, the addition case (which uses concatenation)
// computes to:
//
// perspective(10px) perspective(-50px)
//
// Since perspective cannot go negative, this is clamped to:
//
// perspective(10px) perspective(none)
//
// The accumulation case, on the other hand, combines the components
// and so ends up blending from perspective(5px) to perspective(8.33...px) at
// 1.5 progress, which results in perspective(12.5px) - this is what you would
// get with addition too, if not for the clamping behavior.
// ------------ Addition tests --------------
test_composition({
property: 'transform',
underlying: 'perspective(10px)',
addFrom: 'perspective(10px)',
addTo: 'perspective(50px)',
}, [
{at: -0.5, expect: 'perspective(4.12px)'},
{at: 0, expect: 'perspective(5px)'},
{at: 0.25, expect: 'perspective(5.45px)'},
{at: 0.5, expect: 'perspective(6.15px)'},
{at: 0.75, expect: 'perspective(7.06px)'},
{at: 1, expect: 'perspective(8.33px)'},
{at: 1.5, expect: 'perspective(10px)'},
]);
// ------------ Accumulation tests --------------
test_composition({
property: 'transform',
underlying: 'perspective(10px)',
accumulateFrom: 'perspective(10px)',
accumulateTo: 'perspective(50px)',
}, [
{at: -0.5, expect: 'perspective(4.12px)'},
{at: 0, expect: 'perspective(5px)'},
{at: 0.25, expect: 'perspective(5.45px)'},
{at: 0.5, expect: 'perspective(6.15px)'},
{at: 0.75, expect: 'perspective(7.06px)'},
{at: 1, expect: 'perspective(8.33px)'},
{at: 1.5, expect: 'perspective(12.5px)'},
]);
</script>
</body>