Merge pull request #2445 from bassjobsen/svg-gradient

allow a list of colors as argument for the svg-gradient function

lib/less/functions/svg.js

@@ -8,23 +8,31 @@ module.exports = function(environment) {
 
     functionRegistry.add("svg-gradient", function(direction) {
 
-        function throwArgumentDescriptor() {
-            throw { type: "Argument",
-                message: "svg-gradient expects direction, start_color [start_position], [color position,]...," +
-                    " end_color [end_position]" };
-        }
-
-        if (arguments.length < 3) {
-            throwArgumentDescriptor();
-        }
-        var stops = Array.prototype.slice.call(arguments, 1),
+        var stops,
             gradientDirectionSvg,
             gradientType = "linear",
             rectangleDimension = 'x="0" y="0" width="1" height="1"',
             renderEnv = {compress: false},
             returner,
             directionValue = direction.toCSS(renderEnv),
-            i, color, position, positionValue, alpha;
+			i, color, position, positionValue, alpha;
+
+        function throwArgumentDescriptor() {
+            throw { type: "Argument",
+					message: "svg-gradient expects direction, start_color [start_position], [color position,]...," +
+							" end_color [end_position] or direction, color list" };
+        }
+
+        if (arguments.length == 2) {
+            if (arguments[1].value.length < 2) {
+                throwArgumentDescriptor();
+            }
+            stops = arguments[1].value;
+        } else if (arguments.length < 3) {
+            throwArgumentDescriptor();
+        } else {
+            stops = Array.prototype.slice.call(arguments, 1);
+        }
 
         switch (directionValue) {
             case "to bottom":

test/browser/less/urls.less

@@ -50,10 +50,16 @@
   uri: data-uri('../../data/data-uri-fail.png');
 }
 #svg-functions {
-  background-image: svg-gradient(to bottom, black, white);
+  @colorlist1: black, white;
+  background-image: svg-gradient(to bottom, @colorlist1);
+  background-image: svg-gradient(to bottom, black white);
   background-image: svg-gradient(to bottom, black, orange 3%, white);
+  @colorlist2: black, orange 3%, white;
+  background-image: svg-gradient(to bottom, @colorlist2);
   @green_5: green 5%;
   @orange_percentage: 3%;
   @orange_color: orange;
+  @colorlist3: (mix(black, white) + #444) 1%, @orange_color @orange_percentage, ((@green_5)), white 95%;
+  background-image: svg-gradient(to bottom,@colorlist3);
   background-image: svg-gradient(to bottom, (mix(black, white) + #444) 1%, @orange_color @orange_percentage, ((@green_5)), white 95%);
 }

test/less/errors/svg-gradient2.txt

@@ -1,4 +1,4 @@
-ArgumentError: error evaluating function `svg-gradient`: svg-gradient expects direction, start_color [start_position], [color position,]..., end_color [end_position] in {path}svg-gradient2.less on line 2, column 6:
+ArgumentError: error evaluating function `svg-gradient`: svg-gradient expects direction, start_color [start_position], [color position,]..., end_color [end_position] or direction, color list in {path}svg-gradient2.less on line 2, column 6:
 1 .a {
 2   a: svg-gradient(to bottom, black, orange, 45%, white);
 3 }

test/less/errors/svg-gradient3.txt

@@ -1,4 +1,4 @@
-ArgumentError: error evaluating function `svg-gradient`: svg-gradient expects direction, start_color [start_position], [color position,]..., end_color [end_position] in {path}svg-gradient3.less on line 2, column 6:
+ArgumentError: error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient3.less on line 2, column 6:
 1 .a {
 2   a: svg-gradient(black, orange);
 3 }

test/less/errors/svg-gradient4.less

@@ -0,0 +1,4 @@
+.a {
+  a: svg-gradient(horizontal, @colors);
+}
+@colors: black, white;

test/less/errors/svg-gradient4.txt

@@ -0,0 +1,4 @@
+ArgumentError: error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient4.less on line 2, column 6:
+1 .a {
+2   a: svg-gradient(horizontal, @colors);
+3 }

test/less/errors/svg-gradient5.less

@@ -0,0 +1,4 @@
+.a {
+  a: svg-gradient(to bottom, @colors);
+}
+@colors: black, orange, 45%, white;

test/less/errors/svg-gradient5.txt

@@ -0,0 +1,4 @@
+ArgumentError: error evaluating function `svg-gradient`: svg-gradient expects direction, start_color [start_position], [color position,]..., end_color [end_position] or direction, color list in {path}svg-gradient5.less on line 2, column 6:
+1 .a {
+2   a: svg-gradient(to bottom, @colors);
+3 }

test/less/errors/svg-gradient6.less

@@ -0,0 +1,4 @@
+.a {
+  a: svg-gradient(black, @colors);
+}
+@colors: orange;

test/less/errors/svg-gradient6.txt

@@ -0,0 +1,4 @@
+ArgumentError: error evaluating function `svg-gradient`: svg-gradient direction must be 'to bottom', 'to right', 'to bottom right', 'to top right' or 'ellipse at center' in {path}svg-gradient6.less on line 2, column 6:
+1 .a {
+2   a: svg-gradient(black, @colors);
+3 }