matrix-interpolation.html (1336B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Matrix interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#interpolation-of-3d-matrices"> 5 <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"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/support/interpolation-testcommon.js"></script> 9 <body> 10 <script> 11 // Test interpolation of quaternions when the dot product is -1. 12 // 13 // We need to be particularly careful not to use a rotate function with a zero 14 // angle since the handling of zero angle rotations may change in future as per: 15 // 16 // https://github.com/w3c/csswg-drafts/issues/3236 17 // 18 // For rotateY(360deg) we should get a quaternion of: 19 // [ 0, sin(2 * PI / 2), 0, cos(2 * PI / 2) ] 20 // = [ 0, 0, 0, -1 ] 21 // 22 // For rotateX(720deg) we should get a quaternion of: 23 // [ 0, 0, sin(4 * PI / 2), cos(4 * PI / 2) ] 24 // = [ 0, 0, 0, 1 ] 25 // 26 // Dot product = 0 * 0 + 0 * 0 + 0 * 0 + 1 * -1 = -1 27 test_interpolation( 28 { 29 property: 'transform', 30 from: 'rotateY(360deg)', 31 to: 'rotateX(720deg)', 32 }, 33 [{ at: 0.5, expect: 'matrix(1, 0, 0, 1, 0, 0)' }] 34 ); 35 </script> 36 </body>