mirror of
https://github.com/servo/servo
synced 2026-05-13 02:17:06 +02:00
37 lines
1.3 KiB
HTML
37 lines
1.3 KiB
HTML
<!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="resources/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>
|