@sencha/cmd-linux-64
Version:
Productivity and performance optimization tool for building applications with Sencha Ext JS
795 lines (693 loc) • 41.7 kB
JavaScript
var Fashion = require('../../index.js');
var assert = require('assert');
describe('functions', function() {
var compile = function(scss, css) {
return new Fashion.Builder().compile(scss);
},
assertEqual = function(css, expression) {
it('should properly evaluate ' + expression + ' to ' + css, function(done) {
compile('body {a: ' + expression + ';}').getText(function(generated){
assert.equal(generated.join(''), 'body {\n a: ' + css + ';\n}');
done();
});
});
},
assertError = function(error, expression) {
it('should throw an the error "' + error + '" when trying to compile "' + expression + '"', function() {
try {
var compiled = compile('body {a: ' + expression + ';}');
assert(false, 'should throw exception');
}
catch (ex) {
assert.equal(ex.message, error);
}
});
};
describe('percentage', function() {
assertEqual("50%", "percentage(.5)");
assertEqual("100%", "percentage(1)");
assertEqual("25%", "percentage(25px / 100px)");
assertEqual("50%", "percentage($value: 0.5)");
assertError("25px is not a unitless number for 'percentage'", "percentage(25px)");
assertError("#ccc is not a unitless number for 'percentage'", "percentage(#ccc)");
assertError("\"string\" is not a unitless number for 'percentage'", "percentage(\"string\")");
});
describe('round', function() {
assertEqual("5", "round(4.8)");
assertEqual("5px", "round(4.8px)");
assertEqual("5px", "round(5.49px)");
assertEqual("5px", "round($value: 5.49px)");
assertError("#ccc is not a number for 'round'", "round(#ccc)");
});
describe('floor', function() {
assertEqual("4", "floor(4.8)");
assertEqual("4px", "floor(4.8px)");
assertEqual("4px", "floor($value: 4.8px)");
assertError("\"foo\" is not a number for 'floor'", "floor(\"foo\")");
});
describe('ceil', function() {
assertEqual("5", "ceil(4.1)");
assertEqual("5px", "ceil(4.8px)");
assertEqual("5px", "ceil($value: 4.8px)");
assertError("\"a\" is not a number for 'ceil'", "ceil(\"a\")");
});
describe('abs', function() {
assertEqual("5", "abs(-5)");
assertEqual("5px", "abs(-5px)");
assertEqual("5", "abs(5)");
assertEqual("5px", "abs(5px)");
assertEqual("5px", "abs($value: 5px)");
assertError("#aaa is not a number for 'abs'", "abs(#aaa)");
});
describe('hsl(a)', function() {
assertEqual("#3cc", "hsl(180, 60%, 50%)");
assertError("Saturation -114 must be between 0% and 100% for 'hsla'", "hsl(10, -114, 12)");
assertError("Lightness 256% must be between 0% and 100% for 'hsla'", "hsl(10, 10, 256%)");
assertError("\"foo\" is not a number for 'hsla'", "hsl(\"foo\", 10, 12)");
assertError("\"foo\" is not a number for 'hsla'", "hsl(10, \"foo\", 12)");
assertError("\"foo\" is not a number for 'hsla'", "hsl(10, 10, \"foo\")");
assertEqual("rgba(51, 204, 204, 0.4)", "hsla(180, 60%, 50%, 0.4)");
assertEqual("#3cc", "hsla(180, 60%, 50%, 1)");
assertEqual("rgba(51, 204, 204, 0)", "hsla(180, 60%, 50%, 0)");
assertEqual("rgba(51, 204, 204, 0.4)", "hsla(180, 60%, 50%, 0.4)");
assertEqual("#3cc", "hsl($saturation: 60%, $lightness: 50%, $hue: 180)");
assertError("Saturation -114 must be between 0% and 100% for 'hsla'", "hsla(10, -114, 12, 1)");
assertError("Lightness 256% must be between 0% and 100% for 'hsla'", "hsla(10, 10, 256%, 0)");
assertError("Alpha channel -0.1 must be between 0 and 1 for 'hsla'", "hsla(10, 10, 10, -0.1)");
assertError("Alpha channel 1.1 must be between 0 and 1 for 'hsla'", "hsla(10, 10, 10, 1.1)");
assertError("\"foo\" is not a number for 'hsla'", "hsla(\"foo\", 10, 12, 0.3)");
assertError("\"foo\" is not a number for 'hsla'", "hsla(10, \"foo\", 12, 0)");
assertError("\"foo\" is not a number for 'hsla'", "hsla(10, 10, \"foo\", 1)");
assertError("\"foo\" is not a number for 'hsla'", "hsla(10, 10, 10, \"foo\")");
});
describe('rgb(a)', function() {
assertEqual("#123456", "rgb(18, 52, 86)");
assertEqual("#beaded", "rgb(190, 173, 237)");
assertEqual("#00ff7f", "rgb(0, 255, 127)");
assertEqual("#00ff7f", "rgb($red: 0, $green: 255, $blue: 127)");
assertEqual("#123457", "rgb(7.1%, 20.4%, 34%)");
assertEqual("#beaded", "rgb(74.7%, 173, 93%)");
assertEqual("#beaded", "rgb(190, 68%, 237)");
assertEqual("#00ff80", "rgb(0%, 100%, 50%)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgb(256, 1, 1)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgb(1, 256, 1)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgb(1, 1, 256)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgb(1, 256, 257)");
assertError("Color value -1 must be between 0 and 255 inclusive for 'rgba'", "rgb(-1, 1, 1)");
//assertError("Color value 100.1% must be between 0% and 100% inclusive for 'rgba'", "rgb(100.1%, 0, 0)");
//assertError("Color value -0.1% must be between 0% and 100% inclusive for 'rgba'", "rgb(0, -0.1%, 0)");
//assertError("Color value 101% must be between 0% and 100% inclusive for 'rgba'", "rgb(0, 0, 101%)");
assertError("\"foo\" is not a number for 'rgba' red", "rgb(\"foo\", 10, 12)");
assertError("\"foo\" is not a number for 'rgba' green", "rgb(10, \"foo\", 12)");
assertError("\"foo\" is not a number for 'rgba' blue", "rgb(10, 10, \"foo\")");
assertEqual("rgba(18, 52, 86, 0.5)", "rgba(18, 52, 86, 0.5)");
assertEqual("#beaded", "rgba(190, 173, 237, 1)");
assertEqual("rgba(0, 255, 127, 0)", "rgba(0, 255, 127, 0)");
assertEqual("rgba(0, 255, 127, 0)", "rgba($red: 0, $green: 255, $blue: 127, $alpha: 0)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgba(256, 1, 1, 0.3)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgba(1, 256, 1, 0.3)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgba(1, 1, 256, 0.3)");
assertError("Color value 256 must be between 0 and 255 inclusive for 'rgba'", "rgba(1, 256, 257, 0.3)");
assertError("Color value -1 must be between 0 and 255 inclusive for 'rgba'", "rgba(-1, 1, 1, 0.3)");
assertError("Alpha channel -0.2 must be between 0 and 1 inclusive for 'rgba'", "rgba(1, 1, 1, -0.2)");
assertError("Alpha channel 1.2 must be between 0 and 1 inclusive for 'rgba'", "rgba(1, 1, 1, 1.2)");
assertError("\"foo\" is not a number for 'rgba' red", "rgba(\"foo\", 10, 12, 0.2)");
assertError("\"foo\" is not a number for 'rgba' green", "rgba(10, \"foo\", 12, 0.1)");
assertError("\"foo\" is not a number for 'rgba' blue", "rgba(10, 10, \"foo\", 0)");
assertError("\"foo\" is not a number for 'rgba' alpha", "rgba(10, 10, 10, \"foo\")");
// assertError("undefined is not a number for 'rgba' red", "rgba()");
// assertError("undefined is not a number for 'rgba' green", "rgba(1)");
// assertError("undefined is not a number for 'rgba' alpha", "rgba(1, 2, 3)");
assertError("Unsupported arguments to RGBA", "rgba(1, 2, 3, 0.4, 5)");
assertEqual("rgba(16, 32, 48, 0.5)", "rgba(#102030, 0.5)");
assertEqual("rgba(0, 0, 255, 0.5)", "rgba(blue, 0.5)");
assertEqual("rgba(0, 0, 255, 0.5)", "rgba($color: blue, $alpha: 0.5)");
assertError("\"foo\" is not a number for 'rgba' red", "rgba(\"foo\", 0.2)");
assertError("\"foo\" is not a number for 'rgba' alpha", "rgba(blue, \"foo\")");
});
describe('red', function() {
assertEqual("18", "red(#123456)");
assertEqual("18", "red($color: #123456)");
assertError("12 is not a color for 'red'", "red(12)");
});
describe('green', function() {
assertEqual("52", "green(#123456)");
assertEqual("52", "green($color: #123456)");
assertError("12 is not a color for 'green'", "green(12)");
});
describe('blue', function() {
assertEqual("86", "blue(#123456)");
assertEqual("86", "blue($color: #123456)");
assertError("12 is not a color for 'blue'", "blue(12)");
});
describe('hue', function() {
assertEqual("18deg", "hue(hsl(18, 50%, 20%))");
assertEqual("18deg", "hue($color: hsl(18, 50%, 20%))");
assertError("12 is not a color for 'hue'", "hue(12)");
});
describe('saturation', function() {
assertEqual("52%", "saturation(hsl(20, 52%, 20%))");
assertEqual("52%", "saturation(hsl(20, 52, 20%))");
assertEqual("52%", "saturation($color: hsl(20, 52, 20%))");
assertError("12 is not a color for 'saturation'", "saturation(12)");
});
describe('lightness', function() {
assertEqual("86%", "lightness(hsl(120, 50%, 86%))");
assertEqual("86%", "lightness(hsl(120, 50%, 86))");
assertEqual("86%", "lightness($color: hsl(120, 50%, 86))");
assertError("12 is not a color for 'lightness'", "lightness(12)");
});
describe('alpha', function() {
assertEqual("1", "alpha(#123456)");
assertEqual("0.34", "alpha(rgba(0, 1, 2, 0.34))");
assertEqual("0", "alpha(hsla(0, 1, 2, 0))");
assertEqual("0", "alpha($color: hsla(0, 1, 2, 0))");
assertEqual("alpha(12)", "alpha(12)");
//assertError("12 is not a color for 'alpha'", "alpha(12)");
});
describe('opacify', function() {
assertEqual("rgba(0, 0, 0, 0.75)", "opacify(rgba(0, 0, 0, 0.5), 0.25)");
assertEqual("rgba(0, 0, 0, 0.3)", "opacify(rgba(0, 0, 0, 0.2), 0.1)");
assertEqual("#000", "fade_in(rgba(0, 0, 0, 0.2), 0.8)");
assertEqual("#000", "opacify(rgba(0, 0, 0, 0.2), 1)");
assertEqual("rgba(0, 0, 0, 0.2)", "opacify(rgba(0, 0, 0, 0.2), 0%)");
assertEqual("rgba(0, 0, 0, 0.2)", "opacify($color: rgba(0, 0, 0, 0.2), $amount: 0%)");
assertError("Amount -0.001 must be between 0 and 1 for 'opacify'", "opacify(rgba(0, 0, 0, 0.2), -0.001)");
assertError("Amount 1.001 must be between 0 and 1 for 'opacify'", "opacify(rgba(0, 0, 0, 0.2), 1.001)");
assertError("\"foo\" is not a color for 'opacify'", "opacify(\"foo\", 10%)");
assertError("\"foo\" is not a number for 'opacify'", "opacify(#fff, \"foo\")");
});
describe('transparentize', function() {
assertEqual("rgba(0, 0, 0, 0.3)", "transparentize(rgba(0, 0, 0, 0.5), 0.2)");
assertEqual("rgba(0, 0, 0, 0.1)", "transparentize(rgba(0, 0, 0, 0.2), 0.1)");
assertEqual("transparent", "fade_out(rgba(0, 0, 0, 0.2), 0.2)");
assertEqual("transparent", "transparentize(rgba(0, 0, 0, 0.2), 1)");
assertEqual("rgba(0, 0, 0, 0.2)", "transparentize(rgba(0, 0, 0, 0.2), 0)");
assertEqual("rgba(0, 0, 0, 0.2)", "transparentize($color: rgba(0, 0, 0, 0.2), $amount: 0)");
assertError("Amount -0.001 must be between 0 and 1 for 'transparentize'", "transparentize(rgba(0, 0, 0, 0.2), -0.001)");
assertError("Amount 1.001 must be between 0 and 1 for 'transparentize'", "transparentize(rgba(0, 0, 0, 0.2), 1.001)");
assertError("\"foo\" is not a color for 'transparentize'", "transparentize(\"foo\", 10%)");
assertError("\"foo\" is not a number for 'transparentize'", "transparentize(#fff, \"foo\")");
});
describe('lighten', function() {
assertEqual("#4d4d4d", "lighten(hsl(0, 0, 0), 30%)");
assertEqual("#e00", "lighten(#800, 20%)");
assertEqual("#fff", "lighten(#fff, 20%)");
assertEqual("#fff", "lighten(#800, 100%)");
assertEqual("#800", "lighten(#800, 0%)");
assertEqual("rgba(238, 0, 0, 0.5)", "lighten(rgba(136, 0, 0, 0.5), 20%)");
assertEqual("rgba(238, 0, 0, 0.5)", "lighten($color: rgba(136, 0, 0, 0.5), $amount: 20%)");
assertError("Amount -0.001 must be between 0% and 100% for 'lighten'", "lighten(#123, -0.001)");
assertError("Amount 100.001 must be between 0% and 100% for 'lighten'", "lighten(#123, 100.001)");
assertError("\"foo\" is not a color for 'lighten'", "lighten(\"foo\", 10%)");
assertError("\"foo\" is not a number for 'lighten'", "lighten(#fff, \"foo\")");
});
describe('darken', function() {
assertEqual("#ff6a00", "darken(hsl(25, 100, 80), 30%)");
assertEqual("#200", "darken(#800, 20%)");
assertEqual("#000", "darken(#000, 20%)");
assertEqual("#000", "darken(#800, 100%)");
assertEqual("#800", "darken(#800, 0%)");
assertEqual("rgba(34, 0, 0, 0.5)", "darken(rgba(136, 0, 0, 0.5), 20%)");
assertEqual("rgba(34, 0, 0, 0.5)", "darken($color: rgba(136, 0, 0, 0.5), $amount: 20%)");
assertError("Amount -0.001 must be between 0% and 100% for 'darken'", "darken(#123, -0.001)");
assertError("Amount 100.001 must be between 0% and 100% for 'darken'", "darken(#123, 100.001)");
assertError("\"foo\" is not a color for 'darken'", "darken(\"foo\", 10%)");
assertError("\"foo\" is not a number for 'darken'", "darken(#fff, \"foo\")");
});
describe('saturate', function() {
assertEqual("#d9f2d9", "saturate(hsl(120, 30, 90), 20%)");
assertEqual("#9e3f3f", "saturate(#855, 20%)");
assertEqual("#000", "saturate(#000, 20%)");
assertEqual("#fff", "saturate(#fff, 20%)");
assertEqual("#3f3", "saturate(#8a8, 100%)");
assertEqual("#8a8", "saturate(#8a8, 0%)");
assertEqual("rgba(158, 63, 63, 0.5)", "saturate(rgba(136, 85, 85, 0.5), 20%)");
assertEqual("rgba(158, 63, 63, 0.5)", "saturate($color: rgba(136, 85, 85, 0.5), $amount: 20%)");
assertError("Amount -0.001 must be between 0% and 100% for 'saturate'", "saturate(#123, -0.001)");
assertError("Amount 100.001 must be between 0% and 100% for 'saturate'", "saturate(#123, 100.001)");
assertError("\"foo\" is not a color for 'saturate'", "saturate(\"foo\", 10%)");
assertError("\"foo\" is not a number for 'saturate'", "saturate(#fff, \"foo\")");
});
describe('desaturate', function() {
assertEqual("#e3e8e3", "desaturate(hsl(120, 30, 90), 20%)");
assertEqual("#726b6b", "desaturate(#855, 20%)");
assertEqual("#000", "desaturate(#000, 20%)");
assertEqual("#fff", "desaturate(#fff, 20%)");
assertEqual("#999", "desaturate(#8a8, 100%)");
assertEqual("#8a8", "desaturate(#8a8, 0%)");
assertEqual("rgba(114, 107, 107, 0.5)", "desaturate(rgba(136, 85, 85, 0.5), 20%)");
assertEqual("rgba(114, 107, 107, 0.5)", "desaturate($color: rgba(136, 85, 85, 0.5), $amount: 20%)");
assertError("Amount -0.001 must be between 0% and 100% for 'desaturate'", "desaturate(#123, -0.001)");
assertError("Amount 100.001 must be between 0% and 100% for 'desaturate'", "desaturate(#123, 100.001)");
assertError("\"foo\" is not a color for 'desaturate'", "desaturate(\"foo\", 10%)");
assertError("\"foo\" is not a number for 'desaturate'", "desaturate(#fff, \"foo\")");
});
describe('adjust_hue', function() {
assertEqual("#deeded", "adjust_hue(hsl(120, 30, 90), 60deg)");
assertEqual("#ededde", "adjust_hue(hsl(120, 30, 90), -60deg)");
assertEqual("#886a11", "adjust_hue(#811, 45deg)");
assertEqual("#000", "adjust_hue(#000, 45deg)");
assertEqual("#fff", "adjust_hue(#fff, 45deg)");
assertEqual("#8a8", "adjust_hue(#8a8, 360deg)");
assertEqual("#8a8", "adjust_hue(#8a8, 0deg)");
assertEqual("rgba(136, 106, 17, 0.5)", "adjust_hue(rgba(136, 17, 17, 0.5), 45deg)");
assertEqual("rgba(136, 106, 17, 0.5)", "adjust_hue($color: rgba(136, 17, 17, 0.5), $degrees: 45deg)");
assertError("\"foo\" is not a color for 'adjust-hue'", "adjust_hue(\"foo\", 10%)");
assertError("\"foo\" is not a number for 'adjust-hue'", "adjust_hue(#fff, \"foo\")");
});
describe('mix', function() {
assertEqual("#75c9f0", "mix(hsl(199, 80%, 70%), hsl(199, 80%, 70%), 50%)");
assertEqual("purple", "mix(#f00, #00f)");
assertEqual("grey", "mix(#f00, #0ff)");
assertEqual("#809155", "mix(#f70, #0aa)");
assertEqual("#4000bf", "mix(#f00, #00f, 25%)");
assertEqual("rgba(64, 0, 191, 0.75)", "mix(rgba(255, 0, 0, 0.5), #00f)");
assertEqual("red", "mix(#f00, #00f, 100%)");
assertEqual("blue", "mix(#f00, #00f, 0%)");
assertEqual("rgba(255, 0, 0, 0.5)", "mix(#f00, transparentize(#00f, 1))");
assertEqual("rgba(0, 0, 255, 0.5)", "mix(transparentize(#f00, 1), #00f)");
assertEqual("red", "mix(#f00, transparentize(#00f, 1), 100%)");
assertEqual("blue", "mix(transparentize(#f00, 1), #00f, 0%)");
assertEqual("rgba(0, 0, 255, 0)", "mix(#f00, transparentize(#00f, 1), 0%)");
assertEqual("rgba(255, 0, 0, 0)", "mix(transparentize(#f00, 1), #00f, 100%)");
assertEqual("rgba(255, 0, 0, 0)", "mix($color-1: transparentize(#f00, 1), $color-2: #00f, $weight: 100%)");
assertError("arg 1 \"foo\" is not a color for 'mix'", "mix(\"foo\", #f00, 10%)");
assertError("arg 2 \"foo\" is not a color for 'mix'", "mix(#f00, \"foo\", 10%)");
assertError("arg 3 \"foo\" is not a number for 'mix'", "mix(#f00, #baf, \"foo\")");
assertError("Weight -0.001 must be between 0% and 100% for 'mix'", "mix(#123, #456, -0.001)");
assertError("Weight 100.001 must be between 0% and 100% for 'mix'", "mix(#123, #456, 100.001)");
});
describe('grayscale', function() {
assertEqual("#bbb", "grayscale(#abc)");
assertEqual("grey", "grayscale(#f00)");
assertEqual("grey", "grayscale(#00f)");
assertEqual("#fff", "grayscale(white)");
assertEqual("#000", "grayscale(black)");
assertEqual("#000", "grayscale($color: black)");
assertError("\"foo\" is not a color for 'grayscale'", "grayscale(\"foo\")");
});
describe('complement', function() {
assertEqual("#cba", "complement(#abc)");
assertEqual("cyan", "complement(red)");
assertEqual("red", "complement(aqua)");
assertEqual("#fff", "complement(white)");
assertEqual("#000", "complement(black)");
assertEqual("#000", "complement($color: black)");
assertError("\"foo\" is not a color for 'complement'", "complement(\"foo\")");
});
describe('invert', function() {
assertEqual("#123", "invert(#edc)");
assertEqual("rgba(245, 235, 225, 0.5)", "invert(rgba(10, 20, 30, 0.5))");
assertError("\"foo\" is not a color for 'invert'", "invert(\"foo\")");
});
describe('unquote', function() {
assertEqual('foo', 'unquote("foo")');
assertEqual('foo', 'unquote(foo)');
assertEqual('foo', 'unquote($string: foo)');
//assertError("red is not a string or literal for 'unquote'", "unquote(#f00)");
});
describe('quote', function() {
assertEqual('"foo"', 'quote(foo)');
assertEqual('"foo"', 'quote("foo")');
assertEqual('"foo"', 'quote($string: "foo")');
assertError("red is not a string or literal for 'quote'", "quote(#f00)");
});
describe('type-of', function() {
assertEqual("string", "type_of(\"asdf\")");
assertEqual("string", "type_of(asdf)");
assertEqual("number", "type_of(1px)");
assertEqual("bool", "type_of(true)");
assertEqual("color", "type_of(#fff)");
assertEqual("color", "type_of($value: #fff)");
});
describe('unit', function() {
assertEqual('""', "unit(100)");
assertEqual('"px"', "unit(100px)");
assertEqual('"px"', "unit($number: 100px)");
assertError("red is not a number for 'unit'", "unit(#f00)");
});
describe('unitless', function() {
assertEqual('true', "unitless(100)");
assertEqual('false', "unitless(100px)");
assertEqual('false', "unitless($number: 100px)");
assertError("red is not a number for 'unitless'", "unitless(#f00)");
});
describe('comparable', function() {
assertEqual('true', "comparable(2px, 1px)");
assertEqual('true', "comparable(10cm, 3mm)");
assertEqual('false', "comparable(100px, 3em)");
assertEqual('false', "comparable($number-1: 100px, $number-2: 3em)");
assertError("red is not a number for 'comparable'", "comparable(#f00, 1px)");
assertError("red is not a number for 'comparable'", "comparable(1px, #f00)");
});
describe('length', function() {
assertEqual("5", "length(1 2 3 4 5)");
assertEqual("1", "length(#f00)");
});
describe('nth', function() {
assertEqual("1", "nth(1 2 3, 1)");
assertEqual("2", "nth(1 2 3, 2)");
assertEqual("foo", "nth(foo, 1)");
assertEqual("foo", "nth(foo, -10)");
assertError("List index 1.5 must be an integer for 'nth'", "nth(foo, 1.5)");
assertError("List index 0 must be greater than or equal to 1 for 'nth'", "nth(foo, 0)");
assertError("List index is 5 but list is only 4 items long for 'nth'", "nth(1 2 3 4, 5)");
assertError("List index is 2 but list is only 1 item long for 'nth'", "nth(foo, 2)");
});
describe('join', function() {
assertEqual("1 2 3", "join(1 2, 3)");
assertEqual("1 2 3", "join(1, 2 3)");
assertEqual("1 2 3 4", "join(1 2, 3 4)");
assertEqual("1 2", "join(1, 2)");
assertEqual("1 2", "join(1, 2, auto)");
assertEqual("1, 2, 3, 4", "join(1 2, 3 4, comma)");
assertEqual("1, 2", "join(1, 2, comma)");
assertError("Separator name must be space, comma, or auto for 'join'", "join(1, 2, baboon)");
});
describe('if', function() {
assertEqual("1px", "if(true, 1px, 2px)");
assertEqual("2px", "if(false, 1px, 2px)");
});
describe("compat", function(){
assertEqual("rgba(0, 0, 0, 0.7)", "fade-in(rgba(0, 0, 0, 0.2), 0.5px)");
assertEqual("rgba(0, 0, 0, 0.2)", "fade-in($color: rgba(0, 0, 0, 0.2), $amount: 0%)");
assertEqual("rgba(0, 0, 0, 0.2)", "fade-out(rgba(0, 0, 0, 0.5), 0.3px)");
assertEqual("rgba(0, 0, 0, 0.2)", "fade-out($color: rgba(0, 0, 0, 0.2), $amount: 0)");
assertEqual("4", "length((foo, bar, baz, bip))");
assertEqual("3", "length((foo, bar, baz bip))");
assertEqual("3", "length((foo, bar, (baz, bip)))");
assertEqual("0", "length(())");
assertEqual("4", "length(1 2 () 3)");
assertEqual("3", "nth((1, 2, 3), 3)");
assertEqual("bar baz", "nth(foo (bar baz) bang, 2)");
assertError("List index is 1 but list is only 0 items long for 'nth'", "nth((), 1)");
assertEqual("true", "(1, 2, 3, 4) == join((1, 2), (3, 4))");
});
describe('introspection', function(){
assertEqual("1234", "strip-unit(1234px)");
assertEqual("1234", "strip-unit(1234rem)");
assertEqual("1234", "strip-unit(1234)");
assertEqual('true', 'unitless(1234)');
assertEqual('false', 'unitless(1234px)');
assertEqual('"px"', 'unit(1234px)');
assertEqual('"rem"', 'unit(1234rem)');
assertEqual('""', 'unit(1234)');
});
describe('failing', function() {
// We dont (yet) support numbers with multiple units
assertEqual("\"px*em\"", "unit(10px * 5em)");
assertEqual("\"em*px\"", "unit(5em * 10px)");
assertEqual("\"px*em/cm*rem\"", "unit(10px * 5em / 30cm / 1rem)");
// The following syntax breaks the parser
assertEqual("1 2 3 false", "1 2 3 4 == join(1 2, 3 4)");
assertEqual("false", "(1 2 (3 4)) == join(1 2, 3 4)");
assertEqual("1, 2, 3", "join((1, 2), 3)");
assertEqual("1, 2, 3", "join(1, (2, 3))");
assertEqual("1, 2, 3, 4", "join((1, 2), (3, 4))");
assertEqual("false", "(1, 2, (3, 4)) == join((1, 2), (3, 4))");
assertEqual("1 2 3 4", "join(1 2, (3, 4))");
assertEqual("1, 2, 3, 4", "join((1, 2), 3 4)");
assertEqual("1 2 3 4", "join((1, 2), (3, 4), space)");
assertEqual("1 2", "join(1 2, ())");
assertEqual("1, 2", "join((1, 2), ())");
assertEqual("true", "(1 2) == join(1 2, ())");
assertEqual("true", "(1, 2) == join((1, 2), ())");
assertEqual("false", "(1 2 ()) == join(1 2, ())");
assertEqual("false", "(1, 2, ()) == join((1, 2), ())");
assertEqual("1 2", "join((), 1 2)");
assertEqual("1, 2", "join((), (1, 2))");
assertEqual("true", "(1 2) == join((), 1 2)");
assertEqual("true", "(1, 2) == join((), (1, 2))");
assertEqual("false", "(1 2 ()) == join((), 1 2)");
assertEqual("false", "(1, 2, ()) == join((), (1, 2))");
// Named arguments to native functions needs to be supported before we can implement all the below ones
// def test_adjust_color
// # HSL
// assert_equal(evaluate("hsl(180, 30, 90)"),
// evaluate("adjust-color(hsl(120, 30, 90), $hue: 60deg)"))
// assert_equal(evaluate("hsl(120, 50, 90)"),
// evaluate("adjust-color(hsl(120, 30, 90), $saturation: 20%)"))
// assert_equal(evaluate("hsl(120, 30, 60)"),
// evaluate("adjust-color(hsl(120, 30, 90), $lightness: -30%)"))
// # RGB
// assert_equal(evaluate("rgb(15, 20, 30)"),
// evaluate("adjust-color(rgb(10, 20, 30), $red: 5)"))
// assert_equal(evaluate("rgb(10, 15, 30)"),
// evaluate("adjust-color(rgb(10, 20, 30), $green: -5)"))
// assert_equal(evaluate("rgb(10, 20, 40)"),
// evaluate("adjust-color(rgb(10, 20, 30), $blue: 10)"))
// # Alpha
// assert_equal(evaluate("hsla(120, 30, 90, 0.65)"),
// evaluate("adjust-color(hsl(120, 30, 90), $alpha: -0.35)"))
// assert_equal(evaluate("rgba(10, 20, 30, 0.9)"),
// evaluate("adjust-color(rgba(10, 20, 30, 0.4), $alpha: 0.5)"))
//
// # HSL composability
// assert_equal(evaluate("hsl(180, 20, 90)"),
// evaluate("adjust-color(hsl(120, 30, 90), $hue: 60deg, $saturation: -10%)"))
// assert_equal(evaluate("hsl(180, 20, 95)"),
// evaluate("adjust-color(hsl(120, 30, 90), $hue: 60deg, $saturation: -10%, $lightness: 5%)"))
// assert_equal(evaluate("hsla(120, 20, 95, 0.3)"),
// evaluate("adjust-color(hsl(120, 30, 90), $saturation: -10%, $lightness: 5%, $alpha: -0.7)"))
//
// # RGB composability
// assert_equal(evaluate("rgb(15, 20, 29)"),
// evaluate("adjust-color(rgb(10, 20, 30), $red: 5, $blue: -1)"))
// assert_equal(evaluate("rgb(15, 45, 29)"),
// evaluate("adjust-color(rgb(10, 20, 30), $red: 5, $green: 25, $blue: -1)"))
// assert_equal(evaluate("rgba(10, 25, 29, 0.7)"),
// evaluate("adjust-color(rgb(10, 20, 30), $green: 5, $blue: -1, $alpha: -0.3)"))
//
// # HSL range restriction
// assert_equal(evaluate("hsl(120, 30, 90)"),
// evaluate("adjust-color(hsl(120, 30, 90), $hue: 720deg)"))
// assert_equal(evaluate("hsl(120, 0, 90)"),
// evaluate("adjust-color(hsl(120, 30, 90), $saturation: -90%)"))
// assert_equal(evaluate("hsl(120, 30, 100)"),
// evaluate("adjust-color(hsl(120, 30, 90), $lightness: 30%)"))
//
// # RGB range restriction
// assert_equal(evaluate("rgb(255, 20, 30)"),
// evaluate("adjust-color(rgb(10, 20, 30), $red: 250)"))
// assert_equal(evaluate("rgb(10, 0, 30)"),
// evaluate("adjust-color(rgb(10, 20, 30), $green: -30)"))
// assert_equal(evaluate("rgb(10, 20, 0)"),
// evaluate("adjust-color(rgb(10, 20, 30), $blue: -40)"))
// end
//
// def test_adjust_color_tests_types
// assert_error_message("\"foo\" is not a color for `adjust-color'", "adjust-color(foo, $hue: 10)")
// # HSL
// assert_error_message("$hue: \"foo\" is not a number for `adjust-color'",
// "adjust-color(blue, $hue: foo)")
// assert_error_message("$saturation: \"foo\" is not a number for `adjust-color'",
// "adjust-color(blue, $saturation: foo)")
// assert_error_message("$lightness: \"foo\" is not a number for `adjust-color'",
// "adjust-color(blue, $lightness: foo)")
// # RGB
// assert_error_message("$red: \"foo\" is not a number for `adjust-color'",
// "adjust-color(blue, $red: foo)")
// assert_error_message("$green: \"foo\" is not a number for `adjust-color'",
// "adjust-color(blue, $green: foo)")
// assert_error_message("$blue: \"foo\" is not a number for `adjust-color'",
// "adjust-color(blue, $blue: foo)")
// # Alpha
// assert_error_message("$alpha: \"foo\" is not a number for `adjust-color'",
// "adjust-color(blue, $alpha: foo)")
// end
//
// def test_adjust_color_tests_arg_range
// # HSL
// assert_error_message("$saturation: Amount 101% must be between -100% and 100% for `adjust-color'",
// "adjust-color(blue, $saturation: 101%)")
// assert_error_message("$saturation: Amount -101% must be between -100% and 100% for `adjust-color'",
// "adjust-color(blue, $saturation: -101%)")
// assert_error_message("$lightness: Amount 101% must be between -100% and 100% for `adjust-color'",
// "adjust-color(blue, $lightness: 101%)")
// assert_error_message("$lightness: Amount -101% must be between -100% and 100% for `adjust-color'",
// "adjust-color(blue, $lightness: -101%)")
// # RGB
// assert_error_message("$red: Amount 256 must be between -255 and 255 for `adjust-color'",
// "adjust-color(blue, $red: 256)")
// assert_error_message("$red: Amount -256 must be between -255 and 255 for `adjust-color'",
// "adjust-color(blue, $red: -256)")
// assert_error_message("$green: Amount 256 must be between -255 and 255 for `adjust-color'",
// "adjust-color(blue, $green: 256)")
// assert_error_message("$green: Amount -256 must be between -255 and 255 for `adjust-color'",
// "adjust-color(blue, $green: -256)")
// assert_error_message("$blue: Amount 256 must be between -255 and 255 for `adjust-color'",
// "adjust-color(blue, $blue: 256)")
// assert_error_message("$blue: Amount -256 must be between -255 and 255 for `adjust-color'",
// "adjust-color(blue, $blue: -256)")
// # Alpha
// assert_error_message("$alpha: Amount 1.1 must be between -1 and 1 for `adjust-color'",
// "adjust-color(blue, $alpha: 1.1)")
// assert_error_message("$alpha: Amount -1.1 must be between -1 and 1 for `adjust-color'",
// "adjust-color(blue, $alpha: -1.1)")
// end
//
// def test_adjust_color_argument_errors
// assert_error_message("Unknown argument $hoo (260deg) for `adjust-color'",
// "adjust-color(blue, $hoo: 260deg)")
// assert_error_message("Cannot specify HSL and RGB values for a color at the same time for `adjust-color'",
// "adjust-color(blue, $hue: 120deg, $red: 10)");
// assert_error_message("10px is not a keyword argument for `adjust_color'",
// "adjust-color(blue, 10px)")
// assert_error_message("10px is not a keyword argument for `adjust_color'",
// "adjust-color(blue, 10px, 20px)")
// assert_error_message("10px is not a keyword argument for `adjust_color'",
// "adjust-color(blue, 10px, $hue: 180deg)")
// end
// def test_scale_color
// # HSL
// assert_equal(evaluate("hsl(120, 51, 90)"),
// evaluate("scale-color(hsl(120, 30, 90), $saturation: 30%)"))
// assert_equal(evaluate("hsl(120, 30, 76.5)"),
// evaluate("scale-color(hsl(120, 30, 90), $lightness: -15%)"))
// # RGB
// assert_equal(evaluate("rgb(157, 20, 30)"),
// evaluate("scale-color(rgb(10, 20, 30), $red: 60%)"))
// assert_equal(evaluate("rgb(10, 38.8, 30)"),
// evaluate("scale-color(rgb(10, 20, 30), $green: 8%)"))
// assert_equal(evaluate("rgb(10, 20, 20)"),
// evaluate("scale-color(rgb(10, 20, 30), $blue: -(1/3)*100%)"))
// # Alpha
// assert_equal(evaluate("hsla(120, 30, 90, 0.86)"),
// evaluate("scale-color(hsl(120, 30, 90), $alpha: -14%)"))
// assert_equal(evaluate("rgba(10, 20, 30, 0.82)"),
// evaluate("scale-color(rgba(10, 20, 30, 0.8), $alpha: 10%)"))
//
// # HSL composability
// assert_equal(evaluate("hsl(120, 51, 76.5)"),
// evaluate("scale-color(hsl(120, 30, 90), $saturation: 30%, $lightness: -15%)"))
// assert_equal(evaluate("hsla(120, 51, 90, 0.2)"),
// evaluate("scale-color(hsl(120, 30, 90), $saturation: 30%, $alpha: -80%)"))
//
// # RGB composability
// assert_equal(evaluate("rgb(157, 38.8, 30)"),
// evaluate("scale-color(rgb(10, 20, 30), $red: 60%, $green: 8%)"))
// assert_equal(evaluate("rgb(157, 38.8, 20)"),
// evaluate("scale-color(rgb(10, 20, 30), $red: 60%, $green: 8%, $blue: -(1/3)*100%)"))
// assert_equal(evaluate("rgba(10, 38.8, 20, 0.55)"),
// evaluate("scale-color(rgba(10, 20, 30, 0.5), $green: 8%, $blue: -(1/3)*100%, $alpha: 10%)"))
//
// # Extremes
// assert_equal(evaluate("hsl(120, 100, 90)"),
// evaluate("scale-color(hsl(120, 30, 90), $saturation: 100%)"))
// assert_equal(evaluate("hsl(120, 30, 90)"),
// evaluate("scale-color(hsl(120, 30, 90), $saturation: 0%)"))
// assert_equal(evaluate("hsl(120, 0, 90)"),
// evaluate("scale-color(hsl(120, 30, 90), $saturation: -100%)"))
// end
//
// def test_scale_color_tests_types
// assert_error_message("\"foo\" is not a color for `scale-color'", "scale-color(foo, $red: 10%)")
// # HSL
// assert_error_message("$saturation: \"foo\" is not a number for `scale-color'",
// "scale-color(blue, $saturation: foo)")
// assert_error_message("$lightness: \"foo\" is not a number for `scale-color'",
// "scale-color(blue, $lightness: foo)")
// # RGB
// assert_error_message("$red: \"foo\" is not a number for `scale-color'",
// "scale-color(blue, $red: foo)")
// assert_error_message("$green: \"foo\" is not a number for `scale-color'",
// "scale-color(blue, $green: foo)")
// assert_error_message("$blue: \"foo\" is not a number for `scale-color'",
// "scale-color(blue, $blue: foo)")
// # Alpha
// assert_error_message("$alpha: \"foo\" is not a number for `scale-color'",
// "scale-color(blue, $alpha: foo)")
// end
//
// def test_scale_color_argument_errors
// # Range
// assert_error_message("$saturation: Amount 101% must be between -100% and 100% for `scale-color'",
// "scale-color(blue, $saturation: 101%)")
// assert_error_message("$red: Amount -101% must be between -100% and 100% for `scale-color'",
// "scale-color(blue, $red: -101%)")
// assert_error_message("$alpha: Amount -101% must be between -100% and 100% for `scale-color'",
// "scale-color(blue, $alpha: -101%)")
//
// # Unit
// assert_error_message("$saturation: Amount 80 must be a % (e.g. 80%) for `scale-color'",
// "scale-color(blue, $saturation: 80)")
// assert_error_message("$alpha: Amount 0.5 must be a % (e.g. 0.5%) for `scale-color'",
// "scale-color(blue, $alpha: 0.5)")
//
// # Unknown argument
// assert_error_message("Unknown argument $hue (80%) for `scale-color'", "scale-color(blue, $hue: 80%)")
//
// # Non-keyword arg
// assert_error_message("10px is not a keyword argument for `scale_color'", "scale-color(blue, 10px)")
//
// # HSL/RGB
// assert_error_message("Cannot specify HSL and RGB values for a color at the same time for `scale-color'",
// "scale-color(blue, $lightness: 10%, $red: 20%)");
// end
// def test_change_color
// # HSL
// assert_equal(evaluate("hsl(195, 30, 90)"),
// evaluate("change-color(hsl(120, 30, 90), $hue: 195deg)"))
// assert_equal(evaluate("hsl(120, 50, 90)"),
// evaluate("change-color(hsl(120, 30, 90), $saturation: 50%)"))
// assert_equal(evaluate("hsl(120, 30, 40)"),
// evaluate("change-color(hsl(120, 30, 90), $lightness: 40%)"))
// # RGB
// assert_equal(evaluate("rgb(123, 20, 30)"),
// evaluate("change-color(rgb(10, 20, 30), $red: 123)"))
// assert_equal(evaluate("rgb(10, 234, 30)"),
// evaluate("change-color(rgb(10, 20, 30), $green: 234)"))
// assert_equal(evaluate("rgb(10, 20, 198)"),
// evaluate("change-color(rgb(10, 20, 30), $blue: 198)"))
// # Alpha
// assert_equal(evaluate("rgba(10, 20, 30, 0.76)"),
// evaluate("change-color(rgb(10, 20, 30), $alpha: 0.76)"))
//
// # HSL composability
// assert_equal(evaluate("hsl(56, 30, 47)"),
// evaluate("change-color(hsl(120, 30, 90), $hue: 56deg, $lightness: 47%)"))
// assert_equal(evaluate("hsla(56, 30, 47, 0.9)"),
// evaluate("change-color(hsl(120, 30, 90), $hue: 56deg, $lightness: 47%, $alpha: 0.9)"))
// end
//
// def test_change_color_tests_types
// assert_error_message("\"foo\" is not a color for `change-color'", "change-color(foo, $red: 10%)")
// # HSL
// assert_error_message("$saturation: \"foo\" is not a number for `change-color'",
// "change-color(blue, $saturation: foo)")
// assert_error_message("$lightness: \"foo\" is not a number for `change-color'",
// "change-color(blue, $lightness: foo)")
// # RGB
// assert_error_message("$red: \"foo\" is not a number for `change-color'", "change-color(blue, $red: foo)")
// assert_error_message("$green: \"foo\" is not a number for `change-color'", "change-color(blue, $green: foo)")
// assert_error_message("$blue: \"foo\" is not a number for `change-color'", "change-color(blue, $blue: foo)")
// # Alpha
// assert_error_message("$alpha: \"foo\" is not a number for `change-color'", "change-color(blue, $alpha: foo)")
// end
//
// def test_change_color_argument_errors
// # Range
// assert_error_message("Saturation must be between 0 and 100 for `change-color'",
// "change-color(blue, $saturation: 101%)")
// assert_error_message("Lightness must be between 0 and 100 for `change-color'",
// "change-color(blue, $lightness: 101%)")
// assert_error_message("Red value must be between 0 and 255 for `change-color'",
// "change-color(blue, $red: -1)")
// assert_error_message("Green value must be between 0 and 255 for `change-color'",
// "change-color(blue, $green: 256)")
// assert_error_message("Blue value must be between 0 and 255 for `change-color'",
// "change-color(blue, $blue: 500)")
//
// # Unknown argument
// assert_error_message("Unknown argument $hoo (80%) for `change-color'", "change-color(blue, $hoo: 80%)")
//
// # Non-keyword arg
// assert_error_message("10px is not a keyword argument for `change_color'", "change-color(blue, 10px)")
//
// # HSL/RGB
// assert_error_message("Cannot specify HSL and RGB values for a color at the same time for `change-color'",
// "change-color(blue, $lightness: 10%, $red: 120)");
// end
});
});