css/css-transitions/KeyframeEffect-getKeyframes.tentative.html

<!doctype html>
<meta charset=utf-8>
<title>KeyframeEffect.getKeyframes() for CSS transitions</title>
<!-- TODO: Add a more specific link for this once it is specified. -->
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/helper.js"></script>
<style>
:root {
  --var-100px: 100px;
}
</style>
<div id="log"></div>
<script>
'use strict';

const getKeyframes = e => {
  return e.getAnimations()[0].effect.getKeyframes();
};

const assert_frames_equal = (a, b, name) => {
  assert_equals(
    Object.keys(a).sort().toString(),
    Object.keys(b).sort().toString(),
    `properties on ${name}`
  );
  for (const p in a) {
    assert_equals(a[p], b[p], `value for '${p}' on ${name}`);
  }
};

test(t => {
  const div = addDiv(t);

  div.style.left = '0px';
  getComputedStyle(div).transitionProperty;
  div.style.transition = 'left 100s';
  div.style.left = '100px';

  const frames = getKeyframes(div);

  assert_equals(frames.length, 2, 'number of frames');

  const expected = [
    { offset: 0,
      computedOffset: 0,
      easing: 'linear',
      composite: 'auto',
      left: '0px',
    },
    {
      offset: 1,
      computedOffset: 1,
      easing: 'linear',
      composite: 'auto',
      left: '100px',
    },
  ];

  for (let i = 0; i < frames.length; i++) {
    assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
  }
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
   + ' transition');

test(t => {
  const div = addDiv(t);

  div.style.left = '0px';
  getComputedStyle(div).transitionProperty;
  div.style.transition = 'left 100s steps(2,end)';
  div.style.left = '100px';

  const frames = getKeyframes(div);

  assert_equals(frames.length, 2, 'number of frames');

  const expected = [
    {
      offset: 0,
      computedOffset: 0,
      easing: 'linear',
      composite: 'auto',
      left: '0px',
    },
    {
      offset: 1,
      computedOffset: 1,
      easing: 'linear',
      composite: 'auto',
      left: '100px',
    },
  ];

  for (let i = 0; i < frames.length; i++) {
    assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
  }
}, 'KeyframeEffect.getKeyframes() returns frames unaffected by a non-default easing function');

test(t => {
  const div = addDiv(t);
  div.style.left = '0px';
  getComputedStyle(div).transitionProperty;
  div.style.transition = 'left 100s';
  div.style.left = 'var(--var-100px)';

  const frames = getKeyframes(div);

  // CSS transition endpoints are based on the computed value so we
  // shouldn't see the variable reference
  const expected = [
    {
      offset: 0,
      computedOffset: 0,
      easing: 'linear',
      composite: 'auto',
      left: '0px',
    },
    {
      offset: 1,
      computedOffset: 1,
      easing: 'linear',
      composite: 'auto',
      left: '100px',
    },
  ];
  for (let i = 0; i < frames.length; i++) {
    assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
  }
}, 'KeyframeEffect.getKeyframes() returns expected frames for a'
   + ' transition with a CSS variable endpoint');

test(t => {
  const div = addDiv(t);
  div.style.left = '0px';
  getComputedStyle(div).transitionProperty;
  div.style.transition = 'left 100s';
  div.style.left = '100px';

  // Resetting the effect target before retrieving the keyframes should not
  // affect the computed property values.
  const anim = div.getAnimations()[0];
  anim.effect.target = null;
  const frames = anim.effect.getKeyframes();

  const expected = [
    {
      offset: 0,
      computedOffset: 0,
      easing: 'linear',
      composite: 'auto',
      left: '0px',
    },
    {
      offset: 1,
      computedOffset: 1,
      easing: 'linear',
      composite: 'auto',
      left: '100px',
    },
  ];
  for (let i = 0; i < frames.length; i++) {
    assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
  }
}, 'KeyframeEffect.getKeyframes() returns expected frames for a'
   + ' transition after resetting the effect target');

</script>