strokeDasharray

Author: alancutter

src/number-handler.js

@@ -16,7 +16,7 @@
 (function(scope, testing) {
 
   function numberToString(x) {
-    return x.toFixed(3).replace('.000', '');
+    return x.toFixed(3).replace(/0+$/, '').replace(/\.$/, '');
   }
 
   function clamp(min, max, x) {
@@ -53,18 +53,45 @@
     };
   }
 
+  function parseNumberList(string) {
+    var items = string.trim().split(/\s*[\s,]\s*/);
+    if (items.length === 0) {
+      return;
+    }
+    var result = [];
+    for (var i = 0; i < items.length; i++) {
+      var number = parseNumber(items[i]);
+      if (number === undefined) {
+        return;
+      }
+      result.push(number);
+    }
+    return result;
+  }
+
+  function mergeNumberLists(left, right) {
+    if (left.length != right.length) {
+      return;
+    }
+    return [left, right, function(numberList) {
+      return numberList.map(numberToString).join(' ');
+    }];
+  }
+
   function round(left, right) {
     return [left, right, Math.round];
   }
 
   scope.clamp = clamp;
+  scope.addPropertiesHandler(parseNumberList, mergeNumberLists, ['stroke-dasharray']);
   scope.addPropertiesHandler(parseNumber, clampedMergeNumbers(0, Infinity), ['border-image-width', 'line-height']);
   scope.addPropertiesHandler(parseNumber, clampedMergeNumbers(0, 1), ['opacity', 'shape-image-threshold']);
   scope.addPropertiesHandler(parseNumber, mergeFlex, ['flex-grow', 'flex-shrink']);
   scope.addPropertiesHandler(parseNumber, mergePositiveIntegers, ['orphans', 'widows']);
   scope.addPropertiesHandler(parseNumber, round, ['z-index']);
 
   scope.parseNumber = parseNumber;
+  scope.parseNumberList = parseNumberList;
   scope.mergeNumbers = mergeNumbers;
   scope.numberToString = numberToString;
 

src/property-interpolation.js

@@ -79,6 +79,7 @@
     paddingRight: '0px',
     paddingTop: '0px',
     right: 'auto',
+    strokeDasharray: 'none',
     strokeDashoffset: '0px',
     textIndent: '0px',
     textShadow: '0px 0px 0px transparent',

test/js/box-handler.js

@@ -46,7 +46,7 @@ suite('box-handler', function() {
         'Round interpolation result');
     assert.equal(
         webAnimations1.propertyInterpolation('clip', 'rect(10px, 10px, 10px, 10px)', 'rect(20px, 20px, 20px, 20px)')(0.25),
-        'rect(12.500px, 12.500px, 12.500px, 12.500px)',
+        'rect(12.5px, 12.5px, 12.5px, 12.5px)',
         'Round interpolation result');
     assert.equal(
         webAnimations1.propertyInterpolation('clip', 'rect(10px, 10%, 10px, 10%)', 'rect(10em, 10px, 10em, 10px)')(0.4),

test/js/color-handler.js

@@ -16,7 +16,7 @@ suite('color-handler', function() {
   test('color interpolation', function() {
     assert.equal(webAnimations1.propertyInterpolation('color', '#00aa11', '#aa00bb')(0.2), 'rgba(34,136,51,1)');
     assert.equal(webAnimations1.propertyInterpolation('color', 'transparent', '#004488')(0), 'transparent');
-    assert.equal(webAnimations1.propertyInterpolation('color', 'transparent', '#004488')(0.5), 'rgba(0,68,136,0.500)');
+    assert.equal(webAnimations1.propertyInterpolation('color', 'transparent', '#004488')(0.5), 'rgba(0,68,136,0.5)');
     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)');
   });
@@ -28,6 +28,6 @@ suite('color-handler', function() {
     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)');
+    assert.equal(webAnimations1.propertyInterpolation('backgroundColor', 'initial', 'red')(0.5), 'rgba(255,0,0,0.5)');
   });
 });

test/js/dimension-handler.js

@@ -43,7 +43,7 @@ suite('dimension-handler', function() {
     assert.equal(webAnimations1.propertyInterpolation('left', '10px', '50px')(0.25), '20px');
     assert.equal(webAnimations1.propertyInterpolation('left', '10%', '50%')(0.25), '20%');
     assert.equal(webAnimations1.propertyInterpolation('left', '0px', '0.001px')(0.05), '0px');
-    assert.equal(webAnimations1.propertyInterpolation('left', '0px', '10px')(0.234), '2.340px');
+    assert.equal(webAnimations1.propertyInterpolation('left', '0px', '10px')(0.234), '2.34px');
     assert.equal(webAnimations1.propertyInterpolation('left', '10px', '10em')(0.4), 'calc(6px + 4em)');
     assert.equal(webAnimations1.propertyInterpolation('left', '10px', '10%')(0.4), 'calc(6px + 4%)');
     assert.equal(webAnimations1.propertyInterpolation('left', 'calc(10px + 5em)', 'calc(20px + 35em)')(0.4), 'calc(14px + 17em)');

test/js/number-handler.js

@@ -19,13 +19,20 @@ suite('number-handler', function() {
       assert.equal(webAnimations1.parseNumber(string), tests[string], 'Parsing "' + string + '"');
     }
   });
+  test('number list interpolation', function() {
+    assert.equal(webAnimations1.propertyInterpolation('strokeDasharray', '10', '20')(0.25), '12.5');
+    assert.equal(webAnimations1.propertyInterpolation('strokeDasharray', '10 100', '20 200')(0.25), '12.5 125');
+    assert.equal(webAnimations1.propertyInterpolation('strokeDasharray', '10, 100', '20, 200')(0.25), '12.5 125');
+    assert.equal(webAnimations1.propertyInterpolation('strokeDasharray', '10,100', '20 200')(0.25), '12.5 125');
+  });
   test('invalid numbers fail to parse', function() {
     assert.isUndefined(webAnimations1.parseNumber(''));
     assert.isUndefined(webAnimations1.parseNumber('nine'));
     assert.isUndefined(webAnimations1.parseNumber('1 2'));
     assert.isUndefined(webAnimations1.parseNumber('+-0'));
     assert.isUndefined(webAnimations1.parseNumber('50px'));
     assert.isUndefined(webAnimations1.parseNumber('1.2.3'));
+    assert.isUndefined(webAnimations1.parseNumberList('10,,20'));
   });
   test('opacity clamping', function() {
     var interpolation = webAnimations1.propertyInterpolation('opacity', '0', '1');