Skip to content

Commit

Permalink
start linearGradient fn
Browse files Browse the repository at this point in the history
  • Loading branch information
@ndp
ndp committed Jan 31, 2012
1 parent a5e3820 commit 16b2fc0
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 7 deletions.
110 changes: 104 additions & 6 deletions spec/macros_spec.js
View file
Expand Up @@ -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');
});

Expand All @@ -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");
})

});
Expand Down Expand Up @@ -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"};
})
});

});


});

75 changes: 74 additions & 1 deletion src/macros/macros.js
View file
Expand Up @@ -127,7 +127,7 @@ function clearfix() {
}
};
if (Csster.browser.msie) {
css['zoom'] = '1'
css['zoom'] = '1'
}
return css;
}
Expand All @@ -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.