<!doctype html>
<meta charset=utf-8>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/testcommon.js"></script>
<style>
:root {
  --var-100px: 100px;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';

function getKeyframes(e) {
  return e.getAnimations()[0].effect.getKeyframes();
}

function assert_frames_equal(a, b, name) {
  assert_equals(Object.keys(a).sort().toString(),
                Object.keys(b).sort().toString(),
                "properties on " + name);
  for (var p in a) {
    assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
  }
}

test(function(t) {
  var div = addDiv(t);

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

  var frames = getKeyframes(div);

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

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

  for (var 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(function(t) {
  var div = addDiv(t);

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

  var frames = getKeyframes(div);

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

  var expected = [
    { offset: 0, computedOffset: 0, easing: "steps(2)", composite: "auto",
      left: "0px" },
    { offset: 1, computedOffset: 1, easing: "linear", composite: "auto",
      left: "100px" },
  ];

  for (var i = 0; i < frames.length; i++) {
    assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
  }
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
   + ' transition with a non-default easing function');

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

  var frames = getKeyframes(div);

  // CSS transition endpoints are based on the computed value so we
  // shouldn't see the variable reference
  var expected = [
    { offset: 0, computedOffset: 0, easing: 'ease', composite: "auto",
      left: '0px' },
    { offset: 1, computedOffset: 1, easing: 'linear', composite: "auto",
      left: '100px' },
  ];
  for (var 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');

</script>
</body>