transform-perspective-composition.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform-perspective composition</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions">
<meta name="assert" content="transform-perspective 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>
// Addition and accumulation of perspective values are very similar, but not
// identical. We can test the difference by constructing a scenario where a
// perspective parameter would go negative in one case (and thus be clamped
// to 0), and would not go negative in the other case.
//
// In the test below, the values differ at 1.5 progress. The reason for this
// is that at 1.5 progress, the addition case (which uses concatenation)
// computes to:
//
//   perspective(10px) perspective(-50px)
//
// Since perspective cannot go negative, this is clamped to:
//
//   perspective(10px) perspective(none)
//
// The accumulation case, on the other hand, combines the components
// and so ends up blending from perspective(5px) to perspective(8.33...px) at
// 1.5 progress, which results in perspective(12.5px) - this is what you would
// get with addition too, if not for the clamping behavior.

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

test_composition({
  property: 'transform',
  underlying: 'perspective(10px)',
  addFrom: 'perspective(10px)',
  addTo: 'perspective(50px)',
}, [
  {at: -0.5, expect: 'perspective(4.12px)'},
  {at: 0, expect: 'perspective(5px)'},
  {at: 0.25, expect: 'perspective(5.45px)'},
  {at: 0.5, expect: 'perspective(6.15px)'},
  {at: 0.75, expect: 'perspective(7.06px)'},
  {at: 1, expect: 'perspective(8.33px)'},
  {at: 1.5, expect: 'perspective(10px)'},
]);

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

test_composition({
  property: 'transform',
  underlying: 'perspective(10px)',
  accumulateFrom: 'perspective(10px)',
  accumulateTo: 'perspective(50px)',
}, [
  {at: -0.5, expect: 'perspective(4.12px)'},
  {at: 0, expect: 'perspective(5px)'},
  {at: 0.25, expect: 'perspective(5.45px)'},
  {at: 0.5, expect: 'perspective(6.15px)'},
  {at: 0.75, expect: 'perspective(7.06px)'},
  {at: 1, expect: 'perspective(8.33px)'},
  {at: 1.5, expect: 'perspective(12.5px)'},
]);
</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/css/css-transforms/animation/transform-perspective-composition.html
