Created
March 10, 2014 17:00
-
-
Save garex/9469122 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
describe('transformToLessOperations', function() { | |
eval('var transformToLessOperations = require("..").transformToLessOperations'); | |
var cm = require("color-model"); | |
var cm = require("../../nodejs-color-model"); | |
eval('var AbstractModel = cm.AbstractModel'); | |
eval('var HexRgb = cm.HexRgb'); | |
eval('var Hsl = cm.Hsl'); | |
eval('var Rgb = cm.Rgb'); | |
describe('extreme cases', function() { | |
it('should get base color when both colors are same', function() { | |
transformToLessOperations('#fe23ca', '#fe23ca').should.be.equal('#fe23ca; // #fe23ca'); | |
transformToLessOperations('fff', '#ffffff').should.be.equal('#ffffff; // #ffffff'); | |
}); | |
it('should throw error when bad color values provided', function() { | |
(function(){ | |
transformToLessOperations('ggg', 'ffffff'); | |
}).should.throwError(/unknown/); | |
(function(){ | |
transformToLessOperations('', ''); | |
}).should.throwError(/unknown/); | |
}); | |
}); | |
// | |
// describe('default cases', function() { | |
// | |
// it('should get only positive spin when positive hue difference', function() { | |
// transformToLessOperations('#fe23ca', '#fe23a5').should.be.equal('spin(#fe23ca, 10%); // #fe23ca'); | |
// transformToLessOperations('#abc', '#aab0cc').should.be.equal('spin(#aabbcc, 20%); // #aab0cc'); | |
// }); | |
// | |
// it('should get only negative spin when negative hue difference', function() { | |
// transformToLessOperations('#fe23ca', '#fe23ef').should.be.equal('spin(#fe23ca, -10%); // #fe23ef'); | |
// transformToLessOperations('#abc', '#aac6cc').should.be.equal('spin(#aabbcc, -20%); // #aac6cc'); | |
// }); | |
// | |
// it('should get only saturate when positive saturation difference', function() { | |
// transformToLessOperations('#fe23ca', '#ff22cb').should.be.equal('saturate(#fe23ca, 10%); // #ff22cb'); | |
// transformToLessOperations('#abc', '#9cbbda').should.be.equal('saturate(#aabbcc, 20%); // #9cbbda'); | |
// transformToLessOperations('#ddd', '#e7d3d3').should.be.equal('saturate(#dddddd, 30%); // #e7d3d3'); | |
// }); | |
// | |
// it('should get only desaturate when negative saturation difference', function() { | |
// transformToLessOperations('#fe23ca', '#f32ec4').should.be.equal('desaturate(#fe23ca, 10%); // #f32ec4'); | |
// transformToLessOperations('#abc', '#b8bbbe').should.be.equal('desaturate(#aabbcc, 20%); // #b8bbbe'); | |
// }); | |
// | |
// it('should get only lighten when positive lightness difference', function() { | |
// transformToLessOperations('#fe23ca', '#fe56d6').should.be.equal('lighten(#fe23ca, 10%); // #fe56d6'); | |
// transformToLessOperations('#abc', '#eaeef2').should.be.equal('lighten(#aabbcc, 20%); // #eaeef2'); | |
// transformToLessOperations('#ddd', '#ffffff').should.be.equal('lighten(#dddddd, 30%); // #ffffff'); | |
// }); | |
// | |
// it('should get only darken when negative lightness difference', function() { | |
// transformToLessOperations('#fe23ca', '#ed01b5').should.be.equal('darken(#fe23ca, 10%); // #ed01b5'); | |
// transformToLessOperations('#abc', '#6a88a6').should.be.equal('darken(#aabbcc, 20%); // #6a88a6'); | |
// transformToLessOperations('#ddd', '#919191').should.be.equal('darken(#dddddd, 30%); // #919191'); | |
// }); | |
// | |
// it('should get all needed operations when all 3 components differs', function() { | |
// transformToLessOperations('#fe23ca', '#ff55ba').should.be.equal('spin(saturate(lighten(#fe23ca, 10%), 10%), 10%); // #ff55ba'); | |
// transformToLessOperations('#abc', '#828c8e').should.be.equal('spin(desaturate(darken(#aabbcc, 20%), 20%), -20%); // #828c8e'); | |
// transformToLessOperations('#ddd', '#ebe9e9').should.be.equal('spin(saturate(lighten(#dddddd, 5%), 5%), 5%); // #ebe9e9'); | |
// }); | |
// | |
// }); | |
describe('advanced cases', function() { | |
it('should allow to imitate analogic color scheme from Color Scheme designer', function() { | |
var primaryRgb = new HexRgb('#ff0000'), // 0.00 1.00 0.50 | |
less = [''], | |
format = ['%(operationsStart)s', '%(operationsBaseColor)s', '%(operationsEnd)s; // %(desiredColor)s']; | |
less.push('@clr-primary-1: ' + transformToLessOperations(primaryRgb, primaryRgb)); | |
format[1] = '@clr-primary-1'; | |
formatStr = format.join(''); | |
// console.log(primaryRgb.toHsl()+''); // 0 1 0.5 | |
var p = parseInt(100*1); | |
var pDot = parseInt(p * 100); | |
var rgbNeed = new Rgb(191, 48, 48); | |
// var values = [ | |
// [4674, 5963, 'chrm start', 'mine rgb(190, 48, 48)'] | |
// , [4674, 5983, 'chrm end', 'mine rgb(190, 48, 48)'] | |
// , [4674, 5989, 'mine start', 'chrm rgb(191, 47, 47)'] | |
// , [4674, 6014, 'mine end', 'chrm rgb(191, 47, 47)'] | |
// ]; | |
// | |
// for (var i = 0, iMax = values.length; i < iMax; i++) { | |
// var val = values[i]; | |
// var lightness = val[0], | |
// saturation = val[1], | |
// owner = val[2]; | |
// var hsl = new Hsl(0, saturation/pDot, lightness/pDot); | |
// console.log( | |
// hsl.toRgb().toString() //, val.join('\t') | |
// ); | |
// break; | |
// } | |
// | |
// return; | |
for (var lightness = 46.74*p, lightnessMax = 46.74*p; lightness <= lightnessMax; ++lightness) { | |
console.log(); | |
for (var saturation = 58*p, saturationMax = 61*p; saturation <= saturationMax; ++saturation) { | |
var hsl = new Hsl(0, saturation/pDot, lightness/pDot); | |
var rgb = hsl.toRgb(); | |
if (rgb.equals(rgbNeed)) { | |
console.log(lightness, saturation); //, hsl.lightness(), hsl.saturation()); | |
} | |
} | |
} | |
return; | |
// we need: rgb(191,48,48) | |
// for (var i = 25, iMax = 50; i <= iMax; i=i+0.1) { | |
// var hsl = primaryRgb.toHsl().saturation(60/100).lightness(i/100); | |
// console.log([hsl.toRgb(), hsl].join(' ')); | |
// } | |
//bf3030 | |
var v = '33%'; | |
less.push('@clr-primary-2: ' + transformToLessOperations(primaryRgb, | |
primaryRgb.toHsl().desaturate(v).darken(v).toRgb().toHexString(), | |
formatStr)); | |
less.push('@clr-primary-3: ' + transformToLessOperations(primaryRgb, | |
primaryRgb.toHsl().darken('17.5%').toRgb().toHexString(), | |
formatStr)); | |
var secondaryA = primaryRgb.toHsl().spin(27 + 140/360).toRgb(); | |
less.push('@clr-secondary-a-1: ' + transformToLessOperations(primaryRgb, | |
secondaryA.toHexString(), | |
formatStr)); | |
format[1] = '@clr-secondary-a-1'; | |
formatStr = format.join(''); | |
less.push('@clr-secondary-a-2: ' + transformToLessOperations(primaryRgb, | |
secondaryA.toHsl().desaturate('40.4%').darken('3%').toRgb().toHexString(), | |
formatStr)); | |
less.push('@clr-secondary-a-3: ' + transformToLessOperations(primaryRgb, | |
secondaryA.toHsl().darken('17.5%').toRgb().toHexString(), | |
formatStr)); | |
format[1] = '@clr-primary-1'; | |
formatStr = format.join(''); // should cd0074 (205, 0, 116) vs get ff0077 | |
var secondaryB = primaryRgb.toHsl().spin(360 - (30 + 0/360)).toRgb(); | |
less.push('@clr-secondary-b-1: ' + transformToLessOperations(primaryRgb, | |
secondaryB.toHexString(), | |
formatStr)); | |
format[1] = '@clr-secondary-b-1'; | |
formatStr = format.join(''); | |
less.push('@clr-secondary-b-2: ' + transformToLessOperations(primaryRgb, | |
secondaryB.toHsl().desaturate('40.4%').darken('3%').toRgb().toHexString(), | |
formatStr)); | |
less.push('@clr-secondary-b-3: ' + transformToLessOperations(primaryRgb, | |
secondaryB.toHsl().darken('17.5%').toRgb().toHexString(), | |
formatStr)); | |
console.log(less.join('\n ')); | |
/** | |
* @clr-primary-1: #ff0000; // #ff0000 | |
* @clr-primary-2: #bf3030; // #bf3030 | |
* @clr-primary-3: #a60000; // #a60000 | |
* | |
* @clr-secondary-a-1: #ff7400; // #ff7400 | |
* @clr-secondary-a-2: #bf7130; // #bf7130 | |
* @clr-secondary-a-3: #a64b00; // #a64b00 | |
* | |
* @clr-secondary-b-1: #cd0074; // #cd0074 | |
* @clr-secondary-b-2: #992667; // #992667 | |
* @clr-secondary-b-3: #85004b; // #85004b | |
*/ | |
}); | |
it('should support hue adjustements of analogic color scheme from red to yellow base color'); | |
}); | |
/** | |
* @returns {AbstractModel} | |
*/ | |
AbstractModel.prototype.increase = function (name, value) { | |
if ((typeof value == 'string') && '%' == value.substr(-1)) { | |
value = parseFloat(value) / 100; | |
} | |
return this.component(name, this.component(name) + value); | |
}; | |
/** | |
* @returns {AbstractModel} | |
*/ | |
AbstractModel.prototype.decrease = function (name, value) { | |
if ((typeof value == 'string') && '%' == value.substr(-1)) { | |
value = parseFloat(value) / 100; | |
} | |
this.component(name, this.component(name) - value); | |
return this; | |
}; | |
/** | |
* @returns {Hsl} | |
*/ | |
Hsl.prototype.saturate = function(value) { | |
return this.increase('saturation', value); | |
}; | |
/** | |
* @returns {Hsl} | |
*/ | |
Hsl.prototype.desaturate = function(value) { | |
return this.decrease('saturation', value); | |
}; | |
/** | |
* @returns {Hsl} | |
*/ | |
Hsl.prototype.lighten = function(value) { | |
return this.increase('lightness', value); | |
}; | |
/** | |
* @returns {Hsl} | |
*/ | |
Hsl.prototype.darken = function(value) { | |
return this.decrease('lightness', value); | |
}; | |
/** | |
* @returns {Hsl} | |
*/ | |
Hsl.prototype.spin = function(value) { | |
return this.increase('hue', value); | |
}; | |
/** | |
* @returns {Hsl} | |
*/ | |
Hsl.prototype.unspin = function(value) { | |
return this.decrease('hue', value); | |
}; | |
Hsl.prototype.toString1 = function() { | |
var v = [ | |
this._hue.get(), | |
this._saturation.get() * 100 + '%', | |
this._lightness.get() * 100 + '%' | |
]; | |
return this._name + '(' + v.join(', ') + ')'; | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment