<!doctype html>
<meta charset="utf-8">
<title>Matrix interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#interpolation-of-3d-matrices">
<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:
//
//   https://github.com/w3c/csswg-drafts/issues/3236
//
// 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>