More tests + accept em&px for normalizing color stops

stylus · Jul 31, 2013 · fdf2c39 · fdf2c39
1 parent e2015d7
commit fdf2c39
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 4 deletions.
diff --git a/lib/nodes/vendor-helpers.js b/lib/nodes/vendor-helpers.js
@@ -18,10 +18,9 @@ module.exports = function(property,value,prefix) {
   if (result.indexOf('gradient(') > -1) {
 
     /* Normalize color stops */
-    if (result.indexOf('%') > -1) {
-      result = result.replace(/([\(\,]\s*)(-?(?:\d*\.)?\d+%)(\s+)((hsl|rgb)a?\([^\)]+\)|#[^\)\,]+)/g,'$1$4$3$2');
-    }
+    result = result.replace(/([\(\,]\s*)(-?(?:\d*\.)?\d+(?:%|px|em))(\s+)((hsl|rgb)a?\([^\)]+\)|#[^\)\,]+)/g,'$1$4$3$2');
 
+    /* Normalize legacy gradients */
     result = result.replace(/(\(\s*)(?:(-?(\d*\.)?\d+)deg|((to )?(top|bottom|left|right)( (top|bottom|left|right))?))/g,function(match,p1,p2,p3,p4,p5,p6,p7,p8){
       /* Fix the degrees to the legacy syntax */
       var result = p1;
@@ -53,8 +52,8 @@ module.exports = function(property,value,prefix) {
       return result;
     });
 
+    /* Adding prefixes to the legacy gradients */
     if (prefix) {
-      /* Adding prefixes to the legacy gradients */
       result = result.replace(/((repeating-)?(linear|radial)-gradient\()/g,'-' + prefix + '-$1');
     }
   }

diff --git a/test/cases/linear-gradient.css b/test/cases/linear-gradient.css
@@ -12,6 +12,34 @@ body {
   background: -ms-linear-gradient(top, #fff, #000);
   background: linear-gradient(to bottom, #fff, #000);
 }
+body {
+  background: -webkit-linear-gradient(bottom, #fff, #000);
+  background: -moz-linear-gradient(bottom, #fff, #000);
+  background: -o-linear-gradient(bottom, #fff, #000);
+  background: -ms-linear-gradient(bottom, #fff, #000);
+  background: linear-gradient(to top, #fff, #000);
+}
+body {
+  background: -webkit-linear-gradient(top left, #fff, #000);
+  background: -moz-linear-gradient(top left, #fff, #000);
+  background: -o-linear-gradient(top left, #fff, #000);
+  background: -ms-linear-gradient(top left, #fff, #000);
+  background: linear-gradient(to bottom right, #fff, #000);
+}
+body {
+  background: -webkit-linear-gradient(45deg, #fff, #000);
+  background: -moz-linear-gradient(45deg, #fff, #000);
+  background: -o-linear-gradient(45deg, #fff, #000);
+  background: -ms-linear-gradient(45deg, #fff, #000);
+  background: linear-gradient(45deg, #fff, #000);
+}
+body {
+  background: -webkit-linear-gradient(135deg, #fff, #000);
+  background: -moz-linear-gradient(135deg, #fff, #000);
+  background: -o-linear-gradient(135deg, #fff, #000);
+  background: -ms-linear-gradient(135deg, #fff, #000);
+  background: linear-gradient(-45deg, #fff, #000);
+}
 body {
   background: -webkit-linear-gradient(top left, #fff, #f00, #00f, #000);
   background: -moz-linear-gradient(top left, #fff, #f00, #00f, #000);
@@ -33,6 +61,34 @@ body {
   background: -ms-linear-gradient(right bottom, #fff, #000 80%);
   background: linear-gradient(to left top, #fff, #000 80%);
 }
+body {
+  background: -webkit-linear-gradient(right bottom, #fff 80%, #000);
+  background: -moz-linear-gradient(right bottom, #fff 80%, #000);
+  background: -o-linear-gradient(right bottom, #fff 80%, #000);
+  background: -ms-linear-gradient(right bottom, #fff 80%, #000);
+  background: linear-gradient(to left top, #fff 80%, #000);
+}
+body {
+  background: -webkit-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
+  background: -moz-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
+  background: -o-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
+  background: -ms-linear-gradient(right bottom, rgba(0,0,0,0.5) 80%, #000);
+  background: linear-gradient(to left top, rgba(0,0,0,0.5) 80%, #000);
+}
+body {
+  background: -webkit-linear-gradient(right bottom, hsla(0,0,0,0.5) 80.5%, #000);
+  background: -moz-linear-gradient(right bottom, hsla(0,0,0,0.5) 80.5%, #000);
+  background: -o-linear-gradient(right bottom, hsla(0,0,0,0.5) 80.5%, #000);
+  background: -ms-linear-gradient(right bottom, hsla(0,0,0,0.5) 80.5%, #000);
+  background: linear-gradient(to left top, hsla(0,0,0,0.5) 80.5%, #000);
+}
+body {
+  background: -webkit-linear-gradient(right bottom, #fff 20px, #000);
+  background: -moz-linear-gradient(right bottom, #fff 20px, #000);
+  background: -o-linear-gradient(right bottom, #fff 20px, #000);
+  background: -ms-linear-gradient(right bottom, #fff 20px, #000);
+  background: linear-gradient(to left top, #fff 20px, #000);
+}
 body {
   background: -webkit-linear-gradient(top, #fff, #000);
   background: -moz-linear-gradient(top, #fff, #000);

diff --git a/test/cases/linear-gradient.styl b/test/cases/linear-gradient.styl
@@ -8,6 +8,18 @@ body
 body
   background: linear-gradient(top, white, black)
 
+body
+  background: linear-gradient(to top, white, black)
+
+body
+  background: linear-gradient(to bottom right, white, black)
+
+body
+  background: linear-gradient(45deg, white, black)
+
+body
+  background: linear-gradient(-45deg, white, black)
+
 body
   background: linear-gradient(top left, white, red, blue, black)
 
@@ -17,6 +29,18 @@ body
 body
   background: linear-gradient(right bottom, white, 80% black)
 
+body
+  background: linear-gradient(right bottom, 80% white, black)
+
+body
+  background: linear-gradient(right bottom, 80% rgba(#000,0.5), black)
+
+body
+  background: linear-gradient(right bottom, 80.5% hsla(0,0,0,0.5), black)
+
+body
+  background: linear-gradient(right bottom, 20px white, black)
+
 vendor-prefixes = webkit moz ms o official
 
 body