spade 0.0.1

data/sproutcore/frameworks/foundation/tests/system/utils/range.js

@@ -0,0 +1,62 @@
+// ========================================================================
+// SC.Range Tests
+// ========================================================================
+
+
+module("SC.Range");
+
+test("to find the maxRange() and minRange() values of a given range",function(){
+	var obj = {start:15,length:75};
+	equals(YES,SC.minRange(obj) == 15,'Minimum range');
+    equals(YES,SC.maxRange(obj) == 90,'Maximum range');
+});
+
+test("unionRanges() to find the union of two ranges",function(){
+	var obj = {start:15,length:75};
+	var obj1 = {start:5,length:50};
+	var c = SC.unionRanges(obj,obj1);
+	equals(obj1.start,SC.minRange(c),'Minimum range');
+	equals(85,c.length,'Maximum range');
+});
+
+test("rangesEqual() to find if the given ranges are equal",function(){
+    var obj = {start:15,length:75};
+	var obj1 = {start:15,length:75};
+	var obj2 = {start:5,length:50};
+	var c = SC.rangesEqual(obj,obj1);
+	var d = SC.rangesEqual(obj1,obj2);
+	equals(true,c,'Equal ranges');
+	equals(false,d,'Unequal ranges');	
+});
+
+test("cloneRange() to clone the given range",function(){
+	var obj = {start:15,length:75};
+	var c = SC.cloneRange(obj);
+	equals(obj.start,SC.minRange(c),'Minimum range');
+	equals(75,c.length,'Maximum range');
+});
+
+test("valueInRange() to find if a given value is in range",function(){
+	var obj = {start:15,length:75};
+	var c = SC.valueInRange(25,obj);
+	var d = SC.valueInRange(10,obj);
+	equals(true,c,'In range');
+	equals(false,d,'Not in range');
+});
+
+// test("valueInRange() to find if a given value is in range",function(){
+// 	var obj = {start:15,length:75};
+// 	var c = SC.valueInRange(25,obj);
+// 	var d = SC.valueInRange(10,obj);
+// 	equals(true,c,'In range');
+// 	equals(false,d,'Not in range');
+// });
+
+test("intersectRanges() to get the intersection of 2 ranges",function(){
+	var obj1 = {start:15,length:75};
+	var obj2 = {start:5,length:50};
+	
+	var c = SC.intersectRanges(obj1,obj2);
+	equals(SC.minRange(obj1),SC.minRange(c),'Minimum Intersection Range');
+	equals(40,c.length,'Maximum Intersection Range');
+});

data/sproutcore/frameworks/foundation/tests/validators/credit_card.js

@@ -0,0 +1,35 @@
+// ========================================================================
+// SC.Validator.CreditCard  Tests
+// ========================================================================
+
+module("credit_card validation - fieldValueForObject()");
+test("Expects a string of 16 digits.  Will split into groups of 4 for display.",function(){
+	var obj=SC.Validator.CreditCard.create();
+	var string = "1234567890123456";
+	var grouped_string = obj.fieldValueForObject("1234567891234567");
+	equals(grouped_string,"1234 5678 9123 4567");	
+});
+test("Removes all whitespace or dashes to make a single string",function(){
+	var obj=SC.Validator.CreditCard.create();
+	var string = "1234 5678-9012-3456";
+	var clean_string = obj.objectForFieldValue(string);
+	equals(clean_string,"1234567890123456");	
+});
+
+test("Checks all valid card numbers or dashes to make a single string",function(){
+	var obj=SC.Validator.CreditCard.create();
+	var invalid_cc = "1234 5678-9012-3456";
+	equals(obj.checkNumber(invalid_cc),false);
+	var valid_cc = "4111 1111 1111 1111";
+	equals(obj.checkNumber(valid_cc),true);	
+});
+
+// PROBLEM in function validateKeyDown 
+// returns true instead of false and vice -versa
+//test("Allow only numbers, dashes, and spaces",function(){
+//	obj=SC.Validator.CreditCard.create();
+//	string = "sdfk123";
+//	equals(obj.validateKeyDown('','',string),false);
+//	string = "123424";
+//	equals(obj.validateKeyDown('','',string),true);
+//});

data/sproutcore/frameworks/foundation/tests/validators/date.js

@@ -0,0 +1,26 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same */
+
+module("SC.Validator.Date");
+
+test("Converts into date if a value is given",function(){
+    var date = new Date(1234947136000),
+        utcDate = new Date(Number(date) + (date.getTimezoneOffset() * 60000)); // Adjust for timezone offset
+
+    var c = SC.Validator.Date.fieldValueForObject(Number(utcDate),'','');
+    var expected = "Feb 18, 2009 8:52:16 AM";
+    ok(c === expected, "Number converted to date format. Expected: (%@) but got (%@)".fmt(expected, c));
+});
+
+test("Converts into number when date string is given", function(){
+    var expected = 1234918336000;
+    var date = new Date(expected);
+    var d = SC.Validator.Date.objectForFieldValue(date.format('NNN d, yyyy h:mm:ss a'),'','');
+    ok(d === expected, "Date String compared with value in seconds. Expected: (%@) but got (%@)".fmt(expected, d));
+    ok(SC.typeOf(d) == "number", "Number is obtained");
+});

data/sproutcore/frameworks/foundation/tests/validators/not_empty.js

@@ -0,0 +1,56 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same */
+var notEmptyValidator, field;
+
+module("SC.Validator.NotEmpty", {
+    setup: function () {
+        notEmptyValidator = SC.Validator.NotEmpty.create();
+        field = SC.Object.create();
+    },
+    teardown: function () {
+        notEmptyValidator.destroy();
+        notEmptyValidator = null;
+    }
+});
+
+test("Recognizes a non-empty string as valid",function(){
+    field.set('fieldValue', "fnord");
+    var isValid = notEmptyValidator.validate(undefined, field);
+    ok(isValid, "Not empty string is valid");
+});
+
+test("Recognizes empty string as invalid",function(){
+    field.set('fieldValue', "");
+    var isValid = notEmptyValidator.validate(undefined, field);
+    ok( ! isValid, "Empty string is not valid");
+});
+
+test("Recognizes null as empty",function(){
+    field.set('fieldValue', null);
+    var isValid = notEmptyValidator.validate(undefined, field);
+    ok( ! isValid, "null string is not valid");
+});
+
+test("Recognizes undefined as empty",function(){
+    field.set('fieldValue', undefined);
+    var isValid = notEmptyValidator.validate(undefined, field);
+    ok( ! isValid, "null string is not valid");
+});
+
+test("Recognizes some number as non-empty",function(){
+    field.set('fieldValue', 42);
+    var isValid = notEmptyValidator.validate(undefined, field);
+    ok(isValid, "42 string is not empty");
+});
+
+test("Recognizes zero as non-empty",function(){
+    field.set('fieldValue', 0);
+    var isValid = notEmptyValidator.validate(undefined, field);
+    ok(isValid, "0 string is not empty");
+});
+

data/sproutcore/frameworks/foundation/tests/validators/number.js

@@ -0,0 +1,47 @@
+// ========================================================================
+// SC.Validator.Number Tests
+// ========================================================================
+
+
+// htmlbody('<!-- Test Styles -->\
+//   <form id="form" action="formaction"><input type="text" name="action" value="Test" id="email" maxlength="30"/></form>\
+// ');
+
+module("SC.Validator.Number ");	
+test("validate() a number", function() {
+ var field = SC.$('input');
+ //alert(SC.Validator.Number.validate('',field));
+});
+
+test("Checking fieldValueForObject" ,function(){
+ var obj = {};
+ var value;
+ value = SC.Validator.Number.fieldValueForObject(obj,'','');
+ equals(SC.T_HASH,SC.typeOf(value),'Returns an object');
+ value = SC.Validator.Number.fieldValueForObject(5354534545312.999,'','');
+ equals(5354534545313,value,'Value rounded to closest value');
+ value = SC.Validator.Number.fieldValueForObject(null,'','');
+ equals('',value,'for null');
+ value = SC.Validator.Number.fieldValueForObject(undefined,'','');
+ equals('',value,'for undefined');
+});
+
+test("Checking objectForFieldValue" ,function(){
+ var obj = {};
+ var value = '';
+ value = SC.Validator.Number.objectForFieldValue('','','');
+ equals(null,value,'Returns null for an empty string parameter');
+ value = SC.Validator.Number.objectForFieldValue('121 222','','');
+ equals(121,value,'numerical string with spaces');
+ value = SC.Validator.Number.objectForFieldValue('121.999','','');
+ equals(121,value,'a float value string');
+ // value = SC.Validator.Number.objectForFieldValue(null,'','');
+ //  equals('',value,'for null');
+ //  value = SC.Validator.Number.objectForFieldValue(undefined,'','');
+ //  equals('',undefined,'for undefined');
+});
+
+test("Checking validateKeyDown",function(){
+ //SC.Validator.Number.validateKeyDown('222323','','');
+ //TypeError: SC.Validator.Number.validateKeyDown is not a function	
+});

data/sproutcore/frameworks/foundation/tests/validators/password.js

@@ -0,0 +1,13 @@
+// ========================================================================
+// SC.Validator.Password Base Tests
+// ========================================================================
+/*globals module test ok isObj equals expects */
+// htmlbody('<!-- Test Styles -->\
+// <form id="form" action="formaction"><input type="password" name="action" value="Test" id="field" maxlength="30"/></form>\
+// ');
+// module("SC.Validator.password");
+// 
+// test("Attaching the field to the form", function() {
+// 	var a = SC.Validator.Password.attachTo(SC.$("#form"), SC.$('#field'));
+// 	alert(a);
+// });

data/sproutcore/frameworks/foundation/tests/validators/validator.js

@@ -0,0 +1,20 @@
+// ========================================================================
+// SC.Validator Tests
+// ========================================================================
+/*globals module test ok isObj equals expects */
+
+module("SC.Validator");
+
+test("Calling fieldValueForObject() should not fail if this.prototypefieldValueForObject() is null", function() {
+  var Klass = SC.Validator.extend({
+    fieldValueForObject: null
+  });
+  equals(null, Klass.fieldValueForObject({}, null, null), "should return null") ;
+});
+
+test("Calling objectForFieldValue() should not fail if this.prototype.objectForFieldValue() is null", function() {
+  var Klass = SC.Validator.extend({
+    objectForFieldValue: null
+  });
+  equals(null, Klass.objectForFieldValue({}, null, null), "should return null") ;
+});

data/sproutcore/frameworks/foundation/tests/views/container/methods.js

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            portions copyright @2009 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+  @extends SC.Theme
+  @since SproutCore 1.1
+*/
+SC.EmptyTheme = SC.Theme.extend({
+  classNames: ["sc-empty"]
+});
+
+SC.Theme.register("sc-empty", SC.EmptyTheme);
+
+module("TODO: Test SC.ContainerView Methods");

data/sproutcore/frameworks/foundation/tests/views/container/ui.js

@@ -0,0 +1,145 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            portions copyright @2009 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+// htmlbody('<style> .sc-control-test-pane .wrapper { overflow: none; } </style>');
+
+(function() {
+  var pane = SC.ControlTestPane.design({ height: 100 });
+  
+  pane.add("basic", SC.ContainerView, {
+      isEnabled: YES
+    });
+    
+  pane.add("disabled", SC.ContainerView, {
+      isEnabled: NO
+    });
+
+  pane.add("nowShowingDefault", SC.ContainerView, {
+      nowShowing: 'start',
+
+      start: SC.LabelView.design({
+        value: 'Start'
+      })
+
+    });
+
+    // .add("disabled - single selection", SC.ListView, {
+    //   isEnabled: NO,
+    //   content: content,
+    //   contentValueKey: 'title',
+    //   selection: singleSelection
+    // })
+    // 
+    // .add("single selection", SC.ListView, {
+    //   content: content,
+    //   contentValueKey: 'title',
+    //   selection: singleSelection
+    // })
+    // 
+    // .add("multiple selection, contiguous", SC.ListView, {
+    //   content: content,
+    //   contentValueKey: 'title',
+    //   selection: multiSelectionContiguous
+    // })
+    // 
+    // .add("multiple selection, discontiguous", SC.ListView, {
+    //   content: content,
+    //   contentValueKey: 'title',
+    //   selection: multiSelectionDiscontiguous
+    // })
+    
+  pane.show(); // add a test to show the test pane
+
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.ContainerView UI', pane.standardSetup());
+  
+  test("basic", function() {
+    var view = pane.view('basic');
+    ok(!view.$().hasClass('disabled'), 'should not have disabled class');
+    ok(!view.$().hasClass('sel'), 'should not have sel class');
+    
+    var contentView = view.get('contentView') ;
+    
+    // ok(contentView.kindOf(SC.ContainerView), 'default contentView is an SC.ContainerView');
+    // ok(contentView.get('contentView') === null, 'default contentView should have no contentView itself');
+  });
+  
+  test("disabled", function() {
+    var view = pane.view('disabled');
+    ok(view.$().hasClass('disabled'), 'should have disabled class');
+    ok(!view.$().hasClass('sel'), 'should not have sel class');
+  });
+   
+  // test("disabled - single selection", function() {
+  //   var view = pane.view('disabled - single selection');
+  //   ok(view.$().hasClass('disabled'), 'should have disabled class');
+  //   ok(view.itemViewAtContentIndex(0).$().hasClass('sel'), 'should have sel class');
+  //  });
+  // 
+  //  test("single selection", function() {
+  //    var view = pane.view('single selection');
+  //    ok(view.itemViewAtContentIndex(0).$().hasClass('sc-collection-item'), 'should have sc-collection-item class');
+  //    ok(view.itemViewAtContentIndex(0).$().hasClass('sel'), 'should have sel class');
+  //   });
+
+  test("changing nowShowing", function() {
+    var view = pane.view('basic');
+    // Set nowShowing to an instantiated object.
+    var viewToAdd = SC.LabelView.create({value: 'View1'});
+    view.set('nowShowing', viewToAdd);
+    equals(view.get('contentView').get('value'), 'View1', 'contentView changes as intended when an instantiated view is passed to nowShowing');
+    
+    // Set nowShowing to an uninstantiated object.
+    viewToAdd = SC.LabelView.design({value: 'View2'});
+    view.set('nowShowing', viewToAdd);
+    equals(view.get('contentView').get('value'), 'View2', 'contentView changes as intended when an uninstantiated view (class) is passed to nowShowing');
+    
+    // Set nowShowing to an SC.CoreView
+    viewToAdd = SC.CoreView.design({value: 'View5'});
+    view.set('nowShowing', viewToAdd);
+    equals(view.get('contentView').get('value'), 'View5', 'contentView instantiates and inserts an SC.CoreView');
+
+    // Set nowShowing to a non-view object.
+    viewToAdd = SC.Object;
+    view.set('nowShowing', viewToAdd);
+    equals(view.get('contentView'), null, 'contentView changes to null when nowShowing is set to a non-view');
+    
+    // Set nowShowing to a string.
+    var viewForString = SC.LabelView.create({value: 'View3'});
+    view.set('label', viewForString);
+    view.set('nowShowing', 'label');
+    equals(view.get('contentView').get('value'), 'View3', 'contentView changes as intended when an instantiated view is passed to nowShowing');
+    
+    // Set nowShowing to a nonexistent string.
+    viewToAdd = 'NonexistentNamespace.NonexistentViewClass';
+    view.set('nowShowing', viewToAdd);
+    equals(view.get('contentView'), null, 'contentView changes to null when nowShowing is set to a string pointing at nothing');
+    
+    // Set nowShowing to null.
+    viewToAdd = null;
+    view.set('nowShowing', viewToAdd);
+    equals(view.get('contentView'), null, 'contentView changes to null when nowShowing is set to null');
+    
+  });
+
+  test("default nowShowing", function(){
+    var view = pane.view("nowShowingDefault");
+    view.awake();
+
+    var contentView = view.get('contentView');
+
+    // contentView should reflect nowShowing
+    ok(contentView, "should have contentView");
+    equals(contentView.get('value'), 'Start', 'contentView value should be "Start"');
+
+  });
+
+})();

data/sproutcore/frameworks/foundation/tests/views/image/ui.js

@@ -0,0 +1,492 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            portions copyright @2009 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same */
+
+(function() {
+  var logoURL = "http://www.sproutcore.com/assets/images/logo.png";
+  var sampleURLs = [ "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/zion-hiker-the-sweetie-hiking-in-zion-narrows_w725_h544.jpg",
+"http://www.public-domain-image.com/cache/people-public-domain-images-pictures/children-kids-public-domain-images-pictures/children-playing_w562_h725.jpg",
+"http://www.public-domain-image.com/cache/architecture-public-domain-images-pictures/fountain-public-domain-images-pictures/water-fountain-in-park_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/winter-at-bryce-canyon_w725_h544.jpg", "http://www.public-domain-image.com/cache/fauna-animals-public-domain-images-pictures/prairie-dog-public-domain-images-pictures/prairie-dog-pups_w725_h483.jpg", "http://www.public-domain-image.com/cache/fauna-animals-public-domain-images-pictures/prairie-dog-public-domain-images-pictures/prairie-rattlesnake-crotalus-viridis_w725_h484.jpg", "http://www.public-domain-image.com/cache/fauna-animals-public-domain-images-pictures/tigers-public-domain-images-pictures/bengal-tiger_w725_h486.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/field-public-domain-images-pictures/wooden-logs-in-field_w725_h483.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/field-public-domain-images-pictures/wheat-yellow-in-field_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/field-public-domain-images-pictures/vineyards_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/autumn-public-domain-images-pictures/old-trees-with-leaves-on-ground-in-autumn_w725_h484.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/yaki-point-at-the-grand-canyon_w725_h547.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/canyon-public-domain-images-pictures/grand-canyons-overlook-railings-pointing_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/coast-public-domain-images-pictures/sand-ocean-tidepools-sea-swimming-swimmers-waves_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/coast-public-domain-images-pictures/waves-breaking-rocks_w725_h544.jpg", "http://www.public-domain-image.com/cache/nature-landscapes-public-domain-images-pictures/sand-public-domain-images-pictures/sand-footstep_w725_h482.jpg"];
+
+  var pane = SC.ControlTestPane.design()
+    .add("image_not_loaded", SC.ImageView, {
+      value: null, layout : { width: 200, height: 300 },
+      useCanvas: NO
+    })
+    .add("image_loaded", SC.ImageView, {
+      value: logoURL, layout : { width: 200, height: 300 },
+      useImageQueue: NO,
+      useCanvas: NO
+    })
+    .add('sprite_image', SC.ImageView, {
+      layout: { width: 200, height: 300 },
+      value: 'sprite-class',
+      useCanvas: NO
+    })
+    .add('image_canvas', SC.ImageView, {
+      layout: { width: 200, height: 300 },
+      useCanvas: YES,
+      value: logoURL
+    })
+    .add('image_holder', SC.View, {
+      layout: { width: 200, height: 200 }
+    });
+
+  pane.show();
+
+  module('SC.ImageView ui', pane.standardSetup());
+
+  test("Verify that all the rendering properties of an image that is being loaded are correct", function() {
+    var imageView = pane.view('image_not_loaded'),
+        url;
+
+    ok(imageView.get('isVisibleInWindow'), 'image_not_loaded is visible in window');
+
+    imageView.set('value', logoURL);
+    ok(imageView.get('status') !== SC.IMAGE_STATE_LOADED, 'PRECOND - status should not be loaded (status=%@)'.fmt(imageView.get('status')));
+    ok(imageView.get('status') === SC.IMAGE_STATE_LOADING, 'PRECOND - status should be loading (status=%@)'.fmt(imageView.get('status')));
+
+    url = imageView.$('img').attr('src');
+    ok((url.indexOf('base64')!=-1) || (url.indexOf('blank.gif')!=-1), "The src should be blank URL. url = %@".fmt(url));
+  });
+
+  test("Verify that all the rendering properties of an image that is loaded are correct", function() {
+    var imageView = pane.view('image_loaded'),
+        imgEl;
+
+    ok(imageView.get('isVisibleInWindow'), 'image_loaded is visible in window');
+
+    imageView.addObserver('status', this, function() {
+      equals(SC.IMAGE_STATE_LOADED, imageView.get('status'), 'status should be loaded');
+
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        imgEl = imageView.$('img');
+        equals(logoURL, imgEl.attr('src'), "img src should be set to logoURL");
+
+        window.start(); // continue the tests
+        }, 100);
+    });
+
+    stop();
+  });
+
+  test("Verify that the tooltip is correctly being set as both the title and attribute (disabling localization for this test)", function() {
+    var imageView = pane.view('image_loaded'),
+        testToolTip = 'This is a test tooltip',
+        imgEl;
+
+    imageView.set('localization', NO);
+    imageView.set('toolTip', testToolTip);
+
+    imageView.addObserver('status', this, function() {
+      setTimeout(function() {
+        imgEl = imageView.$('img');
+        equals(imgEl.attr('title'), testToolTip, "title attribute");
+        equals(imgEl.attr('alt'), testToolTip, "alt attribute");
+
+        window.start(); // continue the tests
+      }, 100);
+    });
+
+    stop();
+  });
+
+
+  test("Verify canvas rendering and properties", function() {
+    var view = pane.view('image_canvas'),
+        canvasEl = view.$();
+
+    equals(canvasEl.attr('width'), 200, "The width of the canvas element should be set");
+    equals(canvasEl.attr('height'), 300, "The height of the canvas element should be set");
+  });
+
+  test("Using imageQueue", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView1,
+        imageView2,
+        lastMod1,
+        lastMod2;
+
+    stop();
+
+    // Only allow 1 image at a time
+    SC.imageQueue.loadLimit = 1;
+
+    // Add a random value so that the images appear as unique
+    lastMod1 = Math.round(Math.random() * 100000);
+    lastMod2 = Math.round(Math.random() * 100000);
+
+    // Set the first view to load in the background (ie. it should load last although it was created first)
+    imageView1 = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + lastMod1,
+      canLoadInBackground: YES
+    });
+    imageView2 = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + lastMod2,
+      canLoadInBackground: NO
+    });
+
+    // The second image should load first and the first not be loaded yet
+    imageView2.addObserver('status', this, function() {
+      equals(imageView2.get('status'), SC.IMAGE_STATE_LOADED, 'imageView2 status on imageView2 status change');
+      equals(imageView1.get('status'), SC.IMAGE_STATE_LOADING, 'imageView1 status on imageView2 status change');
+    });
+
+    imageView1.addObserver('status', this, function() {
+      equals(imageView2.get('status'), SC.IMAGE_STATE_LOADED, 'imageView2 status on imageView1 status change');
+      equals(imageView1.get('status'), SC.IMAGE_STATE_LOADED, 'imageView1 status on imageView1 status change');
+
+      window.start(); // starts the test runner
+    });
+
+    imageHolder.appendChild(imageView1);
+    imageHolder.appendChild(imageView2);
+  });
+
+  function testScale(imageView, isImg) {
+    stop();
+
+    // Default is SC.FILL
+    imageView.addObserver('status', this, function() {
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        var imgEl,
+            innerFrame,
+            testImg = !imageView.get('useCanvas');
+
+        // Default is SC.FILL
+        innerFrame  = imageView.get('innerFrame');
+        equals(innerFrame.width, 588, "SC.FILL width");
+        equals(innerFrame.height, 90, "SC.FILL height");
+        if (testImg) {
+          imgEl = imageView.$('img');
+
+          equals(imgEl.css('width'), "588px", "SC.FILL width");
+          equals(imgEl.css('height'), "90px", "SC.FILL height");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.SCALE_NONE);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 294, "SC.SCALE_NONE width");
+        equals(innerFrame.height, 60, "SC.SCALE_NONE height");
+        if (testImg) {
+          equals(imgEl.css('width'), "294px", "SC.SCALE_NONE width");
+          equals(imgEl.css('height'), "60px", "SC.SCALE_NONE height");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.FILL_PROPORTIONALLY);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 588, "SC.FILL_PROPORTIONALLY width");
+        equals(innerFrame.height, 120, "SC.FILL_PROPORTIONALLY height");
+        if (testImg) {
+          equals(imgEl.css('width'), "588px", "SC.FILL_PROPORTIONALLY width");
+          equals(imgEl.css('height'), "120px", "SC.FILL_PROPORTIONALLY height");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.BEST_FIT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 441, "SC.BEST_FIT width");
+        equals(innerFrame.height, 90, "SC.BEST_FIT height");
+        if (testImg) {
+          equals(imgEl.css('width'), "441px", "SC.BEST_FIT width");
+          equals(imgEl.css('height'), "90px", "SC.BEST_FIT height");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('scale', SC.BEST_FIT_DOWN_ONLY);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 294, "SC.BEST_FIT_DOWN_ONLY width (larger frame)");
+        equals(innerFrame.height, 60, "SC.BEST_FIT_DOWN_ONLY height (larger frame)");
+        if (testImg) {
+          equals(imgEl.css('width'), "294px", "SC.BEST_FIT_DOWN_ONLY width (larger frame)");
+          equals(imgEl.css('height'), "60px", "SC.BEST_FIT_DOWN_ONLY height (larger frame)");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('layout', { top: 0, left: 0, width: 147, height: 90 });
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.width, 147, "SC.BEST_FIT_DOWN_ONLY width (smaller size frame)");
+        equals(innerFrame.height, 30, "SC.BEST_FIT_DOWN_ONLY height (smaller size frame)");
+        if (testImg) {
+          equals(imgEl.css('width'), "147px", "SC.BEST_FIT_DOWN_ONLY width (smaller size frame)");
+          equals(imgEl.css('height'), "30px", "SC.BEST_FIT_DOWN_ONLY height (smaller size frame)");
+        }
+
+        window.start(); // starts the test runner
+      }, 100);
+    });
+  }
+
+  test("Scaling images (img)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 90 },
+      useCanvas: NO
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Scaling images (img) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 90 },
+      useCanvas: NO,
+      useStaticLayout: YES
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Scaling images (canvas)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 90 }
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Scaling images (canvas) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 90 },
+      useStaticLayout: YES
+    });
+
+    testScale(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  function testAlign(imageView) {
+    stop();
+
+    // Default is SC.FILL
+    imageView.addObserver('status', this, function() {
+      // Status has changed, but the observer fires immediately, so pause in order to have the DOM updated
+      setTimeout(function() {
+        var imgEl,
+            innerFrame,
+            testImg = !imageView.get('useCanvas');
+
+        // Default is SC.ALIGN_CENTER
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 30, "SC.ALIGN_CENTER top");
+        equals(innerFrame.x, 147, "SC.ALIGN_CENTER left");
+        if (testImg) {
+          imgEl = imageView.$('img');
+          equals(imgEl.css('top'), "30px", "SC.ALIGN_CENTER top");
+          equals(imgEl.css('left'), "147px", "SC.ALIGN_CENTER left");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP_LEFT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 0, "SC.ALIGN_TOP_LEFT top");
+        equals(innerFrame.x, 0, "SC.ALIGN_TOP_LEFT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP_LEFT top");
+          equals(imgEl.css('left'), "0px", "SC.ALIGN_TOP_LEFT left");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 0, "SC.ALIGN_TOP top");
+        equals(innerFrame.x, 147, "SC.ALIGN_TOP left");
+        if (testImg) {
+          equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP top");
+          equals(imgEl.css('left'), "147px", "SC.ALIGN_TOP left");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_TOP_RIGHT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 0, "SC.ALIGN_TOP_RIGHT top");
+        equals(innerFrame.x, 294, "SC.ALIGN_TOP_RIGHT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "0px", "SC.ALIGN_TOP_RIGHT top");
+          equals(imgEl.css('left'), "294px", "SC.ALIGN_TOP_RIGHT left");
+        }
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_RIGHT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 30, "SC.ALIGN_RIGHT top");
+        equals(innerFrame.x, 294, "SC.ALIGN_RIGHT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "30px", "SC.ALIGN_RIGHT top");
+          equals(imgEl.css('left'), "294px", "SC.ALIGN_RIGHT left");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM_RIGHT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 60, "SC.ALIGN_BOTTOM_RIGHT top");
+        equals(innerFrame.x, 294, "SC.ALIGN_BOTTOM_RIGHT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM_RIGHT top");
+          equals(imgEl.css('left'), "294px", "SC.ALIGN_BOTTOM_RIGHT left");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 60, "SC.ALIGN_BOTTOM top");
+        equals(innerFrame.x, 147, "SC.ALIGN_BOTTOM left");
+        if (testImg) {
+          equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM top");
+          equals(imgEl.css('left'), "147px", "SC.ALIGN_BOTTOM left");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_BOTTOM_LEFT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 60, "SC.ALIGN_BOTTOM_LEFT top");
+        equals(innerFrame.x, 0, "SC.ALIGN_BOTTOM_LEFT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "60px", "SC.ALIGN_BOTTOM_LEFT top");
+          equals(imgEl.css('left'), "0px", "SC.ALIGN_BOTTOM_LEFT left");
+        }
+
+        SC.RunLoop.begin();
+        imageView.set('align', SC.ALIGN_LEFT);
+        SC.RunLoop.end();
+
+        innerFrame = imageView.get('innerFrame');
+        equals(innerFrame.y, 30, "SC.ALIGN_LEFT top");
+        equals(innerFrame.x, 0, "SC.ALIGN_LEFT left");
+        if (testImg) {
+          equals(imgEl.css('top'), "30px", "SC.ALIGN_LEFT top");
+          equals(imgEl.css('left'), "0px", "SC.ALIGN_LEFT left");
+        }
+
+        window.start(); // starts the test runner
+      }, 100);
+    });
+  }
+
+  test("Aligning images (img)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 120 },
+      useCanvas: NO,
+      scale: SC.SCALE_NONE
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (img) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 120 },
+      useCanvas: NO,
+      useStaticLayout: YES,
+      scale: SC.SCALE_NONE
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (canvas)", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 120 },
+      scale: SC.SCALE_NONE
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+
+  test("Aligning images (canvas) with static layout", function() {
+    var imageHolder = pane.view('image_holder'),
+        imageView;
+
+    // The logo is 294x60
+    imageView = SC.ImageView.create({
+      value: logoURL + "?lastmod=" + Math.round(Math.random() * 100000),
+      layout: { top: 0, left: 0, width: 588, height: 120 },
+      useStaticLayout: YES,
+      scale: SC.SCALE_NONE
+    });
+
+    testAlign(imageView);
+
+    imageHolder.appendChild(imageView);
+  });
+})();
+