transform-matrix-composition.html | Explore in Territory

<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-matrix composition</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="transform-matrix 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>
// For matrix and matrix3d, addition is defined as concatenation whilst
// accumulation works by decomposing the matrix and then accumulating the
// decomposed functions. We can therefore test the difference between the
// two by mixing functions such that a naive multiplication would look
// different than the accumulation behavior.
//
// Note that due to the complexities of decomposition the test space here is
// huge; we cover some basic cases and hope that the tests for the individual
// functions provide a lot of the remaining coverage.

// Creates a matrix3d function, encoding the passed rotation and translation.
// Note that the translate will not be affected by the rotation.
function create3dMatrix(x, y, z, radians, translateX) {
  // Normalize the rotation axes.
  const length = Math.sqrt(x*x + y*y + z*z);
  x /= length;
  y /= length;
  z /= length;

  const sc = Math.sin(radians / 2) * Math.cos(radians / 2);
  const sq = Math.sin(radians / 2) * Math.sin(radians / 2);

  // https://drafts.csswg.org/css-transforms-2/#Rotate3dDefined
  // https://drafts.csswg.org/css-transforms-2/#Translate3dDefined
  return 'matrix3d(' + [
      1 - 2 * (y*y + z*z) * sq,
      2 * (x * y * sq + z * sc),
      2 * (x * z * sq - y * sc),
      0,
      2 * (x * y * sq - z * sc),
      1 - 2 * (x*x + z*z) * sq,
      2 * (y * z * sq + x * sc),
      0,
      2 * (x * z * sq + y * sc),
      2 * (y * z * sq - x * sc),
      1 - 2 * (x*x + y*y) * sq,
      0,
      translateX, 0, 0, 1].join() + ')';
}

// ------------ Addition tests --------------

test_composition({
  property: 'transform',
  // translateX(100px) rotate(90deg)
  underlying: 'matrix(0, 1, -1, 0, 100, 0)',
  // translateX(100px)
  addFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  addTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(0, 1, -1, 0, 100, 50)'},
  {at: 0, expect: 'matrix(0, 1, -1, 0, 100, 100)'},
  {at: 0.25, expect: 'matrix(0, 1, -1, 0, 100, 125)'},
  {at: 0.5, expect: 'matrix(0, 1, -1, 0, 100, 150)'},
  {at: 0.75, expect: 'matrix(0, 1, -1, 0, 100, 175)'},
  {at: 1, expect: 'matrix(0, 1, -1, 0, 100, 200)'},
  {at: 1.5, expect: 'matrix(0, 1, -1, 0, 100, 250)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px) rotate3d(1, 1, 0, 45deg)
  underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100),
  // translateX(100px)
  addFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)',
  // translateX(200px)
  addTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)',
}, [
  // matrix3ds are hard to read; these are the decomposed forms for clarity
  {at: -0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(50px)'},
  {at: 0, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(100px)'},
  {at: 0.25, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(125px)'},
  {at: 0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(150px)'},
  {at: 0.75, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(175px)'},
  {at: 1, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(200px)'},
  {at: 1.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(250px)'},
]);

// Addition of non-invertible matrices is still defined as concatenation so
// includes the underlying value.

test_composition({
  property: 'transform',
  // Non-invertible.
  underlying: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(100px)
  addFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  addTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
  {at: 0, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
  {at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 200)'},
  {at: 0.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
  {at: 0.75, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
  {at: 1, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
  {at: 1.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px)
  underlying: 'matrix(1, 0, 0, 1, 100, 0)',
  // Non-invertible
  addFrom: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(200px)
  addTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
  {at: 0, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
  {at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 100)'},
  {at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
]);

// ------------ Accumulation tests --------------

test_composition({
  property: 'transform',
  // translateX(100px) rotate(90deg)
  underlying: 'matrix(0, 1, -1, 0, 100, 0)',
  // translateX(100px)
  accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(0, 1, -1, 0, 150, 0)'},
  {at: 0, expect: 'matrix(0, 1, -1, 0, 200, 0)'},
  {at: 0.25, expect: 'matrix(0, 1, -1, 0, 225, 0)'},
  {at: 0.5, expect: 'matrix(0, 1, -1, 0, 250, 0)'},
  {at: 0.75, expect: 'matrix(0, 1, -1, 0, 275, 0)'},
  {at: 1, expect: 'matrix(0, 1, -1, 0, 300, 0)'},
  {at: 1.5, expect: 'matrix(0, 1, -1, 0, 350, 0)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px) rotate3d(1, 1, 0, 45deg)
  underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100),
  // translateX(100px)
  accumulateFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)',
  // translateX(200px)
  accumulateTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)',
}, [
  // matrix3ds are hard to read; these are the decomposed forms for clarity
  {at: -0.5, expect: 'translateX(150px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0, expect: 'translateX(200px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0.25, expect: 'translateX(225px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0.5, expect: 'translateX(250px) rotate3d(1, 1, 0, 45deg)'},
  {at: 0.75, expect: 'translateX(275px) rotate3d(1, 1, 0, 45deg)'},
  {at: 1, expect: 'translateX(300px) rotate3d(1, 1, 0, 45deg)'},
  {at: 1.5, expect: 'translateX(350px) rotate3d(1, 1, 0, 45deg)'},
]);

// Accumulation of non-invertible matrices falls back to replace behavior.

test_composition({
  property: 'transform',
  // Non-invertible.
  underlying: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(100px)
  accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)',
  // translateX(200px)
  accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 0, 0, 1, 50, 0)'},
  {at: 0, expect: 'matrix(1, 0, 0, 1, 100, 0)'},
  {at: 0.25, expect: 'matrix(1, 0, 0, 1, 125, 0)'},
  {at: 0.5, expect: 'matrix(1, 0, 0, 1, 150, 0)'},
  {at: 0.75, expect: 'matrix(1, 0, 0, 1, 175, 0)'},
  {at: 1, expect: 'matrix(1, 0, 0, 1, 200, 0)'},
  {at: 1.5, expect: 'matrix(1, 0, 0, 1, 250, 0)'},
]);

test_composition({
  property: 'transform',
  // translateX(100px)
  underlying: 'matrix(1, 0, 0, 1, 100, 0)',
  // Non-invertible
  accumulateFrom: 'matrix(1, 1, 0, 0, 0, 100)',
  // translateX(200px)
  accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)',
}, [
  {at: -0.5, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
  {at: 0, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
  {at: 0.25, expect: 'matrix(1, 1, 0, 0, 0, 100)'},
  {at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
  {at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'},
]);
</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-matrix-composition.html
