Permalink
Browse files

start linearGradient fn

  • Loading branch information...
1 parent a5e3820 commit 16b2fc0ca79b5f8eae3cf13bb5b33cc1c9793cf3 @ndp committed Jan 31, 2012
Showing with 178 additions and 7 deletions.
  1. +104 −6 spec/macros_spec.js
  2. +74 −1 src/macros/macros.js
View
@@ -14,23 +14,23 @@ describe('macros', function() {
});
it('should curve both top side corners', function() {
expect(roundedCorners('top', 7)).toEqual({ '-moz-border-radius-topleft' : 7, 'border-top-left-radius' : 7, '-webkit-border-top-left-radius' : 7,
- '-moz-border-radius-topright' : 7, 'border-top-right-radius' : 7, '-webkit-border-top-right-radius' : 7});
+ '-moz-border-radius-topright' : 7, 'border-top-right-radius' : 7, '-webkit-border-top-right-radius' : 7});
});
});
describe('boxShadow', function() {
var result;
beforeEach(function() {
- result = boxShadow([2,3],4,'yellow');
+ result = boxShadow([2,3], 4, 'yellow');
});
- it ('should have CSS3 rule', function() {
+ it('should have CSS3 rule', function() {
expect(result['boxShadow']).toEqual('2px 3px 4px yellow');
});
- it ('should have webkit rule', function() {
+ it('should have webkit rule', function() {
expect(result['-webkit-box-shadow']).toEqual('2px 3px 4px yellow');
});
- it ('should have mozilla rule', function() {
+ it('should have mozilla rule', function() {
expect(result['-moz-box-shadow']).toEqual('2px 3px 4px yellow');
});
@@ -39,7 +39,10 @@ describe('macros', function() {
describe('imageReplacement', function() {
it('should throw exception if not given enough parameters', function() {
- expect(function() {imageReplacement()}).toThrow("imageReplacement() requires width, height and img");
+ expect(
+ function() {
+ imageReplacement()
+ }).toThrow("imageReplacement() requires width, height and img");
})
});
@@ -102,6 +105,101 @@ describe('macros', function() {
});
+ describe('linearGradient', function() {
+
+//#element {
+// background: -moz-linear-gradient(black, white); /* FF 3.6+ */
+// background: -ms-linear-gradient(black, white); /* IE10 */
+// background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
+// background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
+// background: -o-linear-gradient(black, white); /* Opera 11.10 */
+// filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
+// -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
+// background: linear-gradient(black, white); /* the standard */
+// }
+//.box_gradient {
+// background-color: #444444;
+// background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
+// background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
+// background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
+// background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
+// background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
+// background-image: linear-gradient(to bottom, #444444, #999999);
+//}
+
+//Internet Explorer: 6.0, 7.0, 8.0
+//Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9
+//Opera: 10.06, 11.01
+//Safari/Webkit: 312.8, 418.9
+
+
+ describe('for mozilla', function() {
+ beforeEach(function() {
+ Csster.browser = { mozilla: true, version: 3.6 };
+ })
+ it('should handle starting point and direction', function() {
+ expect(linearGradient('top', 'blue', 'white')).toEqual('-moz-linear-gradient(top, blue, white)')
+ expect(linearGradient('left', 'blue', 'white')).toEqual('-moz-linear-gradient(left, blue, white)')
+ expect(linearGradient('left top', 'blue', 'white')).toEqual('-moz-linear-gradient(left top, blue, white)')
+ });
+ it('should handle starting point and angle', function() {
+ // 0deg generates a left to right horizontal gradient, while 90deg creates a vertical gradient from the bottom to the top
+ expect(linearGradient('left 20deg', 'black', 'white')).toEqual('-moz-linear-gradient(left 20deg, black, white)')
+ });
+ it('should handle color stops', function() {
+ expect(linearGradient('left', 'red', 'orange', 'yellow', 'green', 'blue')).toEqual('-moz-linear-gradient(left, red, orange, yellow, green, blue)')
+ expect(linearGradient('top', 'blue', 'white 80%', 'orange')).toEqual('-moz-linear-gradient(top, blue, white 80%, orange)')
+ });
+ it('should handle color stops from array', function() {
+ expect(linearGradient('left', ['red', 'orange', 'yellow', 'green', 'blue'])).toEqual('-moz-linear-gradient(left, red, orange, yellow, green, blue)')
+ });
+ it('should handle color stops from object', function() {
+ expect(linearGradient('top', { 0: 'blue', 80: 'white', 100: 'orange'})).toEqual('-moz-linear-gradient(top, blue, white 80%, orange)')
+ });
+ });
+
+ describe('older webkit browsers that use -webkit-gradient', function() {
+
+ });
+
+ describe('IE6', function() {
+
+ });
+
+ describe('IE7', function() {
+
+ });
+
+ describe('IE8', function() {
+
+ });
+
+ describe('webkit prefix browsers: Chrome 10+, Saf5.1+, iOS 5+', function() {
+ beforeEach(function() {
+ Csster.browser = { webkit: true, version: "535.1"};
+ })
+ it('should handle starting point and direction', function() {
+ expect(linearGradient('top', 'blue', 'white')).toEqual('-webkit-linear-gradient(top, blue, white)')
+ expect(linearGradient('left', 'blue', 'white')).toEqual('-webkit-linear-gradient(left, blue, white)')
+ expect(linearGradient('left top', 'blue', 'white')).toEqual('-webkit-linear-gradient(left top, blue, white)')
+ });
+ it('should handle starting point and angle', function() {
+ // 0deg generates a left to right horizontal gradient, while 90deg creates a vertical gradient from the bottom to the top
+ expect(linearGradient('left 20deg', 'black', 'white')).toEqual('-webkit-linear-gradient(left 20deg, black, white)')
+ });
+ it('should handle color stops', function() {
+ expect(linearGradient('left', 'red', 'orange', 'yellow', 'green', 'blue')).toEqual('-webkit-linear-gradient(left, red, orange, yellow, green, blue)')
+ expect(linearGradient('top', 'blue', 'white 80%', 'orange')).toEqual('-webkit-linear-gradient(top, blue, white 80%, orange)')
+ });
+ });
+ xdescribe('for opera', function() {
+ beforeEach(function() {
+ Csster.browser = { opera: true, version: "535.1"};
+ })
+ });
+
+ });
+
});
View
@@ -127,7 +127,7 @@ function clearfix() {
}
};
if (Csster.browser.msie) {
- css['zoom'] = '1'
+ css['zoom'] = '1'
}
return css;
}
@@ -152,3 +152,76 @@ function verticalCentering(height) {
marginTop: -(height / 2)
}
}
+
+function linearGradient(startingPoint, color1, color2, etc) {
+ var prefix = '',
+ result = '';
+ if (Csster.browser.webkit) {
+ prefix = '-webkit';
+ } else if (Csster.browser.mozilla) {
+ prefix = '-moz';
+ }
+
+
+ var stops = [];
+ for (var i = 0; i < arguments.length; i++) {
+ var argument = arguments[i];
+ if (typeof argument == 'string') {
+ stops.push(argument);
+ } else if ($.isArray(argument)) {
+ for (var j = 0; j < argument.length; j++) {
+ stops.push(argument[j]);
+ }
+ } else {
+ for (p in arguments[i]) {
+ stops.push(argument[p] + (p != 0 && p != '100' ? (' ' + p + '%') : '') );
+ }
+ }
+ }
+
+
+ result = prefix + '-linear-gradient(';
+ for (i = 0; i < stops.length; i++) {
+ if (i !== 0) result += ', ';
+ result += stops[i];
+ }
+ result += ')';
+ return result;
+}
+
+// },generateLinearGradient:function() {
+// var props = c.gradientProps,
+// g = props.type + "-gradient(",e = "";
+// $sample = c.sample,
+// gCount = a.getPaletteLength(),
+// palette = a.getPalette();
+// if (props.xStart !== props.xEnd) {
+// g = g + props.xStart + " "
+// }
+// if (props.yStart !== props.yEnd) {
+// g = g + props.yStart
+// }
+// g = g + ", ";
+// var h = c.getColor;
+// $.each(palette, function(i, j) {
+// if (i > 0) {
+// e = e + " "
+// }
+// e = e + h(j) + " " + j.position + "%,"
+// });
+// g = g + e;
+// g = g.substr(0, g.length - 1) + ")";
+ return g
+// generateWebkitGradient:function() {
+// var j = c.gradientProps,l = "-webkit-gradient(" + j.type + "," + c.fetchGradientStart() + "," + c.fetchGradientEnd() + ",",g = "";
+// var e = a.getPalette(),f = e.length,k,m;
+// for (var h = 0; h < f; h++) {
+// m = e[h];
+// k = (m.position / 100);
+// g = g + "color-stop(" + k + ", rgb(" + m.rgb.r + "," + m.rgb.g + "," + m.rgb.b + ")),"
+// }
+// l = l + g;
+// l = l.substr(0, l.length - 1) + ");";
+// return l
+
+

0 comments on commit 16b2fc0

Please sign in to comment.