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/matrix-interpolation.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<title>Matrix interpolation</title>
<meta name="assert" content="When interpolating between two matrices, each matrix is decomposed into the corresponding translation, rotation, scale, skew and (for a 3D matrix) perspective values">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
// Test interpolation of quaternions when the dot product is -1.
//
// We need to be particularly careful not to use a rotate function with a zero
// angle since the handling of zero angle rotations may change in future as per:
//
//
// For rotateY(360deg) we should get a quaternion of:
// [ 0, sin(2 * PI / 2), 0, cos(2 * PI / 2) ]
// = [ 0, 0, 0, -1 ]
//
// For rotateX(720deg) we should get a quaternion of:
// [ 0, 0, sin(4 * PI / 2), cos(4 * PI / 2) ]
// = [ 0, 0, 0, 1 ]
//
// Dot product = 0 * 0 + 0 * 0 + 0 * 0 + 1 * -1 = -1
test_interpolation(
{
property: 'transform',
from: 'rotateY(360deg)',
to: 'rotateX(720deg)',
},
[{ at: 0.5, expect: 'matrix(1, 0, 0, 1, 0, 0)' }]
);
</script>
</body>