Permalink
Browse files

More tests + accept em&px for normalizing color stops

  • Loading branch information...
1 parent e2015d7 commit fdf2c39b28ed04c2c2f8b23c7672a24cc7d747ac @kizu kizu committed with slang800 Oct 11, 2012
Showing with 83 additions and 4 deletions.
  1. +3 −4 lib/nodes/vendor-helpers.js
  2. +56 −0 test/cases/linear-gradient.css
  3. +24 −0 test/cases/linear-gradient.styl
@@ -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');
}
}
@@ -13,6 +13,34 @@ body {
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);
background: -o-linear-gradient(top left, #fff, #f00, #00f, #000);
@@ -34,6 +62,34 @@ body {
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);
background: -ms-linear-gradient(top, #fff, #000);
@@ -9,6 +9,18 @@ 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)
body
@@ -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

0 comments on commit fdf2c39

Please sign in to comment.