mojule.Color1.01 vs 1.02 vs 1.03

JavaScript performance comparison

Revision 4 of this test case created by Nik

Info

Comparing refactored mojule.Color using methods outlined in Stop Nesting Functions! with original mojule.Color code. I wanted to try applying the technique to some non-trivial code. The entire test suite for mojule.Color is run.

Preparation code

<!doctype html>
<html>
  <head>
    <title>mojule.Color tests</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<script src="http://nrkn.com/temp/mojuleVsSetup.js"></script>
  </head>
  <body>
    <h1 id="qunit-header">QUnit mojule.Color</h1>  
    <h2 id="qunit-banner"></h2>  
    <h2 id="qunit-userAgent"></h2>  
    <ol id="qunit-tests">    
  </body>
</html>  
<script>
  Benchmark.prototype.setup = function() {
            function runTests( tests ) {
              expect( tests.length );
              for( var i = 0; i < tests.length; i++ ) {
                var test = tests[ i ];            
                if( typeof test.expect == 'object' ) {
                  deepEqual(
                    test.result,
                    test.expect,
                    ( test.name ? test.name : '' ) + ( test.description ? test.description : '' ) + '. Expected ' + test.expect + ' as the result, result was: ' + test.result 
                  );            
                  continue;
                }
                equal(
                  test.result,
                  test.expect,
                  ( test.name ? test.name : '' ) + ( test.description ? test.description : '' ) + '. Expected ' + test.expect + ' as the result, result was: ' + test.result 
                );
              }                      
            }
  };
</script>

Preparation code output

mojule.Color tests

QUnit mojule.Color

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
mojule.Color v1.01
 
        
        module( 'mojule1.Color1' );
        
        test( 'mojule1.Color1 Constructor', function(){
          var pass = '#39f',
              alphaPass = 'rgba( 51, 153, 255, 0.5 )',
              tests = [
                { 
                  description: 'no args',
                  value: null,
                  expect: '#000'
                },              
                { 
                  description: 'rgb object',
                  value: { red: 51, green: 153, blue: 255 },
                  expect: pass
                },
                { 
                  description: 'rgba object',
                  value: { red: 51, green: 153, blue: 255, alpha: 0.5 },
                  expect: alphaPass
                },
                { 
                  description: 'hsl object',
                  value: { hue: 210, saturation: 100, lightness: 60 },
                  expect: pass
                },
                { 
                  description: 'hsla object',
                  value: { hue: 210, saturation: 100, lightness: 60, alpha: 0.5 },
                  expect: alphaPass
                },
                {
                  description: 'rgb partial object',
                  value: { red: 255 },
                  expect: '#f00'
                },                
                {
                  description: 'hsl partial object',
                  value: { lightness: 100 },
                  expect: '#fff'
                },
                {
                  description: 'css hex 3',
                  value: '#39f',
                  expect: pass
                },
                {
                  description: 'css hex 6',
                  value: '#3399ff',
                  expect: pass
                },
                {
                  description: 'css rgb integer',
                  value: 'rgb( 51, 153, 255 )',
                  expect: pass
                },
                {
                  description: 'css rgb percentage',
                  value: 'rgb( 20%, 60%, 100% )',
                  expect: pass
                },
                {
                  description: 'css rgba integer',
                  value: 'rgba( 51, 153, 255, 0.5 )',
                  expect: alphaPass
                },
                {
                  description: 'css rgba percentage',
                  value: 'rgba( 20%, 60%, 100%, 0.5 )',
                  expect: alphaPass
                },
                { 
                  description: 'css hsl',
                  value: 'hsl( 210, 100%, 60% )',
                  expect: pass
                },
                { 
                  description: 'css hsla',
                  value: 'hsla( 210, 100%, 60%, 0.5 )',
                  expect: alphaPass
                },
                {
                  description: 'named color',
                  value: 'dodgerblue',
                  expect: '#1e90ff'
                },
                {
                  description: 'existing color',
                  value: new Color1( '#39f' ),
                  expect: pass
                }
              ];
              
          function result( test ) {
            return new Color1( test.value ).css()
          }     

          for( var i = 0; i < tests.length; i++ ) {
            tests[ i ].result = result( tests[ i ] );
          }  
          
          runTests( tests );
        });
        
        test( 'mojule1.Color1 Informative functions', function(){
          var rgbaObject = { red: 51, green: 153, blue: 255, alpha: 0.5 },
              color = new Color1( rgbaObject ),
              tests = [
                { 
                  name: 'red',
                  expect: 51
                },
                {
                  name: 'green',
                  expect: 153
                },
                {
                  name: 'blue',
                  expect: 255
                },
                {
                  name: 'hue',
                  expect: 210
                },
                {
                  name: 'saturation',
                  expect: 100
                },
                {
                  name: 'lightness',
                  expect: 60
                },
                {
                  name: 'alpha',
                  expect: 0.5
                },
                {
                  name: 'css',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },
                {
                  name: 'hex',
                  expect: '#39f'
                },
                {
                  name: 'brightness',
                  expect: 134.13
                },
                {
                  name: 'brightnessDifference',
                  args: [ new Color1( '#fff' ) ],
                  expect: 120.87
                },
                {
                  name: 'colorDifference',
                  args: [ new Color1( '#f90' ) ],
                  expect: 459
                },
                {
                  name: 'hasEnoughContrast',
                  args: [ new Color1( '#f90' ) ],
                  expect: false
                },
                {
                  name: 'hasEnoughContrast',
                  description: ' with args to reduce threshold',
                  args: [ new Color1( '#f90' ), 450, 30 ],
                  expect: true
                },
                {
                  name: 'rgb',
                  expect: {
                    red: 51,
                    green: 153,
                    blue: 255,
                    alpha: 0.5,
                    css: 'rgba( 51, 153, 255, 0.5 )'
                  }
                },
                {
                  name: 'rgba',
                  expect: {
                    red: 51,
                    green: 153,
                    blue: 255,
                    alpha: 0.5,
                    css: 'rgba( 51, 153, 255, 0.5 )'
                  }
                },
                {
                  name: 'hsl',
                  expect: {
                    hue: 210,
                    saturation: 100,
                    lightness: 60,
                    alpha: 0.5,
                    css: 'hsla( 210, 100%, 60%, 0.5 )'
                  }
                },                
                {
                  name: 'hsla',
                  expect: {
                    hue: 210,
                    saturation: 100,
                    lightness: 60,
                    alpha: 0.5,
                    css: 'hsla( 210, 100%, 60%, 0.5 )'
                  }
                },
                {
                  name: 'getContrastingTone',
                  expect: '#fff',
                  result: color.getContrastingTone().css()
                },
                {
                  name: 'clone',
                  expect: 'rgba( 51, 153, 255, 0.5 )',
                  result: color.clone().css()
                }
              ];
              
          function result( test ) {
            //IE<9 does NOT like you trying to call apply with undefined
            if( test.args !== undefined ) {
              return color[ test.name ].apply( color, test.args );
            }
            return color[ test.name ]();          
          }
          
          for( var i = 0; i < tests.length; i++ ) {
            if( tests[ i ].result === undefined ) {
              tests[ i ].result = result( tests[ i ] );
            }
          }         
          
          runTests( tests );        
        });
        
        test( 'mojule1.Color1 Modifying functions', function(){
          var color,
              tests = [
                { 
                  args: [ 255 ],
                  name: 'red',
                  expect: '#f00'
                },
                { 
                  args: [ 255 ],
                  name: 'green',
                  expect: '#0f0'
                },
                { 
                  args: [ 255 ],
                  name: 'blue',
                  expect: '#00f'
                },
                { 
                  args: [ 210 ],
                  name: 'hue',
                  expect: '#007fff',
                  initialColor: '#f00'
                },  
                {
                  args: [ 50 ],
                  name: 'saturation',
                  expect: '#bf4040',
                  initialColor: '#f00'
                },                
                {
                  args: [ 25 ],
                  name: 'lightness',
                  expect: '#800000',
                  initialColor: '#f00'
                },
                {
                  args: [ 0.5 ],
                  name: 'alpha',
                  expect: 'rgba( 255, 0, 0, 0.5 )',
                  initialColor: '#f00'
                },
                {
                  args: [{red: 51, green: 153, blue: 255}],
                  name: 'rgb',
                  expect: '#39f'
                },                
                {
                  args: [{r: 51, g: 153, b: 255}],
                  name: 'rgb',
                  expect: '#39f'
                },
                {
                  args: [{red: 51, green: 153, blue: 255, alpha: 0.5}],
                  name: 'rgba',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: [{r: 51, g: 153, b: 255, a: 0.5}],
                  name: 'rgba',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },
                {
                  args: [{hue: 210, saturation: 100, lightness: 60}],
                  name: 'hsl',
                  expect: '#39f'
                },                 
                {
                  args: [{h: 210, s: 100, l: 60}],
                  name: 'hsl',
                  expect: '#39f'
                },                 
                {
                  args: [{hue: 210, saturation: 100, lightness: 60, alpha: 0.5}],
                  name: 'hsla',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: [{h: 210, s: 100, l: 60, a: 0.5}],
                  name: 'hsla',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: ['#39f'],
                  name: 'hex',
                  expect: '#39f'
                },                 
                {
                  args: [{hue: 0.5, saturation: 0.5, lightness: 0.5, alpha: 0.5}],
                  name: 'multiplyHsla',
                  expect: 'rgba( 57, 115, 38, 0.5 )',
                  initialColor: '#39f'
                },                
                {
                  args: [{hue: -105, saturation: -50, lightness: -30, alpha: -0.5}],
                  name: 'sumHsla',
                  expect: 'rgba( 57, 115, 38, 0.5 )',
                  initialColor: '#39f'                  
                }              
              ];
          
          function result( test ) {
            var color = new Color1( test.initialColor );
            return color[ test.name ].apply( color, test.args ).css();
          }
          
          for( var i = 0; i < tests.length; i++ ) {
            tests[ i ].result = result( tests[ i ] );
          }             
          
          runTests( tests );
        });
        
        module( 'mojule1.Color1 Static Functions' );
        
        test( 'mojule1.Color1.range', function(){
          expect( 18 );
          
          var noargs = Color1.range();
          
          equal(
            noargs.length,
            2,
            'No args, checking length. Expected 2 as the result, result was: ' + noargs.length
          );
          
          equal(
            noargs[ 0 ].css(),
            '#000',
            'No args, checking first element for default color. Expected #000 as the result, result was: ' + noargs[ 0 ].css()
          );
          
          equal(
            noargs[ 1 ].css(),
            '#000',
            'No args, checking last element for default color. Expected #000 as the result, result was: ' + noargs[ 1 ].css()
          );
          
          var onestep = Color1.range( '#39f', '#f90', 1 );
          
          equal(
            onestep.length,
            2,
            'Steps specified as < 2, checking length. Expected 2 as the result, result was: ' + onestep.length
          );
          
          equal(
            onestep[ 0 ].css(),
            '#39f',
            'Steps specified as < 2, checking first element. Expected #39f as the result, result was: ' + onestep[ 0 ].css()
          ); 
          
          equal(
            onestep[ 1 ].css(),
            '#f90',
            'Steps specified as < 2, checking last element. Expected #f90 as the result, result was: ' + onestep[ 1 ].css()
          );
          
          var threestep = Color1.range( '#39f', '#f90', 3 ); 
          
          equal(
            threestep.length,
            3,
            'Steps specified 3, checking length. Expected 3 as the result, result was: ' + threestep.length
          );
          
          equal(
            threestep[ 1 ].css(),
            '#1aff25',
            'Steps specified as 3, checking middle element. Expected #1aff25 as the result, result was: ' + threestep[ 1 ].css()
          );
          
          var hueStart = {
            hue: 0,
            saturation: 100,
            lightness: 50
          };
          
          var hueEnd = {
            hue: 180
          };
          
          var hueRange = Color1.range( hueStart, hueEnd, 3 );
          
          equal(
            hueRange[ 1 ].css(),
            '#80ff00',
            'Partial arguments for hue, checking middle element. Expected #448700 as the result, result was: ' + hueRange[ 1 ].css()
          );
          
          var satStart = {
            hue: 210,
            saturation: 100,
            lightness: 50
          };
          
          var satEnd = {
            saturation: 0
          };
          
          var satRange = Color1.range( satStart, satEnd, 3 );
          
          equal(
            satRange[ 1 ].css(),
            '#407fbf',
            'Partial arguments for saturation, checking middle element. Expected #407fbf as the result, result was: ' + satRange[ 1 ].css()
          ); 

          var litStart = {
            hue: 210,
            saturation: 100,
            lightness: 0
          };
          
          var litEnd = {
            lightness: 100
          };
          
          var litRange = Color1.range( litStart, litEnd, 3 );
          
          equal(
            litRange[ 1 ].css(),
            '#007fff',
            'Partial arguments for saturation, checking middle element. Expected #007fff as the result, result was: ' + litRange[ 1 ].css()
          );
          
          ok(
            Color1.canParse( '#39f' ),
            'canParse a valid color. Expected true as the result, result was: ' + Color1.canParse( '#39f' )
          );
          
          ok(
            Color1.canParse( 'dodgerblue' ),
            'canParse a valid named color. Expected true as the result, result was: ' + Color1.canParse( 'dodgerblue' )
          );
          
          equal(
            Color1.parserType( 'dodgerblue' ),
            'cssNamedColor',
            'checking parserType for named color. Expected "cssNamedColor" as the result, result was: ' + Color1.parserType( 'dodgerblue' )
          );
          
          var colorArray = [ 51, 153, 255, 0.5 ];
          
          ok(
            !Color1.canParse( colorArray ),
            'canParse an invalid color. Expected false as the result, result was: ' + Color1.canParse( colorArray )
          );
          
          var arrayParser = {
            predicate:  function( value ) {
                          return value instanceof Array && value.length > 0;
                        },
            parse:  function( value, color ) {
              var rgba = {};
              rgba[ 'red' ] = value[ 0 ];
              if( value.length > 1 ) {
                rgba[ 'green' ] = value[ 1 ];
              }
              if( value.length > 2 ) {
                rgba[ 'blue' ] = value[ 2 ];
              }
              if( value.length > 3 ) {
                rgba[ 'alpha' ] = value[ 3 ];
              }
              return color.rgba( rgba );
            }
          }; 

          Color1.addParser( 'array', arrayParser );
          
          ok(
            Color1.canParse( colorArray ),
            'check canParse after calling addParser. Expected true as the result, result was: ' + Color1.canParse( colorArray )
          ); 

          equals(
            new Color1( colorArray ).css(),
            'rgba( 51, 153, 255, 0.5 )',
            'results of added parser. Expected rgba( 51, 153, 255, 0.5 ) as the result, result was: ' + new Color1( colorArray ).css()
          )
          
          Color1.removeParser( 'array' );
          
          ok(
            !Color1.canParse( colorArray ),
            'check canParse after calling removeParser. Expected false as the result, result was: ' + Color1.canParse( colorArray )
          ); 
        });       
 
 pending…
mojule.Color v1.02
 
        
        module( 'mojule2.Color2' );
        
        test( 'mojule2.Color2 Constructor', function(){
          var pass = '#39f',
              alphaPass = 'rgba( 51, 153, 255, 0.5 )',
              tests = [
                { 
                  description: 'no args',
                  value: null,
                  expect: '#000'
                },              
                { 
                  description: 'rgb object',
                  value: { red: 51, green: 153, blue: 255 },
                  expect: pass
                },
                { 
                  description: 'rgba object',
                  value: { red: 51, green: 153, blue: 255, alpha: 0.5 },
                  expect: alphaPass
                },
                { 
                  description: 'hsl object',
                  value: { hue: 210, saturation: 100, lightness: 60 },
                  expect: pass
                },
                { 
                  description: 'hsla object',
                  value: { hue: 210, saturation: 100, lightness: 60, alpha: 0.5 },
                  expect: alphaPass
                },
                {
                  description: 'rgb partial object',
                  value: { red: 255 },
                  expect: '#f00'
                },                
                {
                  description: 'hsl partial object',
                  value: { lightness: 100 },
                  expect: '#fff'
                },
                {
                  description: 'css hex 3',
                  value: '#39f',
                  expect: pass
                },
                {
                  description: 'css hex 6',
                  value: '#3399ff',
                  expect: pass
                },
                {
                  description: 'css rgb integer',
                  value: 'rgb( 51, 153, 255 )',
                  expect: pass
                },
                {
                  description: 'css rgb percentage',
                  value: 'rgb( 20%, 60%, 100% )',
                  expect: pass
                },
                {
                  description: 'css rgba integer',
                  value: 'rgba( 51, 153, 255, 0.5 )',
                  expect: alphaPass
                },
                {
                  description: 'css rgba percentage',
                  value: 'rgba( 20%, 60%, 100%, 0.5 )',
                  expect: alphaPass
                },
                { 
                  description: 'css hsl',
                  value: 'hsl( 210, 100%, 60% )',
                  expect: pass
                },
                { 
                  description: 'css hsla',
                  value: 'hsla( 210, 100%, 60%, 0.5 )',
                  expect: alphaPass
                },
                {
                  description: 'named color',
                  value: 'dodgerblue',
                  expect: '#1e90ff'
                },
                {
                  description: 'existing color',
                  value: new Color2( '#39f' ),
                  expect: pass
                }
              ];
              
          function result( test ) {
            return new Color2( test.value ).css()
          }     

          for( var i = 0; i < tests.length; i++ ) {
            tests[ i ].result = result( tests[ i ] );
          }  
          
          runTests( tests );
        });
        
        test( 'mojule2.Color2 Informative functions', function(){
          var rgbaObject = { red: 51, green: 153, blue: 255, alpha: 0.5 },
              color = new Color2( rgbaObject ),
              tests = [
                { 
                  name: 'red',
                  expect: 51
                },
                {
                  name: 'green',
                  expect: 153
                },
                {
                  name: 'blue',
                  expect: 255
                },
                {
                  name: 'hue',
                  expect: 210
                },
                {
                  name: 'saturation',
                  expect: 100
                },
                {
                  name: 'lightness',
                  expect: 60
                },
                {
                  name: 'alpha',
                  expect: 0.5
                },
                {
                  name: 'css',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },
                {
                  name: 'hex',
                  expect: '#39f'
                },
                {
                  name: 'brightness',
                  expect: 134.13
                },
                {
                  name: 'brightnessDifference',
                  args: [ new Color2( '#fff' ) ],
                  expect: 120.87
                },
                {
                  name: 'colorDifference',
                  args: [ new Color2( '#f90' ) ],
                  expect: 459
                },
                {
                  name: 'hasEnoughContrast',
                  args: [ new Color2( '#f90' ) ],
                  expect: false
                },
                {
                  name: 'hasEnoughContrast',
                  description: ' with args to reduce threshold',
                  args: [ new Color2( '#f90' ), 450, 30 ],
                  expect: true
                },
                {
                  name: 'rgb',
                  expect: {
                    red: 51,
                    green: 153,
                    blue: 255,
                    alpha: 0.5,
                    css: 'rgba( 51, 153, 255, 0.5 )'
                  }
                },
                {
                  name: 'rgba',
                  expect: {
                    red: 51,
                    green: 153,
                    blue: 255,
                    alpha: 0.5,
                    css: 'rgba( 51, 153, 255, 0.5 )'
                  }
                },
                {
                  name: 'hsl',
                  expect: {
                    hue: 210,
                    saturation: 100,
                    lightness: 60,
                    alpha: 0.5,
                    css: 'hsla( 210, 100%, 60%, 0.5 )'
                  }
                },                
                {
                  name: 'hsla',
                  expect: {
                    hue: 210,
                    saturation: 100,
                    lightness: 60,
                    alpha: 0.5,
                    css: 'hsla( 210, 100%, 60%, 0.5 )'
                  }
                },
                {
                  name: 'getContrastingTone',
                  expect: '#fff',
                  result: color.getContrastingTone().css()
                },
                {
                  name: 'clone',
                  expect: 'rgba( 51, 153, 255, 0.5 )',
                  result: color.clone().css()
                }
              ];
              
          function result( test ) {
            //IE<9 does NOT like you trying to call apply with undefined
            if( test.args !== undefined ) {
              return color[ test.name ].apply( color, test.args );
            }
            return color[ test.name ]();          
          }
          
          for( var i = 0; i < tests.length; i++ ) {
            if( tests[ i ].result === undefined ) {
              tests[ i ].result = result( tests[ i ] );
            }
          }         
          
          runTests( tests );        
        });
        
        test( 'mojule2.Color2 Modifying functions', function(){
          var color,
              tests = [
                { 
                  args: [ 255 ],
                  name: 'red',
                  expect: '#f00'
                },
                { 
                  args: [ 255 ],
                  name: 'green',
                  expect: '#0f0'
                },
                { 
                  args: [ 255 ],
                  name: 'blue',
                  expect: '#00f'
                },
                { 
                  args: [ 210 ],
                  name: 'hue',
                  expect: '#007fff',
                  initialColor: '#f00'
                },  
                {
                  args: [ 50 ],
                  name: 'saturation',
                  expect: '#bf4040',
                  initialColor: '#f00'
                },                
                {
                  args: [ 25 ],
                  name: 'lightness',
                  expect: '#800000',
                  initialColor: '#f00'
                },
                {
                  args: [ 0.5 ],
                  name: 'alpha',
                  expect: 'rgba( 255, 0, 0, 0.5 )',
                  initialColor: '#f00'
                },
                {
                  args: [{red: 51, green: 153, blue: 255}],
                  name: 'rgb',
                  expect: '#39f'
                },                
                {
                  args: [{r: 51, g: 153, b: 255}],
                  name: 'rgb',
                  expect: '#39f'
                },
                {
                  args: [{red: 51, green: 153, blue: 255, alpha: 0.5}],
                  name: 'rgba',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: [{r: 51, g: 153, b: 255, a: 0.5}],
                  name: 'rgba',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },
                {
                  args: [{hue: 210, saturation: 100, lightness: 60}],
                  name: 'hsl',
                  expect: '#39f'
                },                 
                {
                  args: [{h: 210, s: 100, l: 60}],
                  name: 'hsl',
                  expect: '#39f'
                },                 
                {
                  args: [{hue: 210, saturation: 100, lightness: 60, alpha: 0.5}],
                  name: 'hsla',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: [{h: 210, s: 100, l: 60, a: 0.5}],
                  name: 'hsla',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: ['#39f'],
                  name: 'hex',
                  expect: '#39f'
                },                 
                {
                  args: [{hue: 0.5, saturation: 0.5, lightness: 0.5, alpha: 0.5}],
                  name: 'multiplyHsla',
                  expect: 'rgba( 57, 115, 38, 0.5 )',
                  initialColor: '#39f'
                },                
                {
                  args: [{hue: -105, saturation: -50, lightness: -30, alpha: -0.5}],
                  name: 'sumHsla',
                  expect: 'rgba( 57, 115, 38, 0.5 )',
                  initialColor: '#39f'                  
                }              
              ];
          
          function result( test ) {
            var color = new Color2( test.initialColor );
            return color[ test.name ].apply( color, test.args ).css();
          }
          
          for( var i = 0; i < tests.length; i++ ) {
            tests[ i ].result = result( tests[ i ] );
          }             
          
          runTests( tests );
        });
        
        module( 'mojule2.Color2 Static Functions' );
        
        test( 'mojule2.Color2.range', function(){
          expect( 18 );
          
          var noargs = Color2.range();
          
          equal(
            noargs.length,
            2,
            'No args, checking length. Expected 2 as the result, result was: ' + noargs.length
          );
          
          equal(
            noargs[ 0 ].css(),
            '#000',
            'No args, checking first element for default color. Expected #000 as the result, result was: ' + noargs[ 0 ].css()
          );
          
          equal(
            noargs[ 1 ].css(),
            '#000',
            'No args, checking last element for default color. Expected #000 as the result, result was: ' + noargs[ 1 ].css()
          );
          
          var onestep = Color2.range( '#39f', '#f90', 1 );
          
          equal(
            onestep.length,
            2,
            'Steps specified as < 2, checking length. Expected 2 as the result, result was: ' + onestep.length
          );
          
          equal(
            onestep[ 0 ].css(),
            '#39f',
            'Steps specified as < 2, checking first element. Expected #39f as the result, result was: ' + onestep[ 0 ].css()
          ); 
          
          equal(
            onestep[ 1 ].css(),
            '#f90',
            'Steps specified as < 2, checking last element. Expected #f90 as the result, result was: ' + onestep[ 1 ].css()
          );
          
          var threestep = Color2.range( '#39f', '#f90', 3 ); 
          
          equal(
            threestep.length,
            3,
            'Steps specified 3, checking length. Expected 3 as the result, result was: ' + threestep.length
          );
          
          equal(
            threestep[ 1 ].css(),
            '#1aff25',
            'Steps specified as 3, checking middle element. Expected #1aff25 as the result, result was: ' + threestep[ 1 ].css()
          );
          
          var hueStart = {
            hue: 0,
            saturation: 100,
            lightness: 50
          };
          
          var hueEnd = {
            hue: 180
          };
          
          var hueRange = Color2.range( hueStart, hueEnd, 3 );
          
          equal(
            hueRange[ 1 ].css(),
            '#80ff00',
            'Partial arguments for hue, checking middle element. Expected #448700 as the result, result was: ' + hueRange[ 1 ].css()
          );
          
          var satStart = {
            hue: 210,
            saturation: 100,
            lightness: 50
          };
          
          var satEnd = {
            saturation: 0
          };
          
          var satRange = Color2.range( satStart, satEnd, 3 );
          
          equal(
            satRange[ 1 ].css(),
            '#407fbf',
            'Partial arguments for saturation, checking middle element. Expected #407fbf as the result, result was: ' + satRange[ 1 ].css()
          ); 

          var litStart = {
            hue: 210,
            saturation: 100,
            lightness: 0
          };
          
          var litEnd = {
            lightness: 100
          };
          
          var litRange = Color2.range( litStart, litEnd, 3 );
          
          equal(
            litRange[ 1 ].css(),
            '#007fff',
            'Partial arguments for saturation, checking middle element. Expected #007fff as the result, result was: ' + litRange[ 1 ].css()
          );
          
          ok(
            Color2.canParse( '#39f' ),
            'canParse a valid color. Expected true as the result, result was: ' + Color2.canParse( '#39f' )
          );
          
          ok(
            Color2.canParse( 'dodgerblue' ),
            'canParse a valid named color. Expected true as the result, result was: ' + Color2.canParse( 'dodgerblue' )
          );
          
          equal(
            Color2.parserType( 'dodgerblue' ),
            'cssNamedColor',
            'checking parserType for named color. Expected "cssNamedColor" as the result, result was: ' + Color2.parserType( 'dodgerblue' )
          );
          
          var colorArray = [ 51, 153, 255, 0.5 ];
          
          ok(
            !Color2.canParse( colorArray ),
            'canParse an invalid color. Expected false as the result, result was: ' + Color2.canParse( colorArray )
          );
          
          var arrayParser = {
            predicate:  function( value ) {
                          return value instanceof Array && value.length > 0;
                        },
            parse:  function( value, color ) {
              var rgba = {};
              rgba[ 'red' ] = value[ 0 ];
              if( value.length > 1 ) {
                rgba[ 'green' ] = value[ 1 ];
              }
              if( value.length > 2 ) {
                rgba[ 'blue' ] = value[ 2 ];
              }
              if( value.length > 3 ) {
                rgba[ 'alpha' ] = value[ 3 ];
              }
              return color.rgba( rgba );
            }
          }; 

          Color2.addParser( 'array', arrayParser );
          
          ok(
            Color2.canParse( colorArray ),
            'check canParse after calling addParser. Expected true as the result, result was: ' + Color2.canParse( colorArray )
          ); 

          equals(
            new Color2( colorArray ).css(),
            'rgba( 51, 153, 255, 0.5 )',
            'results of added parser. Expected rgba( 51, 153, 255, 0.5 ) as the result, result was: ' + new Color2( colorArray ).css()
          )
          
          Color2.removeParser( 'array' );
          
          ok(
            !Color2.canParse( colorArray ),
            'check canParse after calling removeParser. Expected false as the result, result was: ' + Color2.canParse( colorArray )
          ); 
        });       
 
 pending…
mojule.Color v1.03
 
        
        module( 'mojule3.Color3' );
        
        test( 'mojule3.Color3 Constructor', function(){
          var pass = '#39f',
              alphaPass = 'rgba( 51, 153, 255, 0.5 )',
              tests = [
                { 
                  description: 'no args',
                  value: null,
                  expect: '#000'
                },              
                { 
                  description: 'rgb object',
                  value: { red: 51, green: 153, blue: 255 },
                  expect: pass
                },
                { 
                  description: 'rgba object',
                  value: { red: 51, green: 153, blue: 255, alpha: 0.5 },
                  expect: alphaPass
                },
                { 
                  description: 'hsl object',
                  value: { hue: 210, saturation: 100, lightness: 60 },
                  expect: pass
                },
                { 
                  description: 'hsla object',
                  value: { hue: 210, saturation: 100, lightness: 60, alpha: 0.5 },
                  expect: alphaPass
                },
                {
                  description: 'rgb partial object',
                  value: { red: 255 },
                  expect: '#f00'
                },                
                {
                  description: 'hsl partial object',
                  value: { lightness: 100 },
                  expect: '#fff'
                },
                {
                  description: 'css hex 3',
                  value: '#39f',
                  expect: pass
                },
                {
                  description: 'css hex 6',
                  value: '#3399ff',
                  expect: pass
                },
                {
                  description: 'css rgb integer',
                  value: 'rgb( 51, 153, 255 )',
                  expect: pass
                },
                {
                  description: 'css rgb percentage',
                  value: 'rgb( 20%, 60%, 100% )',
                  expect: pass
                },
                {
                  description: 'css rgba integer',
                  value: 'rgba( 51, 153, 255, 0.5 )',
                  expect: alphaPass
                },
                {
                  description: 'css rgba percentage',
                  value: 'rgba( 20%, 60%, 100%, 0.5 )',
                  expect: alphaPass
                },
                { 
                  description: 'css hsl',
                  value: 'hsl( 210, 100%, 60% )',
                  expect: pass
                },
                { 
                  description: 'css hsla',
                  value: 'hsla( 210, 100%, 60%, 0.5 )',
                  expect: alphaPass
                },
                {
                  description: 'named color',
                  value: 'dodgerblue',
                  expect: '#1e90ff'
                },
                {
                  description: 'existing color',
                  value: new Color3( '#39f' ),
                  expect: pass
                }
              ];
              
          function result( test ) {
            return new Color3( test.value ).css()
          }     

          for( var i = 0; i < tests.length; i++ ) {
            tests[ i ].result = result( tests[ i ] );
          }  
          
          runTests( tests );
        });
        
        test( 'mojule3.Color3 Informative functions', function(){
          var rgbaObject = { red: 51, green: 153, blue: 255, alpha: 0.5 },
              color = new Color3( rgbaObject ),
              tests = [
                { 
                  name: 'red',
                  expect: 51
                },
                {
                  name: 'green',
                  expect: 153
                },
                {
                  name: 'blue',
                  expect: 255
                },
                {
                  name: 'hue',
                  expect: 210
                },
                {
                  name: 'saturation',
                  expect: 100
                },
                {
                  name: 'lightness',
                  expect: 60
                },
                {
                  name: 'alpha',
                  expect: 0.5
                },
                {
                  name: 'css',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },
                {
                  name: 'hex',
                  expect: '#39f'
                },
                {
                  name: 'brightness',
                  expect: 134.13
                },
                {
                  name: 'brightnessDifference',
                  args: [ new Color3( '#fff' ) ],
                  expect: 120.87
                },
                {
                  name: 'colorDifference',
                  args: [ new Color3( '#f90' ) ],
                  expect: 459
                },
                {
                  name: 'hasEnoughContrast',
                  args: [ new Color3( '#f90' ) ],
                  expect: false
                },
                {
                  name: 'hasEnoughContrast',
                  description: ' with args to reduce threshold',
                  args: [ new Color3( '#f90' ), 450, 30 ],
                  expect: true
                },
                {
                  name: 'rgb',
                  expect: {
                    red: 51,
                    green: 153,
                    blue: 255,
                    alpha: 0.5,
                    css: 'rgba( 51, 153, 255, 0.5 )'
                  }
                },
                {
                  name: 'rgba',
                  expect: {
                    red: 51,
                    green: 153,
                    blue: 255,
                    alpha: 0.5,
                    css: 'rgba( 51, 153, 255, 0.5 )'
                  }
                },
                {
                  name: 'hsl',
                  expect: {
                    hue: 210,
                    saturation: 100,
                    lightness: 60,
                    alpha: 0.5,
                    css: 'hsla( 210, 100%, 60%, 0.5 )'
                  }
                },                
                {
                  name: 'hsla',
                  expect: {
                    hue: 210,
                    saturation: 100,
                    lightness: 60,
                    alpha: 0.5,
                    css: 'hsla( 210, 100%, 60%, 0.5 )'
                  }
                },
                {
                  name: 'getContrastingTone',
                  expect: '#fff',
                  result: color.getContrastingTone().css()
                },
                {
                  name: 'clone',
                  expect: 'rgba( 51, 153, 255, 0.5 )',
                  result: color.clone().css()
                }
              ];
              
          function result( test ) {
            //IE<9 does NOT like you trying to call apply with undefined
            if( test.args !== undefined ) {
              return color[ test.name ].apply( color, test.args );
            }
            return color[ test.name ]();          
          }
          
          for( var i = 0; i < tests.length; i++ ) {
            if( tests[ i ].result === undefined ) {
              tests[ i ].result = result( tests[ i ] );
            }
          }         
          
          runTests( tests );        
        });
        
        test( 'mojule3.Color3 Modifying functions', function(){
          var color,
              tests = [
                { 
                  args: [ 255 ],
                  name: 'red',
                  expect: '#f00'
                },
                { 
                  args: [ 255 ],
                  name: 'green',
                  expect: '#0f0'
                },
                { 
                  args: [ 255 ],
                  name: 'blue',
                  expect: '#00f'
                },
                { 
                  args: [ 210 ],
                  name: 'hue',
                  expect: '#007fff',
                  initialColor: '#f00'
                },  
                {
                  args: [ 50 ],
                  name: 'saturation',
                  expect: '#bf4040',
                  initialColor: '#f00'
                },                
                {
                  args: [ 25 ],
                  name: 'lightness',
                  expect: '#800000',
                  initialColor: '#f00'
                },
                {
                  args: [ 0.5 ],
                  name: 'alpha',
                  expect: 'rgba( 255, 0, 0, 0.5 )',
                  initialColor: '#f00'
                },
                {
                  args: [{red: 51, green: 153, blue: 255}],
                  name: 'rgb',
                  expect: '#39f'
                },                
                {
                  args: [{r: 51, g: 153, b: 255}],
                  name: 'rgb',
                  expect: '#39f'
                },
                {
                  args: [{red: 51, green: 153, blue: 255, alpha: 0.5}],
                  name: 'rgba',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: [{r: 51, g: 153, b: 255, a: 0.5}],
                  name: 'rgba',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },
                {
                  args: [{hue: 210, saturation: 100, lightness: 60}],
                  name: 'hsl',
                  expect: '#39f'
                },                 
                {
                  args: [{h: 210, s: 100, l: 60}],
                  name: 'hsl',
                  expect: '#39f'
                },                 
                {
                  args: [{hue: 210, saturation: 100, lightness: 60, alpha: 0.5}],
                  name: 'hsla',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: [{h: 210, s: 100, l: 60, a: 0.5}],
                  name: 'hsla',
                  expect: 'rgba( 51, 153, 255, 0.5 )'
                },                
                {
                  args: ['#39f'],
                  name: 'hex',
                  expect: '#39f'
                },                 
                {
                  args: [{hue: 0.5, saturation: 0.5, lightness: 0.5, alpha: 0.5}],
                  name: 'multiplyHsla',
                  expect: 'rgba( 57, 115, 38, 0.5 )',
                  initialColor: '#39f'
                },                
                {
                  args: [{hue: -105, saturation: -50, lightness: -30, alpha: -0.5}],
                  name: 'sumHsla',
                  expect: 'rgba( 57, 115, 38, 0.5 )',
                  initialColor: '#39f'                  
                }              
              ];
          
          function result( test ) {
            var color = new Color3( test.initialColor );
            return color[ test.name ].apply( color, test.args ).css();
          }
          
          for( var i = 0; i < tests.length; i++ ) {
            tests[ i ].result = result( tests[ i ] );
          }             
          
          runTests( tests );
        });
        
        module( 'mojule3.Color3 Static Functions' );
        
        test( 'mojule3.Color3.range', function(){
          expect( 18 );
          
          var noargs = Color3.range();
          
          equal(
            noargs.length,
            2,
            'No args, checking length. Expected 2 as the result, result was: ' + noargs.length
          );
          
          equal(
            noargs[ 0 ].css(),
            '#000',
            'No args, checking first element for default color. Expected #000 as the result, result was: ' + noargs[ 0 ].css()
          );
          
          equal(
            noargs[ 1 ].css(),
            '#000',
            'No args, checking last element for default color. Expected #000 as the result, result was: ' + noargs[ 1 ].css()
          );
          
          var onestep = Color3.range( '#39f', '#f90', 1 );
          
          equal(
            onestep.length,
            2,
            'Steps specified as < 2, checking length. Expected 2 as the result, result was: ' + onestep.length
          );
          
          equal(
            onestep[ 0 ].css(),
            '#39f',
            'Steps specified as < 2, checking first element. Expected #39f as the result, result was: ' + onestep[ 0 ].css()
          ); 
          
          equal(
            onestep[ 1 ].css(),
            '#f90',
            'Steps specified as < 2, checking last element. Expected #f90 as the result, result was: ' + onestep[ 1 ].css()
          );
          
          var threestep = Color3.range( '#39f', '#f90', 3 ); 
          
          equal(
            threestep.length,
            3,
            'Steps specified 3, checking length. Expected 3 as the result, result was: ' + threestep.length
          );
          
          equal(
            threestep[ 1 ].css(),
            '#1aff25',
            'Steps specified as 3, checking middle element. Expected #1aff25 as the result, result was: ' + threestep[ 1 ].css()
          );
          
          var hueStart = {
            hue: 0,
            saturation: 100,
            lightness: 50
          };
          
          var hueEnd = {
            hue: 180
          };
          
          var hueRange = Color3.range( hueStart, hueEnd, 3 );
          
          equal(
            hueRange[ 1 ].css(),
            '#80ff00',
            'Partial arguments for hue, checking middle element. Expected #448700 as the result, result was: ' + hueRange[ 1 ].css()
          );
          
          var satStart = {
            hue: 210,
            saturation: 100,
            lightness: 50
          };
          
          var satEnd = {
            saturation: 0
          };
          
          var satRange = Color3.range( satStart, satEnd, 3 );
          
          equal(
            satRange[ 1 ].css(),
            '#407fbf',
            'Partial arguments for saturation, checking middle element. Expected #407fbf as the result, result was: ' + satRange[ 1 ].css()
          ); 

          var litStart = {
            hue: 210,
            saturation: 100,
            lightness: 0
          };
          
          var litEnd = {
            lightness: 100
          };
          
          var litRange = Color3.range( litStart, litEnd, 3 );
          
          equal(
            litRange[ 1 ].css(),
            '#007fff',
            'Partial arguments for saturation, checking middle element. Expected #007fff as the result, result was: ' + litRange[ 1 ].css()
          );
          
          ok(
            Color3.canParse( '#39f' ),
            'canParse a valid color. Expected true as the result, result was: ' + Color3.canParse( '#39f' )
          );
          
          ok(
            Color3.canParse( 'dodgerblue' ),
            'canParse a valid named color. Expected true as the result, result was: ' + Color3.canParse( 'dodgerblue' )
          );
          
          equal(
            Color3.parserType( 'dodgerblue' ),
            'cssNamedColor',
            'checking parserType for named color. Expected "cssNamedColor" as the result, result was: ' + Color3.parserType( 'dodgerblue' )
          );
          
          var colorArray = [ 51, 153, 255, 0.5 ];
          
          ok(
            !Color3.canParse( colorArray ),
            'canParse an invalid color. Expected false as the result, result was: ' + Color3.canParse( colorArray )
          );
          
          var arrayParser = {
            predicate:  function( value ) {
                          return value instanceof Array && value.length > 0;
                        },
            parse:  function( value, color ) {
              var rgba = {};
              rgba[ 'red' ] = value[ 0 ];
              if( value.length > 1 ) {
                rgba[ 'green' ] = value[ 1 ];
              }
              if( value.length > 2 ) {
                rgba[ 'blue' ] = value[ 2 ];
              }
              if( value.length > 3 ) {
                rgba[ 'alpha' ] = value[ 3 ];
              }
              return color.rgba( rgba );
            }
          }; 

          Color3.addParser( 'array', arrayParser );
          
          ok(
            Color3.canParse( colorArray ),
            'check canParse after calling addParser. Expected true as the result, result was: ' + Color3.canParse( colorArray )
          ); 

          equals(
            new Color3( colorArray ).css(),
            'rgba( 51, 153, 255, 0.5 )',
            'results of added parser. Expected rgba( 51, 153, 255, 0.5 ) as the result, result was: ' + new Color3( colorArray ).css()
          )
          
          Color3.removeParser( 'array' );
          
          ok(
            !Color3.canParse( colorArray ),
            'check canParse after calling removeParser. Expected false as the result, result was: ' + Color3.canParse( colorArray )
          ); 
        });       
 
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment