From 121bdd836505df43fa7b7f0bdfab0b70908cc1a4 Mon Sep 17 00:00:00 2001 From: Bass Jobsen Date: Wed, 11 Feb 2015 20:35:28 +0100 Subject: [PATCH] allow a list of colors as argument for the svg-gradient function --- lib/less/functions/svg.js | 30 ++++++++++++++++++----------- test/browser/less/urls.less | 8 +++++++- test/less/errors/svg-gradient2.txt | 2 +- test/less/errors/svg-gradient3.txt | 2 +- test/less/errors/svg-gradient4.less | 4 ++++ test/less/errors/svg-gradient4.txt | 4 ++++ test/less/errors/svg-gradient5.less | 4 ++++ test/less/errors/svg-gradient5.txt | 4 ++++ test/less/errors/svg-gradient6.less | 4 ++++ test/less/errors/svg-gradient6.txt | 4 ++++ 10 files changed, 52 insertions(+), 14 deletions(-) create mode 100644 test/less/errors/svg-gradient4.less create mode 100644 test/less/errors/svg-gradient4.txt create mode 100644 test/less/errors/svg-gradient5.less create mode 100644 test/less/errors/svg-gradient5.txt create mode 100644 test/less/errors/svg-gradient6.less create mode 100644 test/less/errors/svg-gradient6.txt diff --git a/lib/less/functions/svg.js b/lib/less/functions/svg.js index a3a080c1d..ef5e84b96 100644 --- a/lib/less/functions/svg.js +++ b/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": diff --git a/test/browser/less/urls.less b/test/browser/less/urls.less index 057846105..7de201ad8 100644 --- a/test/browser/less/urls.less +++ b/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%); } diff --git a/test/less/errors/svg-gradient2.txt b/test/less/errors/svg-gradient2.txt index 7004115f7..1f2e1bfc9 100644 --- a/test/less/errors/svg-gradient2.txt +++ b/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 } diff --git a/test/less/errors/svg-gradient3.txt b/test/less/errors/svg-gradient3.txt index eb0b483e3..f77a353ac 100644 --- a/test/less/errors/svg-gradient3.txt +++ b/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 } diff --git a/test/less/errors/svg-gradient4.less b/test/less/errors/svg-gradient4.less new file mode 100644 index 000000000..ae32ceb6b --- /dev/null +++ b/test/less/errors/svg-gradient4.less @@ -0,0 +1,4 @@ +.a { + a: svg-gradient(horizontal, @colors); +} +@colors: black, white; diff --git a/test/less/errors/svg-gradient4.txt b/test/less/errors/svg-gradient4.txt new file mode 100644 index 000000000..c0d41e94f --- /dev/null +++ b/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 } diff --git a/test/less/errors/svg-gradient5.less b/test/less/errors/svg-gradient5.less new file mode 100644 index 000000000..6b5ac2cbc --- /dev/null +++ b/test/less/errors/svg-gradient5.less @@ -0,0 +1,4 @@ +.a { + a: svg-gradient(to bottom, @colors); +} +@colors: black, orange, 45%, white; diff --git a/test/less/errors/svg-gradient5.txt b/test/less/errors/svg-gradient5.txt new file mode 100644 index 000000000..41f8f46f2 --- /dev/null +++ b/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 } diff --git a/test/less/errors/svg-gradient6.less b/test/less/errors/svg-gradient6.less new file mode 100644 index 000000000..fca76e638 --- /dev/null +++ b/test/less/errors/svg-gradient6.less @@ -0,0 +1,4 @@ +.a { + a: svg-gradient(black, @colors); +} +@colors: orange; diff --git a/test/less/errors/svg-gradient6.txt b/test/less/errors/svg-gradient6.txt new file mode 100644 index 000000000..2ce85cf6b --- /dev/null +++ b/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 }