Parse metric values for gradients

gradient-parser.js

@@ -27,6 +27,8 @@ module.exports = (function() {
     radialGradient: /^radial\-gradient/i,
     sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,
     pixelValue: /^([0-9]+)px/,
+    percentageValue: /^([0-9]+)\%/,
+    emValue: /^([0-9]+)em/,
     startCall: /^\(/,
     endCall: /^\)/,
     comma: /^,/
@@ -38,7 +40,7 @@ module.exports = (function() {
   function error(msg) {
     var err = new Error(input + ':' + cursor + ': ' + msg);
     err.position = cursor;
-    err.message = msg;
+    //err.message = msg;
     err.source = input;
     throw err;
   }
@@ -79,8 +81,8 @@ module.exports = (function() {
             matchOrientation);
   }
 
-  function matchGradient(gradientType, token, orientationMatcher) {
+  function matchGradient(gradientType, pattern, orientationMatcher) {
-    var captures = scan(token),
+    var captures = scan(pattern),
       orientation,
       colorStops;
 
@@ -174,14 +176,16 @@ module.exports = (function() {
   }
 
   function matchLength() {
-    return matchPixel();
+    return matchMetric(tokens.pixelValue, 'px') ||
+      matchMetric(tokens.percentageValue, '%') ||
+      matchMetric(tokens.emValue, 'em');
   }
 
-  function matchPixel() {
+  function matchMetric(pattern, metric) {
-    var captures = scan(tokens.pixelValue);
+    var captures = scan(pattern);
     if (captures) {
       return {
-        type: 'px',
+        type: metric,
         value: captures[1]
       };
     }

spec/gradient-parser.spec.js

@@ -39,44 +39,44 @@ describe('gradient-parser.js', function () {
     expect(typeof gradientParser).to.equal('function');
   });
 
-  describe('when parsing wrong definition should throw an error', function() {
+  describe('error cases', function() {
-    it('when there\'s one more comma in definitions', function() {
+    it('one more comma in definitions', function() {
       expect(function() {
         gradientParser('linear-gradient(red, blue),');
       }).to.throwException(/One extra comma/);
     });
 
-    it('when there\'s one more comma in colors', function() {
+    it('one more comma in colors', function() {
       expect(function() {
         gradientParser('linear-gradient(red, blue,)');
       }).to.throwException(/Expected color definition/);
     });
 
-    it('when there\'s invalid input', function() {
+    it('invalid input', function() {
       expect(function() {
         gradientParser('linear-gradient(red, blue) aaa');
       }).to.throwException(/Invalid input not EOF/);
     });
 
-    it('when there\'s missing open call', function() {
+    it('missing open call', function() {
       expect(function() {
         gradientParser('linear-gradient red, blue');
       }).to.throwException(/Missing \(/);
     });
 
-    it('when there\'s missing comma before color stops', function() {
+    it('missing comma before color stops', function() {
       expect(function() {
         gradientParser('linear-gradient(to right red, blue)');
       }).to.throwException(/Missing comma before color stops/);
     });
 
-    it('when there\'s missing color stops', function() {
+    it('missing color stops', function() {
       expect(function() {
         gradientParser('linear-gradient(to right, )');
       }).to.throwException(/Expected color definition/);
     });
 
-    it('when there\'s missing closing call', function() {
+    it('missing closing call', function() {
       expect(function() {
         gradientParser('linear-gradient(to right, red, blue aaa');
       }).to.throwException(/Missing \)/);
@@ -132,20 +132,22 @@ describe('gradient-parser.js', function () {
     });
   });
 
-  describe('parse an definition with full color stop', function() {
+  ['px', 'em', '%'].forEach(function(metric) {
-    beforeEach(function() {
+    describe('parse color stop for metric '+ metric, function() {
-      ast = gradientParser('linear-gradient(blue 10px, transparent)');
-      subject = ast[0];
-    });
-
-    describe('the first color', function() {
       beforeEach(function() {
-        subject = subject.colorStops[0];
+        ast = gradientParser('linear-gradient(blue 10' + metric + ', transparent)');
+        subject = ast[0];
       });
 
-      it('should have the length', function() {
+      describe('the first color', function() {
-        expect(subject.length.type).to.equal('px');
+        beforeEach(function() {
-        expect(subject.length.value).to.equal('10');
+          subject = subject.colorStops[0];
+        });
+
+        it('should have the length', function() {
+          expect(subject.length.type).to.equal(metric);
+          expect(subject.length.value).to.equal('10');
+        });
       });
     });
   });