'use strict';
function test_interpolation(settings, expectations) {

  test(function(){
    assert_true(CSS.supports(settings.property, settings.from), 'Value "' + settings.from + '" is supported by ' + settings.property);
    assert_true(CSS.supports(settings.property, settings.to), 'Value "' + settings.to + '" is supported by ' + settings.property);
  }, '"' + settings.from + '" and "' + settings.to + '" are valid ' + settings.property + ' values');

  const container = document.getElementById('container');
  for (let i = 0; i < expectations.length; ++i) {
    const progress = expectations[i].at;
    const expectation = expectations[i].expect;
    const animationId = 'anim' + i;
    const targetId = 'target' + i;
    const referenceId = 'reference' + i;

    test(function(){
      assert_true(CSS.supports(settings.property, expectation), 'Value "' + expectation + '" is supported by ' + settings.property);

      const target = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      target.id = targetId;
      container.appendChild(target);

      const reference = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      reference.id = referenceId;
      container.appendChild(reference);

      assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]);

      // Create an animation of length 2s that starts at -1s so the current time of 0s is
      // exactly halfway through the animation. A cubic bezier timing function is used that
      // evaluates to |progress| at the current time (halfway through the animation).

      // Cubic bezier evaluates to |progress| at 50%.
      const y = (8 * progress - 1) / 6;
      const timing_function = 'cubic-bezier(0, ' + y + ', 1, ' + y + ')';

      const stylesheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
      stylesheet.textContent =
        '#' + targetId + ' {\n' +
        '  animation: 2s ' + timing_function + ' -1s paused ' + animationId + ';\n' +
        '}\n' +
        '@keyframes ' + animationId + ' {\n' +
        '  0% { ' + settings.property + ': ' + settings.from + '; }\n' +
        '  100% { ' + settings.property + ': ' + settings.to + '; }\n' +
        '}\n' +
        '#' + referenceId + ' {\n' +
        '  ' + settings.property + ': ' + expectation + ';\n' +
        '}\n';
      container.appendChild(stylesheet);

      assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]);
      assert_equals(getComputedStyle(target)[settings.property], expectation);

      container.removeChild(target);
      container.removeChild(reference);
      container.removeChild(stylesheet);
    }, 'Animation between "' + settings.from + '" and "' + settings.to + '" at progress ' + progress);
  }
}

function test_no_interpolation(settings) {
  const expectFrom = [-1, 0, 0.125].map(function (progress) {
    return {at: progress, expect: settings.from};
  });
  const expectTo = [0.875, 1, 2].map(function (progress) {
    return {at: progress, expect: settings.to};
  });

  test_interpolation(settings, expectFrom.concat(expectTo));
}