Makefile

@@ -1,2 +1,5 @@
 all:
 	python -m SimpleHTTPServer 3000
+
+test:
+	grunt

build/node.js

@@ -60,7 +60,14 @@ GradientParser.stringify = (function() {
     },
 
     'visit_extent-keyword': function(node) {
-      return node.value;
+      var result = node.value,
+          at = visitor.visit(node.at);
+
+      if (at) {
+        result += ' at ' + at;
+      }
+
+      return result;
     },
 
     'visit_position-keyword': function(node) {
@@ -310,12 +317,21 @@ GradientParser.parse = (function() {
     if (radialType) {
       radialType.at = matchAtPosition();
     } else {
-      var defaultPosition = matchPositioning();
+      var extent = matchExtentKeyword();
-      if (defaultPosition) {
+      if (extent) {
-        radialType = {
+        radialType = extent;
-          type: 'default-radial',
+        var positionAt = matchAtPosition();
-          at: defaultPosition
+        if (positionAt) {
-        };
+          radialType.at = positionAt;
+        }
+      } else {
+        var defaultPosition = matchPositioning();
+        if (defaultPosition) {
+          radialType = {
+            type: 'default-radial',
+            at: defaultPosition
+          };
+        }
       }
     }
 

build/web.js

@@ -153,12 +153,21 @@ GradientParser.parse = (function() {
     if (radialType) {
       radialType.at = matchAtPosition();
     } else {
-      var defaultPosition = matchPositioning();
+      var extent = matchExtentKeyword();
-      if (defaultPosition) {
+      if (extent) {
-        radialType = {
+        radialType = extent;
-          type: 'default-radial',
+        var positionAt = matchAtPosition();
-          at: defaultPosition
+        if (positionAt) {
-        };
+          radialType.at = positionAt;
+        }
+      } else {
+        var defaultPosition = matchPositioning();
+        if (defaultPosition) {
+          radialType = {
+            type: 'default-radial',
+            at: defaultPosition
+          };
+        }
       }
     }
 
@@ -400,7 +409,14 @@ GradientParser.stringify = (function() {
     },
 
     'visit_extent-keyword': function(node) {
-      return node.value;
+      var result = node.value,
+          at = visitor.visit(node.at);
+
+      if (at) {
+        result += ' at ' + at;
+      }
+
+      return result;
     },
 
     'visit_position-keyword': function(node) {

lib/parser.js

@@ -151,12 +151,21 @@ GradientParser.parse = (function() {
     if (radialType) {
       radialType.at = matchAtPosition();
     } else {
-      var defaultPosition = matchPositioning();
+      var extent = matchExtentKeyword();
-      if (defaultPosition) {
+      if (extent) {
-        radialType = {
+        radialType = extent;
-          type: 'default-radial',
+        var positionAt = matchAtPosition();
-          at: defaultPosition
+        if (positionAt) {
-        };
+          radialType.at = positionAt;
+        }
+      } else {
+        var defaultPosition = matchPositioning();
+        if (defaultPosition) {
+          radialType = {
+            type: 'default-radial',
+            at: defaultPosition
+          };
+        }
       }
     }
 

lib/stringify.js

@@ -60,7 +60,14 @@ GradientParser.stringify = (function() {
     },
 
     'visit_extent-keyword': function(node) {
-      return node.value;
+      var result = node.value,
+          at = visitor.visit(node.at);
+
+      if (at) {
+        result += ' at ' + at;
+      }
+
+      return result;
     },
 
     'visit_position-keyword': function(node) {

spec/parser.spec.js

@@ -197,7 +197,10 @@ describe('lib/parser.js', function () {
       'ellipse cover',
       'circle cover',
       'center bottom, ellipse cover',
-      'circle at 87.23px -58.3px'
+      'circle at 87.23px -58.3px',
+      'farthest-side, red, blue',
+      'farthest-corner, red, blue',
+      'farthest-corner at 87.23px -58.3px, red, blue'
     ].forEach(function(declaration) {
 
       it('should parse ' + declaration + ' declaration', function() {

spec/stringify.spec.js

@@ -79,7 +79,9 @@ describe('lib/stringify.js', function () {
         'ellipse cover',
         'circle cover',
         'center bottom, ellipse cover',
-        'circle at 87.23px -58.3px'
+        'circle at 87.23px -58.3px',
+        'farthest-corner, red, blue',
+        'farthest-corner at 87.23px -58.3px, red, blue'
       ].forEach(function(declaration) {
 
         it('should parse ' + declaration + ' declaration', function() {