test/js/keyframes.js


function leftAsNumber(target) {
  var left = getComputedStyle(target).left;
  return Number(left.substring(0, left.length - 2));
}

suite('keyframes', function() {
  // Test normalize.
  test('Normalize keyframes with all offsets specified but not sorted by offset. Some offsets are out of [0, 1] range.', function() {
    var normalizedKeyframes;
    assert.throws(function() {
      normalizedKeyframes = normalizeKeyframes([
        {offset: 0},
        {offset: -1},
        {offset: 1},
        {offset: 0.5},
        {offset: 2}
      ]);
    });
  });

  test('Normalize keyframes with some offsets not specified, and not sorted by offset.', function() {
    assert.throws(function() {
      normalizeKeyframes([
        {offset: 0.5},
        {offset: 0},
        {offset: 0.8},
        {},
        {offset: 1}
      ]);
    });
  });

  test('Normalize keyframes with some offsets not specified, and not sorted by offset. Out of order keyframes are out of [0, 1] range.', function() {
    assert.throws(function() {
      normalizeKeyframes([
        {offset: 0},
        {offset: -1},
        {offset: 0.5},
        {},
        {offset: 1}
      ]);
    });
  });

  test('Normalize keyframes with some offsets not specified, but sorted by offset where specified. Some offsets are out of [0, 1] range.', function() {
    var normalizedKeyframes;
    assert.throws(function() {
      normalizedKeyframes = normalizeKeyframes([
        {offset: -1},
        {offset: 0},
        {offset: 0.5},
        {},
        {},
        {offset: 2}
      ]);
    });
  });

  test('Normalize keyframes with some offsets not specified, but sorted by offset where specified. All specified offsets in [0, 1] range.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([
        {left: '0px', offset: 0},
        {left: '10px'},
        {left: '20px'},
        {left: '30px', offset: 0.6},
        {left: '40px'},
        {left: '50px'}
      ]);
    });
    assert.equal(normalizedKeyframes.length, 6);
    assert.closeTo(normalizedKeyframes[0].offset, 0, 0.001);
    assert.equal(normalizedKeyframes[0].left, '0px');
    assert.closeTo(normalizedKeyframes[1].offset, 0.2, 0.001);
    assert.equal(normalizedKeyframes[1].left, '10px');
    assert.closeTo(normalizedKeyframes[2].offset, 0.4, 0.001);
    assert.equal(normalizedKeyframes[2].left, '20px');
    assert.closeTo(normalizedKeyframes[3].offset, 0.6, 0.001);
    assert.equal(normalizedKeyframes[3].left, '30px');
    assert.closeTo(normalizedKeyframes[4].offset, 0.8, 0.001);
    assert.equal(normalizedKeyframes[4].left, '40px');
    assert.closeTo(normalizedKeyframes[5].offset, 1, 0.001);
    assert.equal(normalizedKeyframes[5].left, '50px');
  });

  test('Normalize keyframes with no offsets specified.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([
        {left: '0px'},
        {left: '10px'},
        {left: '20px'},
        {left: '30px'},
        {left: '40px'}
      ]);
    });
    assert.equal(normalizedKeyframes.length, 5);
    assert.closeTo(normalizedKeyframes[0].offset, 0, 0.001);
    assert.equal(normalizedKeyframes[0].left, '0px');
    assert.closeTo(normalizedKeyframes[1].offset, 0.25, 0.001);
    assert.equal(normalizedKeyframes[1].left, '10px');
    assert.closeTo(normalizedKeyframes[2].offset, 0.5, 0.001);
    assert.equal(normalizedKeyframes[2].left, '20px');
    assert.closeTo(normalizedKeyframes[3].offset, 0.75, 0.001);
    assert.equal(normalizedKeyframes[3].left, '30px');
    assert.closeTo(normalizedKeyframes[4].offset, 1, 0.001);
    assert.equal(normalizedKeyframes[4].left, '40px');
  });

  test('Normalize keyframes where a keyframe has an offset that is not a number.', function() {
    assert.throws(function() {
      normalizeKeyframes([
        {offset: 0},
        {offset: 'one'},
        {offset: 1}
      ]);
    });
  });

  test('Normalize keyframes where a keyframe has an offset that is a numeric string.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([
        {offset: 0},
        {offset: '0.5'},
        {offset: 1}
      ]);
    });
    assert.equal(normalizedKeyframes.length, 3);
    assert.closeTo(normalizedKeyframes[0].offset, 0, 0.001);
    assert.closeTo(normalizedKeyframes[1].offset, 0.5, 0.001);
    assert.closeTo(normalizedKeyframes[2].offset, 1, 0.001);
  });

  test('Normalize keyframes where some keyframes have easings.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([
        {left: '0px', easing: 'ease-in'},
        {left: '10px'},
        {left: '0px'}
      ]);
    });
  });

  test('Normalize keyframes with invalid specified easing.', function() {
    var normalizedKeyframes;
    assert.throws(function() {
      normalizedKeyframes = normalizeKeyframes([
        {left: '0px', easing: 'easy-peasy'},
        {left: '10px'},
        {left: '0px'}
      ]);
    });
  });

  test('Normalize keyframes where some properties are given non-string, non-number values.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([
        {left: {}},
        {left: '100px'},
        {left: []}
      ]);
    });
    assert(normalizedKeyframes.length, 3);
    assert.equal(normalizedKeyframes[0].left, '[object Object]');
    assert.equal(normalizedKeyframes[1].left, '100px');
    assert.equal(normalizedKeyframes[2].left, '');
  });

  test('Normalize input that is not an array.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes({left: '10px'});
    });
    assert(normalizedKeyframes.length, 1);
    assert.equal(normalizedKeyframes[0].left, '10px');
  });

  test('Normalize object-form input.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes({left: ['10px', '100px']});
    });
    assert(normalizedKeyframes.length, 2);
    assert.equal(normalizedKeyframes[0].left, '10px');
    assert.equal(normalizedKeyframes[1].left, '100px');
  });

  test('Normalize an empty array.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([]);
    });
    assert.deepEqual(normalizedKeyframes, []);
  });

  test('Normalize null.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes(null);
    });
    assert.deepEqual(normalizedKeyframes, []);
  });

  test('Normalize shorthands.', function() {
    var normalizedKeyframes;
    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([{borderColor: 'purple green orange blue'}, {borderColor: 'red'}]);
    });
    assert.equal(normalizedKeyframes[0].borderTopColor, 'purple');
    assert.equal(normalizedKeyframes[0].borderRightColor, 'green');
    assert.equal(normalizedKeyframes[0].borderBottomColor, 'orange');
    assert.equal(normalizedKeyframes[0].borderLeftColor, 'blue');
    assert.equal(normalizedKeyframes[1].borderTopColor, 'red');
    assert.equal(normalizedKeyframes[1].borderRightColor, 'red');
    assert.equal(normalizedKeyframes[1].borderBottomColor, 'red');
    assert.equal(normalizedKeyframes[1].borderLeftColor, 'red');

    assert.doesNotThrow(function() {
      normalizedKeyframes = normalizeKeyframes([{font: 'italic bold 20pt / 200% serif'}, {font: 'italic normal bold 50pt serif'}]);
    });
    assert.equal(normalizedKeyframes[0].fontStyle, 'italic');
    assert.equal(normalizedKeyframes[0].fontVariant, 'normal');
    assert.equal(normalizedKeyframes[0].fontWeight, '700');
    assert.equal(normalizedKeyframes[0].fontSize, '20pt');
    assert.equal(normalizedKeyframes[0].lineHeight, '200%');
    assert.equal(normalizedKeyframes[0].fontFamily, 'serif');
    assert.equal(normalizedKeyframes[1].fontStyle, 'italic');
    assert.equal(normalizedKeyframes[1].fontVariant, 'normal');
    assert.equal(normalizedKeyframes[1].fontWeight, '700');
    assert.equal(normalizedKeyframes[1].fontSize, '50pt');
    assert.equal(normalizedKeyframes[1].lineHeight, 'normal');
    assert.equal(normalizedKeyframes[1].fontFamily, 'serif');
  });

  // Test makePropertySpecificKeyframeGroups.
  test('Make property specific keyframe groups for a simple keyframe list with one property.', function() {
    var groups;
    assert.doesNotThrow(function() {
      groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px'},
        {left: '200px', offset: 0.3},
        {left: '0px'}
      ]));
    });
    assert.equal(Object.getOwnPropertyNames(groups).length, 1);
    assert.equal(groups.left.length, 3);
    assert.closeTo(groups.left[0].offset, 0, 0.001);
    assert.equal(groups.left[0].value, '0px');
    assert.closeTo(groups.left[1].offset, 0.3, 0.001);
    assert.equal(groups.left[1].value, '200px');
    assert.closeTo(groups.left[2].offset, 1, 0.001);
    assert.equal(groups.left[2].value, '0px');
  });

  test('Make property specific keyframe groups for an keyframe list with three properties.', function() {
    var groups;
    assert.doesNotThrow(function() {
      groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px', top: '200px', opacity: 1},
        {left: '200px', top: '0px'},
        {left: '0px', top: '200px', opacity: 0},
        {top: '0px', opacity: 1},
        {left: '200px', top: '200px', opacity: 0}
      ]));
    });
    assert.equal(Object.getOwnPropertyNames(groups).length, 3);

    assert.equal(groups.left.length, 4);
    assert.closeTo(groups.left[0].offset, 0, 0.001);
    assert.equal(groups.left[0].value, '0px');
    assert.closeTo(groups.left[1].offset, 0.25, 0.001);
    assert.equal(groups.left[1].value, '200px');
    assert.closeTo(groups.left[2].offset, 0.5, 0.001);
    assert.equal(groups.left[2].value, '0px');
    assert.closeTo(groups.left[3].offset, 1, 0.001);
    assert.equal(groups.left[3].value, '200px');

    assert.equal(groups.top.length, 5);
    assert.closeTo(groups.top[0].offset, 0, 0.001);
    assert.equal(groups.top[0].value, '200px');
    assert.closeTo(groups.top[1].offset, 0.25, 0.001);
    assert.equal(groups.top[1].value, '0px');
    assert.closeTo(groups.top[2].offset, 0.5, 0.001);
    assert.equal(groups.top[2].value, '200px');
    assert.closeTo(groups.top[3].offset, 0.75, 0.001);
    assert.equal(groups.top[3].value, '0px');
    assert.closeTo(groups.top[4].offset, 1, 0.001);
    assert.equal(groups.top[4].value, '200px');

    assert.equal(groups.opacity.length, 4);
    assert.closeTo(groups.opacity[0].offset, 0, 0.001);
    assert.equal(groups.opacity[0].value, 1);
    assert.closeTo(groups.opacity[1].offset, 0.5, 0.001);
    assert.equal(groups.opacity[1].value, 0);
    assert.closeTo(groups.opacity[2].offset, 0.75, 0.001);
    assert.equal(groups.opacity[2].value, 1);
    assert.closeTo(groups.opacity[3].offset, 1, 0.001);
    assert.equal(groups.opacity[3].value, 0);
  });

  test('Make property specific keyframes when the offset of the last keyframe is specified but not equal to 1.', function() {
    assert.throws(function() {
      makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px', offset: 0},
        {left: '20px'},
        {left: '30px', offset: 0.9}
      ]));
    });
  });

  test('Make property specific keyframes when no properties are animated, and the offset of the last keyframe is specified but not equal to 1.', function() {
    var groups;
    assert.doesNotThrow(function() {
      groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {offset: 0},
        {},
        {offset: 0.9}
      ]));
    });
    assert.equal(Object.getOwnPropertyNames(groups).length, 0);
  });

  test('Make property specific keyframes when a property appears in some keyframes, but not in the last keyframe.', function() {
    assert.throws(function() {
      makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px', top: '0px'},
        {left: '10px', top: '10px'},
        {top: '20px'}
      ]));
    });
  });

  test('Make property specific keyframes when a property appears in some keyframes, but not in the first keyframe.', function() {
    assert.throws(function() {
      makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px'},
        {left: '10px', top: '10px'},
        {left: '20px', top: '20px'}
      ]));
    });
  });

  test('Make property specific keyframes where two properties are animated. One property in a keyframe with offset 1. One property in the last keyframe, with no offset.', function() {
    var groups;
    assert.doesNotThrow(function() {
      groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px', top: '0px', offset: 0},
        {left: '20px', offset: 1},
        {top: '20px'}
      ]));
    });
    assert.equal(Object.getOwnPropertyNames(groups).length, 2);
  });

  test('Make property specific keyframes where two properties are animated. One property in a keyframe with offset 0. One property in the first keyframe, with no offset.', function() {
    var groups;
    assert.doesNotThrow(function() {
      groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {top: '0px'},
        {left: '0px', offset: 0},
        {left: '20px', top: '20px', offset: 1}
      ]));
    });
    assert.equal(Object.getOwnPropertyNames(groups).length, 2);
  });

  // Test per-keyframe easings.
  test('Apply keyframe easings.', function() {
    var target1 = document.createElement('div');
    var target2 = document.createElement('div');
    target1.style.position = 'absolute';
    target2.style.position = 'absolute';
    document.body.appendChild(target1);
    document.body.appendChild(target2);

    var animation1 = target1.animate(
        [
          {left: '0px'},
          {left: '50px', offset: 0.25},
          {left: '0px'}
        ],
        {duration: 4000, fill: 'forwards'});
    var animation2 = target2.animate(
        [
          {left: '0px', easing: 'ease-in'},
          {left: '50px', offset: 0.25},
          {left: '0px'}
        ],
        {duration: 4000, fill: 'forwards'});

    tick(0);
    assert.equal(leftAsNumber(target1), 0);
    assert.equal(leftAsNumber(target2), 0);
    tick(250);
    assert.closeTo(leftAsNumber(target1), 12.5, 1);
    assert.closeTo(leftAsNumber(target2), 4.65, 1);
    tick(500);
    assert.closeTo(leftAsNumber(target1), 25, 1);
    assert.closeTo(leftAsNumber(target2), 15.25, 1);
    tick(1000);
    assert.equal(leftAsNumber(target1), 50);
    assert.equal(leftAsNumber(target2), 50);

    tick(2500);
    assert.equal(leftAsNumber(target1), 25);
    assert.equal(leftAsNumber(target2), 25);
    tick(4000);
    assert.equal(leftAsNumber(target1), 0);
    assert.equal(leftAsNumber(target2), 0);
  });

  // Test makeInterpolations.
  test('Make interpolations for a simple keyframe list with one property.', function() {
    var interpolations;
    assert.doesNotThrow(function() {
      interpolations = makeInterpolations(makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px'},
        {left: '200px', offset: 0.3},
        {left: '0px'}
      ])));
    });
    assert.equal(interpolations.length, 2);

    assert.equal(interpolations[0].applyFrom, -Infinity);
    assert.closeTo(interpolations[0].applyTo, 0.3, 0.001);
    assert.closeTo(interpolations[0].startOffset, 0, 0.001);
    assert.closeTo(interpolations[0].endOffset, 0.3, 0.001);
    assert.equal(interpolations[0].property, 'left');
    assert.equal(typeof interpolations[0].interpolation, 'function');

    assert.closeTo(interpolations[1].applyFrom, 0.3, 0.001);
    assert.equal(interpolations[1].applyTo, Infinity);
    assert.closeTo(interpolations[1].startOffset, 0.3, 0.001);
    assert.closeTo(interpolations[1].endOffset, 1, 0.001);
    assert.equal(interpolations[1].property, 'left');
    assert.equal(typeof interpolations[1].interpolation, 'function');
  });

  test('Make interpolations with invalid easing should throw.', function() {
    assert.throws(function() {
      makeInterpolations(makePropertySpecificKeyframeGroups(normalizeKeyframes([
        {left: '0px', easing: 'pants and ducks'},
        {left: '200px'},
      ])));
    });
  });
});

suite('keyframe-interpolations - convertEffectInput', function() {
  setup(function() {
    this.target = document.createElement('div');
    this.target.style.position = 'absolute';
    document.documentElement.appendChild(this.target);
  });
  teardown(function() {
    this.target.parentNode.removeChild(this.target);
  });

  test('Convert effect input for a simple keyframe list with one property.', function() {
    var keyframeInterpolations;
    assert.doesNotThrow(function() {
      keyframeInterpolations = webAnimations1.convertEffectInput([
        {left: '0px'},
        {left: '200px', offset: 0.3},
        {left: '100px'}
      ]);
    });

    keyframeInterpolations(this.target, 0);
    assert.closeTo(leftAsNumber(this.target), 0, 0.001);
    keyframeInterpolations(this.target, 0.075);
    assert.closeTo(leftAsNumber(this.target), 50, 0.001);
    keyframeInterpolations(this.target, 0.15);
    assert.closeTo(leftAsNumber(this.target), 100, 0.001);
    keyframeInterpolations(this.target, 0.65);
    assert.closeTo(leftAsNumber(this.target), 150, 0.001);
    keyframeInterpolations(this.target, 1);
    assert.closeTo(leftAsNumber(this.target), 100, 0.001);
    keyframeInterpolations(this.target, 2);
    assert.closeTo(leftAsNumber(this.target), -42.856, 0.01);
  });

  test('Convert effect input where one property is animated and the property has two keyframes at offset 1.', function() {
    var keyframeInterpolations;
    assert.doesNotThrow(function() {
      keyframeInterpolations = webAnimations1.convertEffectInput([
        {left: '0px', offset: 0},
        {left: '20px', offset: 1},
        {left: '30px'}
      ]);
    });
    keyframeInterpolations(this.target, 1);
    assert.equal(getComputedStyle(this.target).left, '30px');
    keyframeInterpolations(this.target, 2);
    assert.equal(getComputedStyle(this.target).left, '30px');
  });

  test('Convert effect input and apply result at fraction null.', function() {
    var keyframeInterpolations;
    var underlying = getComputedStyle(this.target).left;
    assert.doesNotThrow(function() {
      keyframeInterpolations = webAnimations1.convertEffectInput([
        {left: '0px'},
        {left: '100px'}
      ]);
    });

    keyframeInterpolations(this.target, 1);
    assert.equal(getComputedStyle(this.target).left, '100px');
    keyframeInterpolations(this.target, null);
    assert.equal(getComputedStyle(this.target).left, underlying);
  });
});