sproutcore 1.8.2.1 → 1.9.0

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/render_context.js

@@ -248,7 +248,6 @@ SC.RenderContext = SC.Builder.create(
     @returns {SC.RenderContext} new context
   */
   begin: function(tagNameOrElement) {
-    // console.log('%@.begin(%@) called'.fmt(this, tagNameOrElement));
     return SC.RenderContext(tagNameOrElement, this);
   },
 
@@ -267,7 +266,6 @@ SC.RenderContext = SC.Builder.create(
     Removes an element with the passed id in the currently managed element.
   */
   remove: function(elementId) {
-    // console.log('remove('+elementId+')');
     if (!elementId) return ;
 
     var el, elem = this._elem ;
@@ -356,7 +354,6 @@ SC.RenderContext = SC.Builder.create(
     @returns {SC.RenderContext}
   */
   end: function() {
-    // console.log('%@.end() called'.fmt(this));
     // NOTE: If you modify this method, be careful to consider memory usage
     // and performance here.  This method is called frequently during renders
     // and we want it to be as fast as possible.
@@ -415,7 +412,6 @@ SC.RenderContext = SC.Builder.create(
     selfClosing = (this._selfClosing === NO) ? NO : (this.length === 1) ;
     tag = tag + (selfClosing ? ' />' : '>') ;
 
-    // console.log('selfClosing == %@'.fmt(selfClosing));
     strings[this.offset] = tag;
 
     // now generate closing tag if needed...
@@ -1007,9 +1003,13 @@ SC.RenderContext.fn.css = SC.RenderContext.fn.addStyle;
   plain text.  You should make sure you pass all user-entered data through
   this method to avoid errors.  You can also do this with the text() helper
   method on a render context.
+
+  @param {String|Number} text value to escape
+  @returns {String} string with all HTML values properly escaped
 */
 SC.RenderContext.escapeHTML = function(text) {
     if (!text) return '';
+    if (SC.typeOf(text) === SC.T_NUMBER) { text = text.toString(); }
     return text.replace(_escapeHTMLRegex, _escapeHTMLMethod);
 };
 })();

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/req_anim_frame.js

@@ -0,0 +1,31 @@
+/** @scope window
+  Polyfill for cross-browser backwards compatible window.requestAnimationFrame
+  support.
+
+  Via Erik Möller:
+  http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+*/
+(function() {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+    window.cancelRequestAnimationFrame = window[vendors[x]+
+      'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame)
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+        timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+
+  if (!window.cancelAnimationFrame)
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+}())

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/sparse_array.js

@@ -368,9 +368,15 @@ SC.SparseArray = SC.Object.extend(SC.Observable, SC.Enumerable, SC.Array,
       this._length += delta;
       this.propertyDidChange('length');
     }
-
+    
+    // Both arrayContentDidChange and enumerableContentDidChange will invoke
+    // "this.notifyPropertyChange('[]')". To prevent multiple notifications 
+    // these calls are made as grouped property changes.
+    this.beginPropertyChanges();
     this.arrayContentDidChange(idx, amt, len) ;
     this.enumerableContentDidChange(idx, amt, delta) ;
+    this.endPropertyChanges();
+    
     return this ;
   },
 

data/lib/frameworks/sproutcore/frameworks/core_foundation/system/utils.js

@@ -111,7 +111,7 @@ SC.mixin( /** @scope SC */ {
       // offset to the results of getBoundingClientRect.
       //
       // See http://dev.jquery.it/ticket/6446
-      if (SC.browser.mobileSafari) {
+      if (SC.browser.isMobileSafari) {
         userAgent = navigator.userAgent;
         index = userAgent.indexOf('Mobile/');
         mobileBuildNumber = userAgent.substring(index + 7, index + 9);
@@ -124,7 +124,7 @@ SC.mixin( /** @scope SC */ {
 
       // Subtract the scroll offset for viewport coordinates
       if (relativeToFlag === 'viewport') {
-        
+
         if(SC.browser.isIE8OrLower){
           result.left -= $(window).scrollLeft();
           result.top -= $(window).scrollTop();
@@ -136,13 +136,13 @@ SC.mixin( /** @scope SC */ {
     }
 
     // Translate 'left', 'top' to 'x', 'y'
-    
+
     try{
       result.x = result.left;
       result.y = result.top;
     } catch (e) {
-      // We need this for IE, when the element is detached, for some strange 
-      // reason the object returned by element.getBoundingClientRect() 
+      // We need this for IE, when the element is detached, for some strange
+      // reason the object returned by element.getBoundingClientRect()
       // is read-only
       result = {x:result.left, y:result.top};
     }
@@ -162,7 +162,9 @@ SC.mixin( /** @scope SC */ {
     @returns {Point} A hash with x, y offsets.
   */
   viewportOffset: function(el) {
-    console.warn("SC.viewportOffset() has been deprecated in favor of SC.offset().  Please use SC.offset() from here on.");
+    //@if(debug)
+    SC.warn("Developer Warning: SC.viewportOffset() has been deprecated in favor of SC.offset().  Please use SC.offset() from here on.");
+    //@endif
     var result = SC.offset(el, 'viewport');
 
     return {x: result.left, y: result.top};

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/controllers/array/array_case.js

@@ -14,6 +14,11 @@ var TestObject = SC.Object.extend({
   toString: function() { return "TestObject(%@)".fmt(this.get("title")); }
 });
 
+var ComplexTestObject = SC.Object.extend({
+  firstName: null,
+  lastName: null,
+  toString: function() { return "TestObject(%@ %@)".fmt(this.get("firstName"), this.get('lastName')); }
+});
 
 // ..........................................................
 // EMPTY
@@ -163,6 +168,50 @@ test("arrangedObjects", function() {
   equals(controller.get("arrangedObjects"), controller, 'c.arrangedObjects should return receiver');
 });
 
+test("array orderBy using String", function(){
+  var testController = SC.ArrayController.create({
+    content: content,
+    orderBy: 'title ASC'
+  });
+
+  equals(testController.get('firstSelectableObject'), content[0], 'first selectable object should be the first object in arrangedObjects');
+  equals(testController.get('lastObject'), content[4], 'lastObject should be the last object in content');
+
+  // Reorder the content
+  testController.set('orderBy', 'title DESC');
+
+  equals(testController.get('firstSelectableObject'), content[4], 'first selectable object should be the first object in arrangedObjects (changed order)');
+  equals(testController.get('lastObject'), content[0], 'lastObject should be the first object in content (changed order)');
+});
+
+
+test("array orderBy using Array", function(){
+  var complexContent,
+      familyNames = "Keating Zane Alberts Keating Keating".w(),
+      givenNames = "Travis Harold Brian Alvin Peter".w(),
+      testController;
+
+  complexContent = familyNames.map(function(x, i) {
+    return ComplexTestObject.create({ lastName: x, firstName: givenNames.objectAt(i) });
+  });
+
+  testController = SC.ArrayController.create({
+    content: complexContent
+  });
+
+  equals(testController.get('firstSelectableObject'), complexContent[0], 'first selectable object should be the first object in arrangedObjects');
+
+  // Reorder the content
+  testController.set('orderBy', ['lastName', 'firstName']); // Brian Alberts, Alvin Keating, Peter Keating, Travis Keating, Harold Zane
+  equals(testController.get('firstSelectableObject'), complexContent[2], 'first selectable object should be the first object in arrangedObjects (changed order)');
+  equals(testController.objectAt(1), complexContent[3], 'fourth content object should be the second object in arrangedObjects (changed order)');
+
+  // Reorder the content
+  testController.set('orderBy', ['lastName', 'firstName DESC']); // Brian Alberts, Travis Keating, Peter Keating, Alvin Keating,Harold Zane
+  equals(testController.objectAt(3), complexContent[3], 'fourth content object should be the fourth object in arrangedObjects (changed order)');
+
+});
+
 test("array orderBy using function", function(){
   var testFunc = function(a,b){
     if(a.get('title') > b.get('title')) return -1;

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/controllers/array/selection_support.js

@@ -57,7 +57,7 @@ function() {
   equals(controller.get('firstSelectableObject'), content[0], 'first selectable object should be the first object in arrangedObjects');
 
   // Reorder the content
-  controller.set('orderBy', 'DESC title');
+  controller.set('orderBy', 'title DESC');
 
   equals(controller.get('firstSelectableObject'), content[4], 'first selectable object should be the first object in arrangedObjects (changed order)');
 });

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/ext/object_test.js

@@ -0,0 +1,106 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*globals module, test, start, stop, expect, ok, equals*/
+
+
+module("Object:invokeOnce()");
+
+test("should invoke function using invokeLater after specified time and pass in extra arguments", function() {
+  stop(2000);
+
+  SC.RunLoop.begin();
+  var o = SC.Object.create({
+    stopped: YES,
+
+    method: function(a, b, c) {
+      equals(a, 'a', "Argument 'a' passed");
+      equals(b, 'b', "Argument 'b' passed");
+      equals(c, 'c', "Argument 'c' passed");
+
+      start();
+    }
+  });
+  o.invokeLater('method', 200, 'a', 'b', 'c');
+  SC.RunLoop.end();
+});
+
+test("should invoke function once multiple times using invokeLater after specified time", function() {
+  stop(2000);
+  expect(3);
+
+  SC.RunLoop.begin();
+  var o = SC.Object.create({
+    stopped: YES,
+
+    method: function() {
+      ok(true, 'method called');
+
+      if (this.stopped) {
+        this.stopped = NO;
+        // Continue on in a short moment.  Before the test times out, but after
+        // enough time for a second call to method to possibly come in.
+        setTimeout(function() {
+          start();
+        }, 100);
+      }
+    }
+  });
+  o.invokeLater('method', 200);
+  o.invokeLater('method', 200);
+  o.invokeLater('method', 200);
+  SC.RunLoop.end();
+});
+
+
+
+module("Object:invokeOnceLater()");
+
+test("should invoke function using invokeOnceLater after specified time and pass in extra arguments", function() {
+  stop(2000);
+
+  SC.RunLoop.begin();
+  var o = SC.Object.create({
+    stopped: YES,
+
+    method: function(a, b, c) {
+      equals(a, 'a', "Argument 'a' passed");
+      equals(b, 'b', "Argument 'b' passed");
+      equals(c, 'c', "Argument 'c' passed");
+
+      start();
+    }
+  });
+  o.invokeOnceLater('method', 200, 'a', 'b', 'c');
+  SC.RunLoop.end();
+});
+
+test("should invoke function once using invokeOnceLater after specified time", function() {
+  stop(2000);
+  expect(1);
+
+  SC.RunLoop.begin();
+  var o = SC.Object.create({
+    stopped: YES,
+
+    method: function() {
+      ok(true, 'method called');
+
+      if (this.stopped) {
+        this.stopped = NO;
+        // Continue on in a short moment.  Before the test times out, but after
+        // enough time for a second call to method to possibly come in.
+        setTimeout(function() {
+          start();
+        }, 100);
+      }
+    }
+  });
+  o.invokeOnceLater('method', 200);
+  o.invokeOnceLater('method', 200);
+  o.invokeOnceLater('method', 200);
+  SC.RunLoop.end();
+});

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/system/color.js

@@ -0,0 +1,448 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+// ...............................................
+// SC.Color.from parsing
+//
+
+function matches(c, r, g, b, a, msg) {
+  var isEqual = c.r === r &&
+                c.g === g &&
+                c.b === b &&
+                c.a === a;
+  ok(isEqual, msg + " [rgba(%@, %@, %@) === rgba(%@, %@, %@, %@)]".fmt(r, g, b, a,
+                                                                     c.r, c.g, c.b, c.a));
+};
+
+test("SC.Color.from(rgb)", function () {
+  matches(SC.Color.from("rgb(212, 15, 2)"),
+                             212, 15, 2, 1,
+                        "rgb() colors should be parseable");
+  matches(SC.Color.from("rgb(10000, 20, 256)"),
+                             255, 20, 255, 1,
+                        "Colors should be clamped to the device gamut");
+
+  matches(SC.Color.from("rgb(10%, 20%, 30%)"),
+                             26, 51, 77, 1,
+                        "rgb should allow percents as values");
+
+  matches(SC.Color.from("rgb(140%, 200%, 350%)"),
+                             255, 255, 255, 1,
+                        "rgb percents should be clamped to the device gamut");
+
+  ok(SC.Color.from("rgb(1,2,3)"), "Whitespace shouldn't matter");
+  ok(SC.Color.from("rgb(1   ,           2   ,   3  )"), "Whitespace shouldn't matter");
+});
+
+test("SC.Color.from(rgba)", function () {
+  matches(SC.Color.from("rgba(212, 15, 2, .2)"),
+                              212, 15, 2, .2,
+                        "rgba() colors should be parseable");
+  matches(SC.Color.from("rgba(260, 255, 20, 1.5)"),
+                              255, 255, 20, 1,
+                        "Alpha should be clamped to 1");
+
+  matches(SC.Color.from("rgba(10%, 20%, 30%, .5)"),
+                             26, 51, 77, .5,
+                        "rgba should allow percents as values");
+
+  matches(SC.Color.from("rgba(140%, 200%, 350%, .5)"),
+                             255, 255, 255, .5,
+                        "rgba percents should be clamped to the device gamut");
+
+  ok(!SC.Color.from("rgba(255, 255, 255, -.2)"),
+     "Invalid alpha should make the SC.Color.from return 'NO'");
+
+  ok(SC.Color.from("rgba(1,2,3,1)"), "Whitespace shouldn't matter");
+  ok(SC.Color.from("rgba(1   ,           2   ,   3 , 1 )"), "Whitespace shouldn't matter");
+});
+
+test("SC.Color.from() with invalid rgb colors", function () {
+  ok(!SC.Color.from("rgb(0, 0, 0, 0)"), "Too many arguments");
+
+  ok(!SC.Color.from("rgba(0, 0, 0)"), "Too few arguments");
+  ok(!SC.Color.from("rgb(0, 0)"), "Too few arguments");
+
+  ok(!SC.Color.from("rgb(0.0, 0.0, 0.0)"), "Floats are not allowed");
+
+  ok(!SC.Color.from("rgb(0, 0, 0"), "Missing parenthesis");
+
+  ok(!SC.Color.from("rgb(260, -10, 5)"), "Negative numbers");
+});
+
+test("SC.Color.from(#rgb)", function () {
+  matches(SC.Color.from("#21a"),
+          34, 17, 170, 1,
+          "#rgb colors should be parseable");
+
+  ok(SC.Color.from("#ABC").isEqualTo(
+     SC.Color.from("#abc")),
+     "Character casing should not matter with hex colors");
+});
+
+test("SC.Color.from(#rrggbb)", function () {
+  matches(SC.Color.from("#ABCDEF"),
+          171, 205, 239, 1,
+          "#rrggbb colors should be parseable");
+
+  ok(SC.Color.from("#ABCDEF").isEqualTo(
+     SC.Color.from("#abcdef")),
+     "Character casing should not matter with hex colors");
+});
+
+test("SC.Color.from(#aarrggbb)", function () {
+  matches(SC.Color.from("#00ABCDEF"),
+          171, 205, 239, 0,
+          "#aarrggbb colors should be parseable");
+
+  ok(SC.Color.from("#BAABCDEF").isEqualTo(
+     SC.Color.from("#baabcdef")),
+     "Character casing should not matter with hex colors");
+});
+
+test("SC.Color.from() with invalid hex colors", function () {
+  ok(!SC.Color.from("#GAB"), "Invalid character");
+
+  ok(!SC.Color.from("#0000"), "Invalid length");
+  ok(!SC.Color.from("#00000"), "Invalid length");
+  ok(!SC.Color.from("#0000000"), "Invalid length");
+});
+
+test("SC.Color.from(hsl)", function () {
+  matches(SC.Color.from("hsl(330, 60%, 54%)"),
+          208, 67, 138, 1,
+          "hsl() colors should be parseable");
+
+  matches(SC.Color.from("hsl(-90, 50%, 44%)"),
+          112, 56, 168, 1,
+          "negative hues should be allowed");
+
+  matches(SC.Color.from("hsl(-810, 50%, 44%)"),
+          112, 56, 168, 1,
+          "negative hues should be allowed");
+
+  matches(SC.Color.from("hsl(690, 60%, 54%)"),
+          208, 67, 138, 1,
+          "hues above 360 degrees should be valid");
+
+  matches(SC.Color.from("hsl(1050, 60%, 54%)"),
+          208, 67, 138, 1,
+          "hues above 360 degrees should be valid");
+
+  matches(SC.Color.from("hsl(1050, 150%, 190%)"),
+          255, 255, 255, 1,
+          "luminosity and saturation should be clamped between 0 and 100");
+
+  ok(SC.Color.from("hsl(1,2%,3%)"), "Whitespace shouldn't matter");
+  ok(SC.Color.from("hsl(1   ,           2%   ,   3% )"), "Whitespace shouldn't matter");
+});
+
+test("SC.Color.from(hsla)", function () {
+  matches(SC.Color.from("hsla(210, 87%, 55%, 0.4)"),
+          40, 140, 240, .4,
+          "hsla() colors should be parseable");
+
+  matches(SC.Color.from("hsla(-150, 87%, 55%, 0.4)"),
+          40, 140, 240, .4,
+          "negative hues should be allowed");
+
+  matches(SC.Color.from("hsla(-510, 87%, 55%, 0.4)"),
+          40, 140, 240, .4,
+          "negative hues should be allowed");
+
+  matches(SC.Color.from("hsla(570, 87%, 55%, 0.4)"),
+          40, 140, 240, .4,
+          "hues above 360 degrees should be valid");
+
+  matches(SC.Color.from("hsla(930, 87%, 55%, 0.4)"),
+          40, 140, 240, .4,
+          "hues above 360 degrees should be valid");
+
+  matches(SC.Color.from("hsla(930, 0427%, 200%, 0.4)"),
+          255, 255, 255, .4,
+          "luminosity and saturation should be clamped between 0 and 100");
+
+  ok(SC.Color.from("hsla(1,2%,3%,1)"), "Whitespace shouldn't matter");
+  ok(SC.Color.from("hsla(1   ,           2%   ,   3% , 1 )"), "Whitespace shouldn't matter");
+});
+
+test("SC.Color.from(transparent)", function () {
+  matches(SC.Color.from("transparent"),
+          0, 0, 0, 0,
+          "transparent should be black with an alpha of 0");
+});
+
+test("SC.Color.from(white, black)", function () {
+  matches(SC.Color.from("white"),
+          255, 255, 255, 1,
+          "white should convert to rgb(255, 255, 255)");
+
+  matches(SC.Color.from("black"),
+          0, 0, 0, 1,
+          "black should convert to rgb(0, 0, 0)");
+});
+
+// ...............................................
+// SC.Color helper functions
+//
+
+test("SC.Color.clamp", function () {
+  equals(SC.Color.clamp(0, 0, 1), 0);
+  equals(SC.Color.clamp(.5, 0, 1), .5);
+  equals(SC.Color.clamp(1, 0, 1), 1);
+
+  equals(SC.Color.clamp(-1, 0, 1), 0);
+  equals(SC.Color.clamp(2, 0, 1), 1);
+});
+
+test("SC.Color.clampInt", function () {
+  equals(SC.Color.clampInt(0, 0, 1), 0);
+  equals(SC.Color.clampInt(.5, 0, 1), 1);
+  equals(SC.Color.clampInt(1, 0, 1), 1);
+
+  equals(SC.Color.clampInt(-1, 0, 1), 0);
+  equals(SC.Color.clampInt(2, 0, 1), 1);
+});
+
+test("SC.Color.clampToDeviceGamut", function () {
+  equals(SC.Color.clampToDeviceGamut(250.25), 250);
+  equals(SC.Color.clampToDeviceGamut(260), 255);
+  equals(SC.Color.clampToDeviceGamut(-20), 0);
+});
+
+test("SC.Color.supportsArgb", function () {
+  ok(SC.Color.hasOwnProperty('supportsArgb'),
+     "supportsARGB should exist on SC.Color");
+});
+
+test("SC.Color.supportsRgba", function () {
+  ok(SC.Color.hasOwnProperty('supportsRgba'),
+     "supportsRGBA should exist on SC.Color");
+});
+
+// ...............................................
+// SC.Color color space conversion functions
+//
+
+test("SC.Color.hsvToRgb", function () {
+  var rgb = SC.Color.hsvToRgb(252, .94, .7843),
+      isValid;
+
+  isValid = rgb[0] === 50 &&
+            rgb[1] === 12 &&
+            rgb[2] === 200;
+  ok(isValid, "[rgb(50, 12, 200) === rgb(" + rgb.join(', ') + ")");
+});
+
+test("SC.Color.rgbToHsv", function () {
+  var hsv = SC.Color.rgbToHsv(50, 12, 200),
+      isValid;
+
+  hsv[0] = Math.round(hsv[0]);
+  hsv[1] = Math.round(hsv[1] * 100);
+  hsv[2] = Math.round(hsv[2] * 100);
+
+  isValid = hsv[0] === 252 &&
+            hsv[1] === 94 &&
+            hsv[2] === 78;
+  ok(isValid, "[rgb(50, 12, 200) === hsv(212, 75%, 49%) === hsv(" + hsv.join(', ') + ")]");
+});
+
+test("Converting between color spaces doesn't reduce accuracy", function () {
+  var rgb = [20, 145, 42],
+      cRgb = SC.Color.hsvToRgb.apply(null, SC.Color.rgbToHsv.apply(null, rgb));
+
+  ok(rgb[0] === cRgb[0] &&
+     rgb[1] === cRgb[1] &&
+     rgb[2] === cRgb[2]);
+
+  cRgb = SC.Color.hslToRgb.apply(null, SC.Color.rgbToHsl.apply(null, rgb));
+
+  ok(rgb[0] === cRgb[0] &&
+     rgb[1] === cRgb[1] &&
+     rgb[2] === cRgb[2]);
+});
+
+// ...............................................
+// SC.Copyable
+//
+
+test("SC.Color.isCopyable", function () {
+  ok(SC.Color.create().isCopyable);
+});
+
+test("SC.Color copy() creates a clone of the current color", function () {
+  var teal = SC.Color.from("teal"),
+      cTeal = teal.copy();
+
+  ok(teal.isEqualTo(cTeal), "the colors should be equivalent");
+  teal.incrementProperty('hue', 30);
+  ok(!teal.isEqualTo(cTeal), "mutating one color should not affect the other");
+});
+
+// ...............................................
+// SC.Color properties
+//
+
+test("SC.Color#cssText", function () {
+  var color = SC.Color.create({
+    r: 255, g: 255, b: 255
+  });
+  equals(color.get('cssText'), '#ffffff');
+
+  color.set('r', 0);
+  equals(color.get('cssText'), '#00ffff');
+
+  color.set('g', 128);
+  equals(color.get('cssText'), '#0080ff');
+
+  color.set('b', 128);
+  equals(color.get('cssText'), '#008080');
+
+  color.set('a', 0.5);
+  ok(color.get('cssText') !== '#008080');
+});
+
+test("SC.Color#hue", function () {
+  var color = SC.Color.from("hsl(330, 60%, 54%)"),
+      round = Math.round;
+
+  equals(round(color.get('hue')), 330);
+
+  color.set('hue', 300);
+
+  equals(color.get('r'), 208);
+  equals(color.get('g'), 67);
+  equals(color.get('b'), 208);
+
+  equals(round(color.get('hue')), 300);
+});
+
+test("SC.Color#saturation", function () {
+  var color = SC.Color.from("hsl(330, 60%, 54%)"),
+      round = Math.round;
+
+  equals(round(color.get('saturation') * 100), 60);
+
+  color.set('saturation', .5);
+
+  equals(color.get('r'), 196);
+  equals(color.get('g'), 79);
+  equals(color.get('b'), 138);
+
+  equals(round(color.get('saturation') * 100), 50);
+});
+
+test("SC.Color#luminosity", function () {
+  var color = SC.Color.from("hsl(330, 60%, 54%)"),
+      round = Math.round;
+
+  equals(round(color.get('luminosity') * 100), 54);
+
+  color.set('luminosity', .74);
+
+  equals(color.get('r'), 228);
+  equals(color.get('g'), 149);
+  equals(color.get('b'), 189);
+
+  equals(round(color.get('luminosity') * 100), 74);
+});
+
+test("SC.Color#isEqualTo", function () {
+  var white = SC.Color.from("white"),
+      cWhite = SC.Color.create({ r: 255, g: 255, b: 255 });
+
+  ok(white.isEqualTo(cWhite));
+});
+
+test("SC.Color#toRgb", function () {
+  equals(SC.Color.create({ r: 50, g: 240, b: 250, a: .4 }).toRgb(),
+         "rgb(50,240,250)");
+
+  equals(SC.Color.create({ r: -50, g: 270, b: 250 }).toRgb(),
+         "rgb(0,255,250)",
+         "Color clamping should occur");
+});
+
+test("SC.Color#toRgba", function () {
+  equals(SC.Color.create({ r: 50, g: 240, b: 250, a: .4 }).toRgba(),
+         "rgba(50,240,250,0.4)");
+
+  equals(SC.Color.create({ r: -50, g: 270, b: 250 }).toRgba(),
+         "rgba(0,255,250,1)",
+         "Color clamping should occur");
+});
+
+test("SC.Color#toHex", function () {
+  equals(SC.Color.create({ r: 50, g: 240, b: 250, a: .4 }).toHex(),
+         "#32f0fa");
+
+  equals(SC.Color.create({ r: -50, g: 270, b: 250 }).toHex(),
+         "#00fffa",
+         "Color clamping should occur");
+});
+
+test("SC.Color#toArgb", function () {
+  equals(SC.Color.create({ r: 50, g: 240, b: 250, a: .4 }).toArgb(),
+         "#6632f0fa");
+
+  equals(SC.Color.create({ r: -50, g: 270, b: 250 }).toArgb(),
+         "#ff00fffa",
+         "Color clamping should occur");
+});
+
+test("SC.Color#toHsl", function () {
+  equals(SC.Color.create({ r: 50, g: 240, b: 250, a: .4 }).toHsl(),
+         "hsl(183,95%,59%)");
+
+  equals(SC.Color.create({ r: -50, g: 270, b: 250 }).toHsl(),
+         "hsl(179,100%,50%)",
+         "Color clamping should occur");
+});
+
+test("SC.Color#toHsla", function () {
+  equals(SC.Color.create({ r: 50, g: 240, b: 250, a: .4 }).toHsla(),
+         "hsla(183,95%,59%,0.4)");
+
+  equals(SC.Color.create({ r: -50, g: 270, b: 250 }).toHsla(),
+         "hsla(179,100%,50%,1)",
+         "Color clamping should occur");
+});
+
+test("SC.Color#add", function () {
+  var white = SC.Color.create({ r: 255, g: 255, b: 255 }),
+      red = SC.Color.create({ r: 255, g: 0, b: 25, a: .4 }),
+      c;
+
+  c = white.add(red);
+  equals(c.get('r'), 510);
+  equals(c.get('g'), 255);
+  equals(c.get('b'), 280);
+  equals(c.get('a'), 1.4);
+});
+
+test("SC.Color#sub", function () {
+  var white = SC.Color.create({ r: 255, g: 255, b: 255 }),
+      red = SC.Color.create({ r: 255, g: 0, b: 25, a: .4 }),
+      c;
+
+  c = white.sub(red);
+  equals(c.get('r'), 0);
+  equals(c.get('g'), 255);
+  equals(c.get('b'), 230);
+  equals(c.get('a'), .6);
+});
+
+test("SC.Color#mult", function () {
+  var c = SC.Color.create({ r: 10, g: 20, b: 30 });
+
+  c = c.mult(.5);
+  equals(c.get('r'), 5);
+  equals(c.get('g'), 10);
+  equals(c.get('b'), 15);
+  equals(c.get('a'), .5);
+});