interpolation-test-common.js

Enable keyboard shortcuts

'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));