Merge pull request #484 from ewilligers/additional-color-properties

Support animation of SVG color properties
web-animations · Sep 17, 2016 · b7c0cef · b7c0cef
2 parents fd1f41b + 027c534
commit b7c0cef
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/color-handler.js b/src/color-handler.js
@@ -52,7 +52,8 @@
 
   scope.addPropertiesHandler(parseColor, mergeColors,
       ['background-color', 'border-bottom-color', 'border-left-color', 'border-right-color',
-       'border-top-color', 'color', 'outline-color', 'text-decoration-color']);
+       'border-top-color', 'color', 'fill', 'flood-color', 'lighting-color',
+       'outline-color', 'stop-color', 'stroke', 'text-decoration-color']);
   scope.consumeColor = scope.consumeParenthesised.bind(null, parseColor);
   scope.mergeColors = mergeColors;
 

diff --git a/test/js/color-handler.js b/test/js/color-handler.js
@@ -20,6 +20,13 @@ suite('color-handler', function() {
     assert.equal(webAnimations1.propertyInterpolation('color', 'red', 'green')(2), 'rgba(0,255,0,1)');
     assert.equal(webAnimations1.propertyInterpolation('color', 'red', 'green')(-1), 'rgba(255,0,0,1)');
   });
+  test('svg color interpolation', function() {
+    assert.equal(webAnimations1.propertyInterpolation('fill', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)');
+    assert.equal(webAnimations1.propertyInterpolation('floodColor', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)');
+    assert.equal(webAnimations1.propertyInterpolation('lightingColor', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)');
+    assert.equal(webAnimations1.propertyInterpolation('stopColor', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)');
+    assert.equal(webAnimations1.propertyInterpolation('stroke', '#00fe00', '#180036')(0.5), 'rgba(12,127,27,1)');
+  });
   test('interpolation to/from initial', function() {
     assert.equal(webAnimations1.propertyInterpolation('backgroundColor', 'initial', 'red')(0.5), 'rgba(255,0,0,0.500)');
   });