Merge pull request #1737 from seven-phases-max/clamped-rgba-output

Clamped rgba format color output

lib/less/functions.js

@@ -306,7 +306,6 @@ tree.functions = {
     },
     argb: function (color) {
         return new(tree.Anonymous)(color.toARGB());
-
     },
     percentage: function (n) {
         return new(tree.Dimension)(n.value * 100, '%');

lib/less/tree/color.js

@@ -40,13 +40,14 @@ tree.Color.prototype = {
         // is via `rgba`. Otherwise, we use the hex representation,
         // which has better compatibility with older browsers.
         // Values are capped between `0` and `255`, rounded and zero-padded.
-        if (this.alpha < 1.0) {
+        if (this.alpha < 1) {
             if (this.alpha === 0 && this.isTransparentKeyword) {
                 return transparentKeyword;
             }
             return "rgba(" + this.rgb.map(function (c) {
-                return Math.round(c);
-            }).concat(this.alpha).join(',' + (compress ? '' : ' ')) + ")";
+                return clamp(Math.round(c), 255);
+            }).concat(clamp(this.alpha, 1))
+                .join(',' + (compress ? '' : ' ')) + ")";
         } else {
             var color = this.toRGB();
 
@@ -79,11 +80,7 @@ tree.Color.prototype = {
     },
 
     toRGB: function () {
-        return '#' + this.rgb.map(function (i) {
-            i = Math.round(i);
-            i = (i > 255 ? 255 : (i < 0 ? 0 : i)).toString(16);
-            return i.length === 1 ? '0' + i : i;
-        }).join('');
+        return toHex(this.rgb);
     },
 
     toHSL: function () {
@@ -139,12 +136,7 @@ tree.Color.prototype = {
         return { h: h * 360, s: s, v: v, a: a };
     },
     toARGB: function () {
-        var argb = [Math.round(this.alpha * 255)].concat(this.rgb);
-        return '#' + argb.map(function (i) {
-            i = Math.round(i);
-            i = (i > 255 ? 255 : (i < 0 ? 0 : i)).toString(16);
-            return i.length === 1 ? '0' + i : i;
-        }).join('');
+        return toHex([this.alpha * 255].concat(this.rgb));
     },
     compare: function (x) {
         if (!x.rgb) {
@@ -170,5 +162,15 @@ tree.Color.fromKeyword = function(keyword) {
     }
 };
 
+function toHex(v) {
+    return '#' + v.map(function (c) {
+        c = clamp(Math.round(c), 255);
+        return (c < 16 ? '0' : '') + c.toString(16);
+    }).join('');
+}
+
+function clamp(v, max) {
+    return Math.min(Math.max(v, 0), max); 
+}
 
 })(require('../tree'));

test/css/colors.css

@@ -37,6 +37,9 @@
 #overflow .d {
   color: #00ff00;
 }
+#overflow .e {
+  color: rgba(0, 31, 255, 0.42);
+}
 #grey {
   color: #c8c8c8;
 }

test/less/colors.less

@@ -37,6 +37,7 @@
   .b { color: (#eee + #fff); } // #ffffff
   .c { color: (#aaa * 3); } // #ffffff
   .d { color: (#00ee00 + #009900); } // #00ff00
+  .e { color: rgba(-99.9, 31.4159, 321, 0.42); }  
 }
 
 #grey {