Add apply ranges to interpolations

src/keyframe-interpolations.js

@@ -21,12 +21,10 @@
     return function(target, fraction) {
       if (fraction != null) {
         interpolations.filter(function(interpolation) {
-          return (fraction <= 0 && interpolation.startTime == 0) ||
-                 (fraction >= 1 && interpolation.endTime == 1) ||
-                 (fraction >= interpolation.startTime && fraction <= interpolation.endTime);
+          return fraction >= interpolation.applyFrom && fraction < interpolation.applyTo;
         }).forEach(function(interpolation) {
-          var offsetFraction = fraction - interpolation.startTime;
-          var localDuration = interpolation.endTime - interpolation.startTime;
+          var offsetFraction = fraction - interpolation.startOffset;
+          var localDuration = interpolation.endOffset - interpolation.startOffset;
           var scaledLocalTime = localDuration == 0 ? 0 : interpolation.easing(offsetFraction / localDuration);
           scope.apply(target, interpolation.property, interpolation.interpolation(scaledLocalTime));
         });
@@ -75,29 +73,44 @@
     for (var groupName in propertySpecificKeyframeGroups) {
       var keyframes = propertySpecificKeyframeGroups[groupName];
       for (var i = 0; i < keyframes.length - 1; i++) {
-        var startTime = keyframes[i].offset;
-        var endTime = keyframes[i + 1].offset;
-        var startValue = keyframes[i].value;
-        var endValue = keyframes[i + 1].value;
-        var easing = keyframes[i].easing;
-        if (startTime == endTime) {
-          if (endTime == 1) {
-            startValue = endValue;
-          } else {
-            endValue = startValue;
+        var startIndex = i;
+        var endIndex = i + 1;
+        var startOffset = keyframes[startIndex].offset;
+        var endOffset = keyframes[endIndex].offset;
+        var applyFrom = startOffset;
+        var applyTo = endOffset;
+
+        if (i == 0) {
+          applyFrom = -Infinity;
+          WEB_ANIMATIONS_TESTING && console.assert(startOffset == 0);
+          if (endOffset == 0) {
+            endIndex = startIndex;
+          }
+        }
+        if (i == keyframes.length - 2) {
+          applyTo = Infinity;
+          WEB_ANIMATIONS_TESTING && console.assert(endOffset == 1);
+          if (startOffset == 1) {
+            startIndex = endIndex;
           }
         }
+
+        var easing = keyframes[startIndex].easing;
         interpolations.push({
-          startTime: startTime,
-          endTime: endTime,
+          applyFrom: applyFrom,
+          applyTo: applyTo,
+          startOffset: keyframes[startIndex].offset,
+          endOffset: keyframes[endIndex].offset,
           easing: shared.toTimingFunction(easing ? easing : 'linear'),
           property: groupName,
-          interpolation: scope.propertyInterpolation(groupName, startValue, endValue)
+          interpolation: scope.propertyInterpolation(groupName,
+              keyframes[startIndex].value,
+              keyframes[endIndex].value)
         });
       }
     }
     interpolations.sort(function(leftInterpolation, rightInterpolation) {
-      return leftInterpolation.startTime - rightInterpolation.startTime;
+      return leftInterpolation.startOffset - rightInterpolation.startOffset;
     });
     return interpolations;
   }

test/js/keyframes.js

@@ -431,13 +431,17 @@ suite('keyframes', function() {
     });
     assert.equal(interpolations.length, 2);
 
-    assert.closeTo(interpolations[0].startTime, 0, 0.001);
-    assert.closeTo(interpolations[0].endTime, 0.3, 0.001);
+    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].startTime, 0.3, 0.001);
-    assert.closeTo(interpolations[1].endTime, 1, 0.001);
+    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/web-platform-tests-expectations.js

@@ -13,11 +13,6 @@ module.exports = {
 
   flakyTestIndicator: 'FLAKY_TEST_RESULT',
   expectedFailures: {
-    'test/web-platform-tests/web-animations/animation-model/keyframe-effects/the-effect-value-of-a-keyframe-effect.html': {
-      'Overlapping keyframes at 0 and 1 use the appropriate value when the progress is outside the range [0, 1]':
-          'assert_equals: When progress is negative, the first keyframe with a 0 offset should be used expected "0" but got "0.151"',
-    },
-
     'test/web-platform-tests/web-animations/interfaces/Animatable/animate-basic.html': {
       'Element.animate() creates an Animation object':
           'assert_equals: Returned object is an Animation expected "[object Animation]" but got "[object Object]"',