sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/layoutChildViews.js

@@ -31,6 +31,9 @@ test("calls renderLayout() on child views on views that need layout if they have
 
 	view.layoutChildViews();
 	equals(callCount, 2, 'updateLayout should be called on two dirty child views');
+
+	// Clean up.
+	view.destroy();
 });
 
 // .......................................................
@@ -38,7 +41,7 @@ test("calls renderLayout() on child views on views that need layout if they have
 //
 module("SC.View#updateLayout");
 
-test("if view has layout, calls renderLayout with context to update element", function() {
+test("if view has layout, calls _executeDoUpdateLayout", function() {
 
 	// NOTE: renderLayout() is also called when a view's
 	// layer is first created.  We use isTesting below to
@@ -46,9 +49,7 @@ test("if view has layout, calls renderLayout with context to update element", fu
 	// are actually doing layout.
 	var callCount = 0, isTesting = NO ;
 	var view = SC.View.create({
-		renderLayout: function(context) {
-			if (!isTesting) return ;
-			equals(context._elem, this.get('layer'), 'should pass context that will edit layer');
+		_executeDoUpdateLayout: function() {
 			callCount++;
 		}
 	});
@@ -56,9 +57,14 @@ test("if view has layout, calls renderLayout with context to update element", fu
 	view.createLayer(); // we need a layer
 	ok(view.get('layer'), 'precond - should have a layer');
 
-	isTesting= YES ;
 	view.updateLayout();
-	equals(callCount, 1, 'should call renderLayout()');
+	equals(callCount, 0, 'should not call _executeDoUpdateLayout() because the view isn\'t shown');
+
+	view.updateLayout(true);
+	equals(callCount, 1, 'should call _executeDoUpdateLayout() because we force it');
+
+	// Clean up.
+	view.destroy();
 });
 
 test("if view has NO layout, should not call renderLayout", function() {
@@ -80,11 +86,17 @@ test("if view has NO layout, should not call renderLayout", function() {
 	isTesting= YES ;
 	view.updateLayout();
 	equals(callCount, 0, 'should NOT call renderLayout()');
+
+	// Clean up.
+	view.destroy();
 });
 
 test("returns receiver", function() {
 	var view = SC.View.create();
 	equals(view.updateLayout(), view, 'should return receiver');
+
+	// Clean up.
+	view.destroy();
 });
 
 // .......................................................
@@ -108,6 +120,9 @@ test("adds layoutStyle property to passed context", function() {
 
 	equals(context.styles().width, 50, 'should have width style');
 	equals(context.styles().height, 50, 'should have height style');
+
+	// Clean up.
+	view.destroy();
 });
 
 // .......................................................
@@ -121,7 +136,11 @@ module('SC.View#layoutChildViewsIfNeeded', {
 			layoutChildViews: function() { callCount++; }
 		});
 	},
-	teardown: function() { view = null; }
+	teardown: function() {
+		// Clean up.
+		view.destroy();
+		view = null;
+	}
 });
 
 test("calls layoutChildViews() if childViewsNeedLayout and isVisibleInWindow & sets childViewsNeedLayout to NO", function() {
@@ -141,20 +160,6 @@ test("does not call layoutChildViews() if childViewsNeedLayout is NO", function(
 	equals(callCount, 0, 'should NOT call layoutChildViews()');
 });
 
-
-test("does not call layoutChildViews() if isVisibleInWindow is NO unless passed isVisible YES", function() {
-
-	view.childViewsNeedLayout = YES ;
-	view.isVisibleInWindow = NO ;
-	view.layoutChildViewsIfNeeded();
-	equals(callCount, 0, 'should NOT call layoutChildViews()');
-	equals(view.get('childViewsNeedLayout'), YES, 'should leave childViewsNeedLayout set to YES');
-
-	view.layoutChildViewsIfNeeded(YES);
-	equals(callCount, 1, 'should call layoutChildViews()');
-	equals(view.get('childViewsNeedLayout'), NO, 'should set childViewsNeedLayout to NO');
-});
-
 test("returns receiver", function() {
 	equals(view.layoutChildViewsIfNeeded(), view, 'should return receiver');
 });

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/layoutDidChange.js

@@ -4,160 +4,229 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*global module test equals context ok same */
+/*global module, test, equals, ok */
 
-module("SC.View#layoutDidChange");
+module("SC.View.prototype.layoutDidChange");
 
-test("notifies layoutStyle & frame change", function() {
+test("notifies layoutStyle & frame change", function () {
 
   var view = SC.View.create();
-  var callCount = 0;
+  var layoutStyleCallCount = 0, frameCallCount = 0;
+
+  view.addObserver('layoutStyle', function () { layoutStyleCallCount++; });
+  view.addObserver('frame', function () { frameCallCount++; });
+
+  SC.run(function () {
+    // Manually indicate a layout change.
+    view.layoutDidChange();
+  });
+
+  equals(frameCallCount, 1, 'should trigger observers for frame');
+  equals(layoutStyleCallCount, 0, 'should not trigger observers for layoutStyle');
 
-  view.addObserver('layoutStyle', function() { callCount++; });
-  view.addObserver('frame', function() { callCount++; });
+  // Attach to the document.
+  view.createLayer()._doAttach(document.body);
 
-  view.layoutDidChange();
-  equals(callCount,2,'should trigger observers for layoutStyle + frame');
+  equals(frameCallCount, 2, 'should trigger observers for frame when attached to the document');
+  equals(layoutStyleCallCount, 0, 'should still not trigger observers for layoutStyle');
+
+  SC.run(function () {
+    view.adjust('top', 20);
+  });
+
+  equals(frameCallCount, 3, 'should trigger observers for frame when attached to the document');
+  equals(layoutStyleCallCount, 1, 'should trigger observers for layoutStyle');
+
+  // Clean up.
+  view.destroy();
 });
 
-test("invokes layoutDidChangeFor() on layoutView each time it is called", function() {
+test("invokes layoutDidChangeFor() on layoutView each time it is called", function () {
 
-  var callCount = 0 ;
+  var callCount = 0;
   var layoutView = SC.View.create({
-    layoutDidChangeFor: function(changedView){
+    layoutDidChangeFor: function (changedView) {
       equals(this.get('childViewsNeedLayout'), YES, 'should set childViewsNeedLayout to YES before calling layoutDidChangeFor()');
 
       equals(view, changedView, 'should pass view');
       callCount++;
+
+      // Original
+      var set = this._needLayoutViews;
+      if (!set) set = this._needLayoutViews = SC.CoreSet.create();
+      set.add(changedView);
     }
   });
 
   var view = SC.View.create({ layoutView: layoutView });
 
-  view.layoutDidChange();
-  view.layoutDidChange();
-  view.layoutDidChange();
+  SC.run(function () {
+    view.layoutDidChange();
+    view.layoutDidChange();
+    view.layoutDidChange();
+  });
 
   equals(callCount, 3, 'should call layoutView.layoutDidChangeFor each time');
+
+  // Clean up.
+  layoutView.destroy();
+  view.destroy();
 });
 
-test("invokes layoutChildViewsIfNeeded() on layoutView once per runloop", function() {
+test("invokes layoutChildViewsIfNeeded() on layoutView once per runloop", function () {
 
-  var callCount = 0 ;
+  var callCount = 0;
   var layoutView = SC.View.create({
-    layoutChildViewsIfNeeded: function(){
+    layoutChildViewsIfNeeded: function () {
       callCount++;
     }
   });
 
   var view = SC.View.create({ layoutView: layoutView });
 
-  SC.RunLoop.begin();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  SC.RunLoop.end();
+  SC.run(function () {
+    view.layoutDidChange();
+    view.layoutDidChange();
+    view.layoutDidChange();
+  });
 
   equals(callCount, 1, 'should call layoutView.layoutChildViewsIfNeeded one time');
+
+  // Clean up.
+  layoutView.destroy();
+  view.destroy();
 });
 
 
-test("should not invoke layoutChildViewsIfNeeded() if layoutDidChangeFor() sets childViewsNeedLayout to NO each time", function() {
+test("should not invoke layoutChildViewsIfNeeded() if layoutDidChangeFor() sets childViewsNeedLayout to NO each time", function () {
 
-  var callCount = 0 ;
+  var callCount = 0;
   var layoutView = SC.View.create({
-    layoutDidChangeFor: function() {
+    layoutDidChangeFor: function () {
       this.set('childViewsNeedLayout', NO);
     },
 
-    layoutChildViewsIfNeeded: function(){
+    layoutChildViewsIfNeeded: function () {
       callCount++;
     }
   });
 
   var view = SC.View.create({ layoutView: layoutView });
 
-  SC.RunLoop.begin();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  SC.RunLoop.end();
+  SC.run(function () {
+    view.layoutDidChange();
+    view.layoutDidChange();
+    view.layoutDidChange();
+  });
 
   equals(callCount, 0, 'should not call layoutView.layoutChildViewsIfNeeded');
+
+  // Clean up.
+  layoutView.destroy();
+  view.destroy();
 });
 
-test('returns receiver', function() {
+test('returns receiver', function () {
   var view = SC.View.create();
-  equals(view.layoutDidChange(), view, 'should return receiver');
+
+  SC.run(function () {
+    equals(view.layoutDidChange(), view, 'should return receiver');
+  });
+
+  // Clean up.
+  view.destroy();
 });
 
-test("is invoked whenever layout property changes", function() {
+test("is invoked whenever layout property changes", function () {
 
-  var callCount = 0 ;
+  var callCount = 0;
   var layoutView = SC.View.create({
-    layoutDidChangeFor: function(changedView){
+    layoutDidChangeFor: function (changedView) {
       callCount++;
+
+      // Original
+      var set = this._needLayoutViews;
+      if (!set) set = this._needLayoutViews = SC.CoreSet.create();
+      set.add(changedView);
     }
   });
 
   var view = SC.View.create({ layoutView: layoutView });
 
-  view.set('layout', { top: 0, left: 10 });
+  SC.run(function () {
+    view.set('layout', { top: 0, left: 10 });
+  });
   equals(callCount, 1, 'should call layoutDidChangeFor when setting layout of child view');
 
-
+  // Clean up.
+  layoutView.destroy();
+  view.destroy();
 });
 
-test("is invoked on parentView if no layoutView whenever layout property changes", function() {
+test("is invoked on parentView if no layoutView whenever layout property changes", function () {
 
-  var callCount = 0 ;
+  var callCount = 0;
   var parentView = SC.View.create({
-    layoutDidChangeFor: function(changedView){
+    layoutDidChangeFor: function (changedView) {
       callCount++;
+
+      // Original
+      var set = this._needLayoutViews;
+      if (!set) set = this._needLayoutViews = SC.CoreSet.create();
+      set.add(changedView);
     }
   });
 
   var view = SC.View.create({});
   view.set('parentView', parentView);
 
-  view.set('layout', { top: 0, left: 10 });
+  SC.run(function () {
+    view.set('layout', { top: 0, left: 10 });
+  });
   equals(callCount, 1, 'should call layoutDidChangeFor when setting layout of child view');
 
+  // Clean up.
+  parentView.destroy();
+  view.destroy();
 });
 
-test("sets rotateX when rotate is set", function() {
+test("sets rotateX when rotate is set", function () {
   var view = SC.View.create({});
-  view.set('layout', { rotate: 45 });
+
+  SC.run(function () {
+    view.set('layout', { rotate: 45 });
+  });
 
   equals(view.get('layout').rotateX, 45, "should set rotateX");
+
+  // Clean up.
+  view.destroy();
 });
 
-test("sets rotate when rotateX is set", function(){
+test("rotateX overrides rotate", function () {
   var view = SC.View.create({});
-  view.set('layout', { rotateX: 45 });
-  equals(view.get('layout').rotate, 45, "should set rotate");
 
-  view.set('layout', { rotateX: 0 });
-  equals(view.get('layout').rotate, 0, "should also work with 0");
-});
+  SC.run(function () {
+    view.set('layout', { rotate: 45, rotateX: 90 });
+  });
 
-test("rotateX overrides rotate", function(){
-  var view = SC.View.create({});
-  view.set('layout', { rotate: 45, rotateX: 90 });
-  equals(view.get('layout').rotate, 90, "should set rotate to rotateX");
+  equals(view.get('layout').rotate, undefined, "should clear rotate for rotateX");
+
+  // Clean up.
+  view.destroy();
 });
 
 // The default implementation for viewDidResize calls internal layout-related
 // methods on child views. This test confirms that child views that do not
 // support layout do not cause this process to explode.
-test("Calling viewDidResize on a view notifies its child views", function() {
+test("Calling viewDidResize on a view notifies its child views", function () {
   var regularViewCounter = 0, coreViewCounter = 0;
 
   var view = SC.View.create({
     childViews: ['regular', 'core'],
 
     regular: SC.View.create({
-      viewDidResize: function() {
+      viewDidResize: function () {
         regularViewCounter++;
         // Make sure we call the default implementation to
         // ensure potential blow-uppy behavior is invoked
@@ -166,7 +235,7 @@ test("Calling viewDidResize on a view notifies its child views", function() {
     }),
 
     core: SC.CoreView.create({
-      viewDidResize: function() {
+      viewDidResize: function () {
         coreViewCounter++;
         sc_super();
       }
@@ -177,4 +246,7 @@ test("Calling viewDidResize on a view notifies its child views", function() {
 
   equals(regularViewCounter, 1, "regular view's viewDidResize gets called");
   equals(coreViewCounter, 1, "core view's viewDidResize gets called");
+
+  // Clean up.
+  view.destroy();
 });

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/layoutStyle.js

@@ -8,17 +8,17 @@
 // View Layout Unit Tests
 // ========================================================================
 
-/*globals module test ok same equals */
+/*global module test ok same equals */
 
 
 /* These unit tests verify:  layout(), frame(), styleLayout() and clippingFrame(). */
-(function() {
+(function () {
   var parent, child, frameKeys, layoutKeys;
 
   frameKeys = 'x y width height'.w();
-  layoutKeys = ['width','height','top','bottom','marginLeft','marginTop','left','right','zIndex',
-    'minWidth','maxWidth','minHeight','maxHeight','borderTopWidth','borderBottomWidth',
-    'borderLeftWidth','borderRightWidth'];
+  layoutKeys = ['width', 'height', 'top', 'bottom', 'marginLeft', 'marginTop', 'left', 'right', 'zIndex',
+    'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'borderTopWidth', 'borderBottomWidth',
+    'borderLeftWidth', 'borderRightWidth'];
 
   /*
     helper method to test the layout of a view.  Applies the passed layout to a
@@ -40,9 +40,9 @@
     if (SC.platform.supportsCSSTransforms) { layoutKeys.push('transform'); }
 
     // make sure we add null properties and convert numbers to 'XXpx' to style layout.
-    layoutKeys.forEach(function(key) {
-      if (no_s[key]===undefined) { no_s[key] = null; }
-      if (with_s[key]===undefined) { with_s[key] = null; }
+    layoutKeys.forEach(function (key) {
+      if (no_s[key] === undefined) { no_s[key] = null; }
+      if (with_s[key] === undefined) { with_s[key] = null; }
 
 
       if (typeof no_s[key] === 'number') { no_s[key] = no_s[key].toString() + 'px'; }
@@ -50,21 +50,23 @@
     });
 
     // set layout
-    child.set('layout', layout) ;
+    SC.run(function () {
+      child.set('layout', layout);
+    });
 
     var layoutStyle = child.get('layoutStyle'),
         frame = child.get('frame'),
         testKey;
 
     // test
-    layoutKeys.forEach(function(key) {
-      testKey = key === 'transform' ? SC.platform.domCSSPrefix+'Transform' : key;
+    layoutKeys.forEach(function (key) {
+      testKey = key === 'transform' ? SC.browser.domPrefix + 'Transform' : key;
       equals(layoutStyle[testKey], no_s[key], "STYLE NO PARENT %@".fmt(key));
     });
 
     if (no_f !== undefined) {
       if (frame && no_f) {
-        frameKeys.forEach(function(key){
+        frameKeys.forEach(function (key) {
           equals(frame[key], no_f[key], "FRAME NO PARENT %@".fmt(key));
         });
       } else {
@@ -82,14 +84,14 @@
     frame = child.get('frame');
 
     // test again
-    layoutKeys.forEach(function(key) {
-      testKey = key === 'transform' ? SC.platform.domCSSPrefix+'Transform' : key;
+    layoutKeys.forEach(function (key) {
+      testKey = key === 'transform' ? SC.browser.domPrefix + 'Transform' : key;
       equals(layoutStyle[testKey], with_s[key], "STYLE W/ PARENT %@".fmt(key));
     });
 
     if (with_f !== undefined) {
       if (frame && with_f) {
-        frameKeys.forEach(function(key){
+        frameKeys.forEach(function (key) {
           equals(frame[key], with_f[key], "FRAME W/ PARENT %@".fmt(key));
         });
       } else {
@@ -107,7 +109,7 @@
     tests.
   */
   var commonSetup = {
-    setup: function() {
+    setup: function () {
 
       // create basic parent view
       parent = SC.View.create({
@@ -118,22 +120,27 @@
       child = SC.View.create();
     },
 
-    teardown: function() {
-      parent = child = null ;
+    teardown: function () {
+      child.destroy();
+      parent.destroy();
+      parent = child = null;
     }
   };
 
-  module("NOTIFICATIONS", commonSetup) ;
+  module("NOTIFICATIONS", commonSetup);
 
-  test("Setting layout will notify frame observers", function() {
+  test("Setting layout will notify frame observers", function () {
     var didNotify = NO, didNotifyStyle = NO;
-    child.addObserver('frame', this, function() { didNotify = YES; }) ;
-    child.addObserver('layoutStyle', this, function() { didNotifyStyle = YES; });
+    child.addObserver('frame', this, function () { didNotify = YES; });
+    child.addObserver('layoutStyle', this, function () { didNotifyStyle = YES; });
+
+    SC.run(function () {
+      child.set('layout', { left: 0, top: 10, bottom: 20, right: 50 });
+    });
 
-    child.set('layout', { left: 0, top: 10, bottom: 20, right: 50 }) ;
     ok(didNotify, "didNotify");
     ok(didNotifyStyle, 'didNotifyStyle');
-  }) ;
+  });
 
   // ..........................................................
   // TEST FRAME/STYLEFRAME WITH BASIC LAYOUT VARIATIONS
@@ -143,50 +150,53 @@
 
   module('BASIC LAYOUT VARIATIONS', commonSetup);
 
-  test("layout {top, left, width, height}", function() {
+  test("layout {top, left, width, height}", function () {
 
     var layout = { top: 10, left: 10, width: 50, height: 50 };
-    var s = { top: 10, left: 10, width: 50, height: 50 } ;
-    var no_f = { x: 10, y: 10, width: 50, height: 50 } ;
-    var with_f = { x: 10, y: 10, width: 50, height: 50 } ;
+    var s = { top: 10, left: 10, width: 50, height: 50 };
+    var no_f = { x: 10, y: 10, width: 50, height: 50 };
+    var with_f = { x: 10, y: 10, width: 50, height: 50 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, YES) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, YES);
+  });
 
-  test("layout {top, left, bottom, right}", function() {
+  test("layout {top, left, bottom, right}", function () {
 
     var layout = { top: 10, left: 10, bottom: 10, right: 10 };
-    var no_f = { x: 10, y: 10, width: 0, height: 0 } ;
-    var with_f = { x: 10, y: 10, width: 180, height: 180 } ;
-    var s = { top: 10, left: 10, bottom: 10, right: 10 } ;
+    var no_f = { x: 10, y: 10, width: 0, height: 0 };
+    var with_f = { x: 10, y: 10, width: 180, height: 180 };
+    var s = { top: 10, left: 10, bottom: 10, right: 10 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {bottom, right, width, height}", function() {
+  test("layout {bottom, right, width, height}", function () {
 
     var layout = { bottom: 10, right: 10, width: 50, height: 50 };
-    var no_f = { x: 0, y: 0, width: 50, height: 50 } ;
-    var with_f = { x: 140, y: 140, width: 50, height: 50 } ;
-    var s = { bottom: 10, right: 10, width: 50, height: 50 } ;
+    var no_f = { x: 0, y: 0, width: 50, height: 50 };
+    var with_f = { x: 140, y: 140, width: 50, height: 50 };
+    var s = { bottom: 10, right: 10, width: 50, height: 50 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {centerX, centerY, width, height}", function() {
+  test("layout {centerX, centerY, width, height}", function () {
 
     var layout = { centerX: 10, centerY: 10, width: 60, height: 60 };
-    var no_f = { x: 10, y: 10, width: 60, height: 60 } ;
-    var with_f = { x: 80, y: 80, width: 60, height: 60 } ;
-    var s = { marginLeft: -20, marginTop: -20, width: 60, height: 60, top: "50%", left: "50%" } ;
+    var no_f = { x: 10, y: 10, width: 60, height: 60 };
+    var with_f = { x: 80, y: 80, width: 60, height: 60 };
+    var s = { marginLeft: -20, marginTop: -20, width: 60, height: 60, top: "50%", left: "50%" };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
+
+  test("layout {top, left, width: auto, height: auto}", function () {
+    // Reset.
+    child.destroy();
 
-  test("layout {top, left, width: auto, height: auto}", function() {
     child = SC.View.create({
       useStaticLayout: YES,
-      render: function(context) {
+      render: function (context) {
         // needed for auto
         context.push('<div style="padding: 10px"></div>');
       }
@@ -200,12 +210,13 @@
     var layout = { top: 0, left: 0, width: 'auto', height: 'auto' };
     var no_f = null;
     // See test below
-    var with_f = undefined; // { x: 0, y: 0, width: 200, height: 200 };
+    var with_f; // { x: 0, y: 0, width: 200, height: 200 };
     var s = { top: 0, left: 0, width: 'auto', height: 'auto' };
 
     performLayoutTest(layout, no_f, s, with_f, s, NO);
 
     layer.parentNode.removeChild(layer);
+    child.destroy();
   });
 
   // See comment in above test
@@ -221,50 +232,81 @@
 
   module('BASIC LAYOUT VARIATIONS PERCENTAGE', commonSetup);
 
-  test("layout {top, left, width, height}", function() {
+  test("layout {top, left, width, height}", function () {
 
     var layout = { top: 0.1, left: 0.1, width: 0.5, height: 0.5 };
-    var s = { top: '10%', left: '10%', width: '50%', height: '50%' } ;
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 20, y: 20, width: 100, height: 100 } ;
+    var s = { top: '10%', left: '10%', width: '50%', height: '50%' };
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 20, y: 20, width: 100, height: 100 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {top, left, bottom, right}", function() {
+  test("layout {top, left, bottom, right}", function () {
 
     var layout = { top: 0.1, left: 0.1, bottom: 0.1, right: 0.1 };
     var no_f = { x: 0, y: 0, width: 0, height: 0 };
     var with_f =  { x: 20, y: 20, width: 160, height: 160 };
-    var s = { top: '10%', left: '10%', bottom: '10%', right: '10%' } ;
+    var s = { top: '10%', left: '10%', bottom: '10%', right: '10%' };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {bottom, right, width, height}", function() {
+  test("layout {bottom, right, width, height}", function () {
 
     var layout = { bottom: 0.1, right: 0.1, width: 0.5, height: 0.5 };
     var no_f = { x: 0, y: 0, width: 0, height: 0 };
     var with_f = { x: 80, y: 80, width: 100, height: 100 };
-    var s = { bottom: '10%', right: '10%', width: '50%', height: '50%' } ;
+    var s = { bottom: '10%', right: '10%', width: '50%', height: '50%' };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {centerX, centerY, width, height}", function() {
+  test("layout {centerX, centerY, width, height}", function () {
 
     var layout = { centerX: 0.1, centerY: 0.1, width: 0.6, height: 0.6 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 60, y: 60, width: 120, height: 120 } ;
-    var s = { marginLeft: '-20%', marginTop: '-20%', width: '60%', height: '60%', top: "50%", left: "50%" } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 60, y: 60, width: 120, height: 120 };
+    var s = { marginLeft: '-20%', marginTop: '-20%', width: '60%', height: '60%', top: "50%", left: "50%" };
+
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
+
+  // Previously, you couldn't set a % width or height with a centerX/centerY of 0.
+  // But there's no reason that a % sized view can't be centered at 0 and this
+  // test shows that.
+  test("layout {centerX 0, centerY 0, width %, height %}", function () {
+    var layout = { centerX: 0, centerY: 0, width: 0.6, height: 0.6 };
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+
+    // The parent frame is 200 x 200.
+    var size = 200 * 0.6;
+    var with_f = { x: (200 - size) * 0.5, y: (200 - size) * 0.5, width: size, height: size };
+    var s = { marginLeft: '-30%', marginTop: '-30%', width: '60%', height: '60%', top: "50%", left: "50%" };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
+
+  // Edge case: although rare, centered views should be able to have metrics of zero.
+  test("layout {centerX 0, centerY 0, width 0, height 0}", function () {
+    var layout = { centerX: 0, centerY: 0, width: 0, height: 0 };
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+
+    // The parent frame is 200 x 200.
+    var size = 0;
+    var with_f = { x: (200 - size) * 0.5, y: (200 - size) * 0.5, width: size, height: size };
+    var s = { marginLeft: '0px', marginTop: '0px', width: '0px', height: '0px', top: '50%', left: '50%' };
+
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
+
+  test("layout {top, left, width: auto, height: auto}", function () {
+    // Reset.
+    child.destroy();
 
-  test("layout {top, left, width: auto, height: auto}", function() {
     child = SC.View.create({
       useStaticLayout: YES,
-      render: function(context) {
+      render: function (context) {
         // needed for auto
         context.push('<div style="padding: 10px"></div>');
       }
@@ -278,12 +320,13 @@
     var layout = { top: 0.1, left: 0.1, width: 'auto', height: 'auto' };
     var no_f = null;
     // See pending test below
-    var with_f = undefined; // { x: 20, y: 20, width: 180, height: 180 };
+    var with_f; // { x: 20, y: 20, width: 180, height: 180 };
     var s = { top: '10%', left: '10%', width: 'auto', height: 'auto' };
 
     performLayoutTest(layout, no_f, s, with_f, s, NO);
 
     layer.parentNode.removeChild(layer);
+    child.destroy();
   });
 
   // See commented out lines in test above
@@ -298,65 +341,92 @@
   // parent.
 
   module('CSS TRANSFORM LAYOUT VARIATIONS', {
-    setup: function(){
+    setup: function () {
       commonSetup.setup();
       child.createLayer();
       document.body.appendChild(child.get('layer'));
     },
 
-    teardown: function(){
+    teardown: function () {
+      document.body.removeChild(child.get('layer'));
       child.destroyLayer();
       commonSetup.teardown();
     }
   });
 
-  function transformFor(view){
-    return view.get('layer').style[SC.platform.domCSSPrefix+'Transform'];
+  function transformFor(view) {
+    return view.get('layer').style[SC.browser.domPrefix + 'Transform'];
   }
 
-  test("layout {rotateX}", function() {
-    child.adjust('rotateX', 45).updateLayout();
+  test("layout {rotateX}", function () {
+    SC.run(function () {
+      child.adjust('rotateX', 45).updateLayout(true);
+    });
+
     equals(transformFor(child), 'rotateX(45deg)', 'transform attribute should be "rotateX(45deg)"');
   });
 
-  test("layout {rotateY}", function() {
-    child.adjust('rotateY', 45).updateLayout();
+  test("layout {rotateY}", function () {
+    SC.run(function () {
+      child.adjust('rotateY', 45).updateLayout(true);
+    });
     equals(transformFor(child), 'rotateY(45deg)', 'transform attribute should be "rotateY(45deg)"');
   });
 
-  test("layout {rotateZ}", function() {
-    child.adjust('rotateZ', 45).updateLayout();
+  test("layout {rotateZ}", function () {
+    SC.run(function () {
+      child.adjust('rotateZ', 45).updateLayout(true);
+    });
+
     equals(transformFor(child), 'rotateZ(45deg)', 'transform attribute should be "rotateZ(45deg)"');
   });
 
-  test("layout {rotate}", function() {
-    child.adjust('rotate', 45).updateLayout();
+  test("layout {rotate}", function () {
+    SC.run(function () {
+      child.adjust('rotate', 45).updateLayout(true);
+    });
+
     equals(transformFor(child), 'rotateX(45deg)', 'transform attribute should be "rotateX(45deg)"');
   });
 
-  test("layout {rotateX} with units", function() {
-    child.adjust('rotateX', '1rad').updateLayout();
+  test("layout {rotateX} with units", function () {
+    SC.run(function () {
+      child.adjust('rotateX', '1rad').updateLayout(true);
+    });
+
     equals(transformFor(child), 'rotateX(1rad)', 'transform attribute should be "rotateX(1rad)"');
   });
 
-  test("layout {scale}", function() {
-    child.adjust('scale', 2).updateLayout();
+  test("layout {scale}", function () {
+    SC.run(function () {
+      child.adjust('scale', 2).updateLayout(true);
+    });
+
     equals(transformFor(child), 'scale(2)', 'transform attribute should be "scale(2)"');
   });
 
-  test("layout {scale} with multiple", function() {
-    child.adjust('scale', [2, 3]).updateLayout();
+  test("layout {scale} with multiple", function () {
+    SC.run(function () {
+      child.adjust('scale', [2, 3]).updateLayout(true);
+    });
+
     equals(transformFor(child), 'scale(2, 3)', 'transform attribute should be "scale(2, 3)"');
   });
 
-  test("layout {rotateX, scale}", function() {
-    child.adjust({ rotateX: 45, scale: 2 }).updateLayout();
+  test("layout {rotateX, scale}", function () {
+    SC.run(function () {
+      child.adjust({ rotateX: 45, scale: 2 }).updateLayout(true);
+    });
+
     equals(transformFor(child), 'rotateX(45deg) scale(2)', 'transform attribute should be "rotateX(45deg) scale(2)"');
   });
 
-  test("layout {rotateX} update", function() {
-    child.adjust('rotateX', 45).updateLayout();
-    child.adjust('rotateX', 90).updateLayout();
+  test("layout {rotateX} update", function () {
+    SC.run(function () {
+      child.adjust('rotateX', 45).updateLayout(true);
+      child.adjust('rotateX', 90).updateLayout(true);
+    });
+
     equals(transformFor(child), 'rotateX(90deg)', 'transform attribute should be "rotateX(90deg)"');
   });
 
@@ -370,40 +440,43 @@
     // parent.
 
     module('ACCELERATED LAYOUT VARIATIONS', {
-      setup: function(){
+      setup: function () {
         commonSetup.setup();
-        child.wantsAcceleratedLayer = YES;
+        child.set('wantsAcceleratedLayer', YES);
       },
 
       teardown: commonSetup.teardown
     });
 
-    test("layout {top, left, width, height}", function() {
+    test("layout {top, left, width, height}", function () {
       var layout = { top: 10, left: 10, width: 50, height: 50 };
       var expectedTransform = 'translateX(10px) translateY(10px)';
       if (SC.platform.supportsCSS3DTransforms) expectedTransform += ' translateZ(0px)';
-      var s = { top: 0, left: 0, width: 50, height: 50, transform: expectedTransform } ;
-      var no_f = { x: 10, y: 10, width: 50, height: 50 } ;
-      var with_f = { x: 10, y: 10, width: 50, height: 50} ;
+      var s = { top: 0, left: 0, width: 50, height: 50, transform: expectedTransform };
+      var no_f = { x: 10, y: 10, width: 50, height: 50 };
+      var with_f = { x: 10, y: 10, width: 50, height: 50};
 
-      performLayoutTest(layout, no_f, s, with_f, s, YES) ;
-    }) ;
+      performLayoutTest(layout, no_f, s, with_f, s, YES);
+    });
 
-    test("layout {top, left, bottom, right}", function() {
+    test("layout {top, left, bottom, right}", function () {
 
       var layout = { top: 10, left: 10, bottom: 10, right: 10 };
-      var no_f = { x: 10, y: 10, width: 0, height: 0 } ;
-      var with_f = { x: 10, y: 10, width: 180, height: 180 } ;
-      var s = { top: 10, left: 10, bottom: 10, right: 10, transform: null } ;
+      var no_f = { x: 10, y: 10, width: 0, height: 0 };
+      var with_f = { x: 10, y: 10, width: 180, height: 180 };
+      var s = { top: 10, left: 10, bottom: 10, right: 10, transform: null };
+
+      performLayoutTest(layout, no_f, s, with_f, s, NO);
+    });
 
-      performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-    }) ;
+    test("layout {top, left, width: auto, height: auto}", function () {
+      // Reset.
+      child.destroy();
 
-    test("layout {top, left, width: auto, height: auto}", function() {
       child = SC.View.create({
         wantsAcceleratedLayer: YES,
         useStaticLayout: YES,
-        render: function(context) {
+        render: function (context) {
           // needed for auto
           context.push('<div style="padding: 10px"></div>');
         }
@@ -417,35 +490,33 @@
       var layout = { top: 0, left: 0, width: 'auto', height: 'auto' };
       var no_f = null;
       // See test below
-      var with_f = undefined; // { x: 0, y: 0, width: 200, height: 200 };
+      var with_f; // { x: 0, y: 0, width: 200, height: 200 };
       var s = { top: 0, left: 0, width: 'auto', height: 'auto', transform: null };
 
       performLayoutTest(layout, no_f, s, with_f, s, NO);
 
       layer.parentNode.removeChild(layer);
+
+      child.destroy();
     });
 
-      // See commented lines in test above
-      test("layout {top, left, width: auto, height: auto} - frame");
+    // See commented lines in test above
+    test("layout {top, left, width: auto, height: auto} - frame");
 
-    test("layout w/ percentage {top, left, width, height}", function() {
+    test("layout w/ percentage {top, left, width, height}", function () {
 
       var layout = { top: 0.1, left: 0.1, width: 0.5, height: 0.5 };
-      var s = { top: '10%', left: '10%', width: '50%', height: '50%', transform: null } ;
+      var s = { top: '10%', left: '10%', width: '50%', height: '50%', transform: null };
       var no_f = { x: 0, y: 0, width: 0, height: 0 };
-      var with_f = { x: 20, y: 20, width: 100, height: 100 } ;
+      var with_f = { x: 20, y: 20, width: 100, height: 100 };
 
-      performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-    }) ;
+      performLayoutTest(layout, no_f, s, with_f, s, NO);
+    });
 
   }
 
 
 
-
-
-
-
   // ..........................................................
   // TEST FRAME/STYLEFRAME WITH INVALID LAYOUT VARIATIONS
   //
@@ -454,108 +525,110 @@
 
   module('INVALID LAYOUT VARIATIONS', commonSetup);
 
-  test("layout {top, left} - assume right/bottom=0", function() {
+  test("layout {top, left} - assume right/bottom=0", function () {
 
     var layout = { top: 0.1, left: 0.1 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 20, y: 20, width: 180, height: 180 } ;
-    var s = { bottom: 0, right: 0, top: '10%', left: '10%' } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 20, y: 20, width: 180, height: 180 };
+    var s = { bottom: 0, right: 0, top: '10%', left: '10%' };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {height, width} - assume top/left=0", function() {
+  test("layout {height, width} - assume top/left=0", function () {
 
     var layout = { height: 0.6, width: 0.6 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 0, y: 0, width: 120, height: 120 } ;
-    var s = { width: '60%', height: '60%', top: 0, left: 0 } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 0, y: 0, width: 120, height: 120 };
+    var s = { width: '60%', height: '60%', top: 0, left: 0 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
 
-  }) ;
+  });
 
-  test("layout {right, bottom} - assume top/left=0", function() {
+  test("layout {right, bottom} - assume top/left=0", function () {
 
     var layout = { right: 0.1, bottom: 0.1 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 0, y: 0, width: 180, height: 180 } ;
-    var s = { bottom: '10%', right: '10%', top: 0, left: 0 } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 0, y: 0, width: 180, height: 180 };
+    var s = { bottom: '10%', right: '10%', top: 0, left: 0 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
 
-  }) ;
+  });
 
-  test("layout {right, bottom, maxWidth, maxHeight} - assume top/left=null", function() {
+  test("layout {right, bottom, maxWidth, maxHeight} - assume top/left=null", function () {
 
     var layout = { right: 0.1, bottom: 0.1, maxWidth: 10, maxHeight: 10 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 0, y: 0, width: 10, height: 10 } ;
-    var s = { bottom: '10%', right: '10%', top: null, left: null, maxWidth: 10, maxHeight: 10 } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 0, y: 0, width: 10, height: 10 };
+    var s = { bottom: '10%', right: '10%', top: null, left: null, maxWidth: 10, maxHeight: 10 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
 
-  }) ;
+  });
 
-  test("layout {centerX, centerY} - assume width/height=0", function() {
+  test("layout {centerX, centerY} - assume width/height=0", function () {
 
     var layout = { centerX: 0.1, centerY: 0.1 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 120, y: 120, width: 0, height: 0 } ;
-    var s = { width: 0, height: 0, top: "50%", left: "50%", marginTop: "50%", marginLeft: "50%" } ;
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 120, y: 120, width: 0, height: 0 };
+    var s = { width: 0, height: 0, top: "50%", left: "50%", marginTop: "50%", marginLeft: "50%" };
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
 
-  }) ;
+  });
 
-  test("layout {top, left, centerX, centerY, height, width} - top/left take presidence", function() {
+  test("layout {top, left, centerX, centerY, height, width} - top/left take presidence", function () {
 
     var layout = { top: 0.1, left: 0.1, centerX: 0.1, centerY: 0.1, height: 0.6, width: 0.6 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 20, y: 20, width: 120, height: 120 } ;
-    var s = { width: '60%', height: '60%', top: '10%', left: '10%' } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 20, y: 20, width: 120, height: 120 };
+    var s = { width: '60%', height: '60%', top: '10%', left: '10%' };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
 
-  }) ;
+  });
 
-  test("layout {bottom, right, centerX, centerY, height, width} - bottom/right take presidence", function() {
+  test("layout {bottom, right, centerX, centerY, height, width} - bottom/right take presidence", function () {
 
     var layout = { bottom: 0.1, right: 0.1, centerX: 0.1, centerY: 0.1, height: 0.6, width: 0.6 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 60, y: 60, width: 120, height: 120 } ;
-    var s = { width: '60%', height: '60%', bottom: '10%', right: '10%' } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 60, y: 60, width: 120, height: 120 };
+    var s = { width: '60%', height: '60%', bottom: '10%', right: '10%' };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
 
-  }) ;
+  });
 
-  test("layout {top, left, bottom, right, centerX, centerY, height, width} - top/left take presidence", function() {
+  test("layout {top, left, bottom, right, centerX, centerY, height, width} - top/left take presidence", function () {
 
     var layout = { top: 0.1, left: 0.1, bottom: 0.1, right: 0.1, centerX: 0.1, centerY: 0.1, height: 0.6, width: 0.6 };
-    var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
-    var with_f = { x: 20, y: 20, width: 120, height: 120 } ;
-    var s = { width: '60%', height: '60%', top: '10%', left: '10%' } ;
+    var no_f = { x: 0, y: 0, width: 0, height: 0 };
+    var with_f = { x: 20, y: 20, width: 120, height: 120 };
+    var s = { width: '60%', height: '60%', top: '10%', left: '10%' };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
 
-  }) ;
+  });
 
 
-  test("layout {centerX, centerY, width:auto, height:auto}", function() {
-    var error= 'NONE';
+  test("layout {centerX, centerY, width:auto, height:auto}", function () {
+    var error = 'NONE';
     var layout = { centerX: 0.1, centerY: 0.1, width: 'auto', height: 'auto' };
 
-    child.set('layout', layout) ;
-    try{
+    SC.run(function () {
+      child.set('layout', layout);
+    });
+
+    try {
       child.layoutStyle();
-    }catch(e){
-      error=e;
+    } catch (e) {
+      error = e;
     }
 
-    equals(SC.T_ERROR, SC.typeOf(error), 'Layout style functions should throw an '+
-                                           'error if centerx/y and width/height are set at the same time ' + error );
-
-  }) ;
+    equals(SC.T_ERROR, SC.typeOf(error), 'Layout style functions should throw an ' +
+                                           'error if centerx/y and width/height are set at the same time ' + error);
+  });
 
 
   // ..........................................................
@@ -564,72 +637,75 @@
 
   module('BORDER LAYOUT VARIATIONS', commonSetup);
 
-  test("layout {top, left, width, height, border}", function() {
+  test("layout {top, left, width, height, border}", function () {
     var layout = { top: 10, left: 10, width: 50, height: 50, border: 2 };
     var s = { top: 10, left: 10, width: 46, height: 46,
-              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
-    var no_f = { x: 12, y: 12, width: 46, height: 46 } ;
-    var with_f = { x: 12, y: 12, width: 46, height: 46 } ;
+              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 };
+    var no_f = { x: 12, y: 12, width: 46, height: 46 };
+    var with_f = { x: 12, y: 12, width: 46, height: 46 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, YES) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, YES);
+  });
 
-  test("layout {top, left, bottom, right, border}", function() {
+  test("layout {top, left, bottom, right, border}", function () {
     var layout = { top: 10, left: 10, bottom: 10, right: 10, border: 2 };
-    var no_f = { x: 12, y: 12, width: 0, height: 0 } ;
-    var with_f = { x: 12, y: 12, width: 176, height: 176 } ;
+    var no_f = { x: 12, y: 12, width: 0, height: 0 };
+    var with_f = { x: 12, y: 12, width: 176, height: 176 };
     var s = { top: 10, left: 10, bottom: 10, right: 10,
-               borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
+               borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {top, left, bottom, right, borderTop, borderLeft, borderRight, borderBottom}", function() {
+  test("layout {top, left, bottom, right, borderTop, borderLeft, borderRight, borderBottom}", function () {
     var layout = { top: 10, left: 10, bottom: 10, right: 10, borderTop: 1, borderRight: 2, borderBottom: 3, borderLeft: 4 };
-    var no_f = { x: 14, y: 11, width: 0, height: 0 } ;
-    var with_f = { x: 14, y: 11, width: 174, height: 176 } ;
+    var no_f = { x: 14, y: 11, width: 0, height: 0 };
+    var with_f = { x: 14, y: 11, width: 174, height: 176 };
     var s = { top: 10, left: 10, bottom: 10, right: 10,
-               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 3, borderLeftWidth: 4 } ;
+               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 3, borderLeftWidth: 4 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {top, left, bottom, right, border, borderTop, borderLeft}", function() {
+  test("layout {top, left, bottom, right, border, borderTop, borderLeft}", function () {
     var layout = { top: 10, left: 10, bottom: 10, right: 10, border: 5, borderTop: 1, borderRight: 2 };
-    var no_f = { x: 15, y: 11, width: 0, height: 0 } ;
-    var with_f = { x: 15, y: 11, width: 173, height: 174 } ;
+    var no_f = { x: 15, y: 11, width: 0, height: 0 };
+    var with_f = { x: 15, y: 11, width: 173, height: 174 };
     var s = { top: 10, left: 10, bottom: 10, right: 10,
-               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 5, borderLeftWidth: 5 } ;
+               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 5, borderLeftWidth: 5 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {bottom, right, width, height, border}", function() {
+  test("layout {bottom, right, width, height, border}", function () {
 
     var layout = { bottom: 10, right: 10, width: 50, height: 50, border: 2 };
-    var no_f = { x: 2, y: 2, width: 46, height: 46 } ;
-    var with_f = { x: 142, y: 142, width: 46, height: 46 } ;
+    var no_f = { x: 2, y: 2, width: 46, height: 46 };
+    var with_f = { x: 142, y: 142, width: 46, height: 46 };
     var s = { bottom: 10, right: 10, width: 46, height: 46,
-              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
+              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
 
-  test("layout {centerX, centerY, width, height, border}", function() {
+  test("layout {centerX, centerY, width, height, border}", function () {
 
     var layout = { centerX: 10, centerY: 10, width: 60, height: 60, border: 2 };
-    var no_f = { x: 12, y: 12, width: 56, height: 56 } ;
-    var with_f = { x: 82, y: 82, width: 56, height: 56 } ;
-    var s = { marginLeft: -18, marginTop: -18, width: 56, height: 56, top: "50%", left: "50%",
-              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
+    var no_f = { x: 12, y: 12, width: 56, height: 56 };
+    var with_f = { x: 82, y: 82, width: 56, height: 56 };
+    var s = { marginLeft: -20, marginTop: -20, width: 56, height: 56, top: "50%", left: "50%",
+              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 };
 
-    performLayoutTest(layout, no_f, s, with_f, s, NO) ;
-  }) ;
+    performLayoutTest(layout, no_f, s, with_f, s, NO);
+  });
+
+  test("layout {top, left, width: auto, height: auto}", function () {
+    // Reset.
+    child.destroy();
 
-  test("layout {top, left, width: auto, height: auto}", function() {
     child = SC.View.create({
       useStaticLayout: YES,
-      render: function(context) {
+      render: function (context) {
         // needed for auto
         context.push('<div style="padding: 10px"></div>');
       }
@@ -642,13 +718,15 @@
 
     var layout = { top: 0, left: 0, width: 'auto', height: 'auto', border: 2 };
     var no_f = null;
-    var with_f = undefined; //{ x: 2, y: 2, width: 196, height: 196 };
+    var with_f; //{ x: 2, y: 2, width: 196, height: 196 };
     var s = { top: 0, left: 0, width: 'auto', height: 'auto',
               borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 };
 
     performLayoutTest(layout, no_f, s, with_f, s, NO);
 
     layer.parentNode.removeChild(layer);
+
+    child.destroy();
   });
 
 
@@ -660,37 +738,37 @@
 
   function verifyFrameResize(layout, before, after) {
     parent.appendChild(child);
-    SC.run(function() { child.set('layout', layout); });
+    SC.run(function () { child.set('layout', layout); });
 
-    same(child.get('frame'), before, "Before: %@ == %@".fmt(SC.inspect(child.get('frame')), SC.inspect(before))) ;
-    SC.run(function() { parent.adjust('width', 300).adjust('height', 300); });
+    same(child.get('frame'), before, "Before: %@ == %@".fmt(SC.inspect(child.get('frame')), SC.inspect(before)));
+    SC.run(function () { parent.adjust('width', 300).adjust('height', 300); });
 
     same(child.get('frame'), after, "After: %@ == %@".fmt(SC.inspect(child.get('frame')), SC.inspect(after)));
 
   }
 
-  test("frame does not change with top/left/w/h", function(){
+  test("frame does not change with top/left/w/h", function () {
     var layout = { top: 10, left: 10, width: 60, height: 60 };
     var before = { x: 10, y: 10, width: 60, height: 60 };
     var after =  { x: 10, y: 10, width: 60, height: 60 };
     verifyFrameResize(layout, before, after);
   });
 
-  test("frame shifts down with bottom/right/w/h", function(){
+  test("frame shifts down with bottom/right/w/h", function () {
     var layout = { bottom: 10, right: 10, width: 60, height: 60 };
     var before = { x: 130, y: 130, width: 60, height: 60 };
     var after =  { x: 230, y: 230, width: 60, height: 60 };
     verifyFrameResize(layout, before, after);
   });
 
-  test("frame size shifts with top/left/bottom/right", function(){
+  test("frame size shifts with top/left/bottom/right", function () {
     var layout = { top: 10, left: 10, bottom: 10, right: 10 };
     var before = { x: 10, y: 10, width: 180, height: 180 };
     var after =  { x: 10, y: 10, width: 280, height: 280 };
     verifyFrameResize(layout, before, after);
   });
 
-  test("frame loc shifts with centerX/centerY", function(){
+  test("frame loc shifts with centerX/centerY", function () {
     var layout = { centerX: 10, centerY: 10, width: 60, height: 60 };
     var before = { x: 80, y: 80, width: 60, height: 60 };
     var after =  { x: 130, y: 130, width: 60, height: 60 };
@@ -699,28 +777,28 @@
 
   //with percentage
 
-  test("frame does not change with top/left/w/h - percentage", function(){
+  test("frame does not change with top/left/w/h - percentage", function () {
     var layout = { top: 0.1, left: 0.1, width: 0.6, height: 0.6 };
     var before = { x: 20, width: 120, y: 20, height: 120 };
     var after =  { x: 30, y: 30, width: 180, height: 180 };
     verifyFrameResize(layout, before, after);
   });
 
-  test("frame shifts down with bottom/right/w/h - percentage", function(){
+  test("frame shifts down with bottom/right/w/h - percentage", function () {
     var layout = { bottom: 0.1, right: 0.1, width: 0.6, height: 0.6 };
     var before = { x: 60, y: 60, width: 120, height: 120 };
     var after =  { x: 90, y: 90, width: 180, height: 180 };
     verifyFrameResize(layout, before, after);
   });
 
-  test("frame size shifts with top/left/bottom/right - percentage", function(){
+  test("frame size shifts with top/left/bottom/right - percentage", function () {
     var layout = { top: 0.1, left: 0.1, bottom: 0.1, right: 0.1 };
     var before = { x: 20, y: 20, width: 160, height: 160 };
     var after =  { x: 30, y: 30, width: 240, height: 240 };
     verifyFrameResize(layout, before, after);
   });
 
-  test("frame loc shifts with centerX/centerY - percentage", function(){
+  test("frame loc shifts with centerX/centerY - percentage", function () {
     var layout = { centerX: 0, centerY: 0, width: 0.6, height: 0.6 };
     var before = { x: 40, y: 40, width: 120, height: 120 };
     var after =  { x: 60, y: 60, width: 180, height: 180 };
@@ -732,7 +810,7 @@
 
   module('STATIC LAYOUT VARIATIONS', commonSetup);
 
-  test("no layout", function() {
+  test("no layout", function () {
 
     var no_f = null,
         no_s = {},
@@ -744,7 +822,7 @@
     performLayoutTest(SC.View.prototype.layout, no_f, no_s, with_f, with_s, NO);
   });
 
-  test("with layout", function() {
+  test("with layout", function () {
 
     var layout = { top: 10, left: 10, width: 50, height: 50 },
         no_f = null,
@@ -757,7 +835,7 @@
     performLayoutTest(layout, no_f, no_s, with_f, with_s, YES);
   });
 
-  // test("frame size shifts with top/left/bottom/right", function(){
+  // test("frame size shifts with top/left/bottom/right", function () {
   //   var error=null;
   //   var layout = { top: 10, left: 10, bottom: 10, right: 10 };
   //   parent.appendChild(child);
@@ -766,7 +844,7 @@
   //   parent.adjust('width', 'auto').adjust('height', 'auto');
   //   try{
   //     child.get('frame');
-  //   }catch(e){
+  //   }catch(e) {
   //     error=e;
   //   }
   //   equals(SC.T_ERROR,SC.typeOf(error),'Layout style functions should throw and '+
@@ -774,4 +852,124 @@
   //
   //
   // });
+
+  var pane, view;
+  module("COMPUTED LAYOUT", {
+    setup: function () {
+
+      SC.run(function () {
+        // create basic view
+        view = SC.View.create({
+          useTopLayout: YES,
+
+          layout: function () {
+            if (this.get('useTopLayout')) {
+              return { top: 10, left: 10, width: 100, height: 100 };
+            } else {
+              return { bottom: 10, right: 10, width: 200, height: 50 };
+            }
+          }.property('useTopLayout').cacheable()
+        });
+
+        pane = SC.Pane.create({
+          layout: { centerX: 0, centerY: 0, width: 400, height: 400 },
+          childViews: [view]
+        }).append();
+      });
+    },
+
+    teardown: function () {
+      pane.destroy();
+      pane = view = null;
+    }
+  });
+
+  /**
+    There was a regression while moving to jQuery 1.8 and removing the seemingly
+    unuseful buffered jQuery code, where updating the style failed to clear the
+    old style from the view's style attribute.
+  */
+  test("with computed layout", function () {
+    var expectedLayoutStyle,
+      expectedStyleAttr,
+      layoutStyle,
+      styleAttr;
+
+    same(view.get('layout'), { top: 10, left: 10, width: 100, height: 100 }, "Test the value of the computed layout.");
+    layoutStyle = view.get('layoutStyle');
+    expectedLayoutStyle = { top: "10px", left: "10px", width: "100px", height: "100px" };
+    for (var key in layoutStyle) {
+      equals(layoutStyle[key], expectedLayoutStyle[key], "Test the value of %@ in the layout style.".fmt(key));
+    }
+    styleAttr = view.$().attr('style');
+    styleAttr = styleAttr.split(/;\s*/).filter(function (o) { return o; });
+    expectedStyleAttr = ['left: 10px', 'width: 100px', 'top: 10px', 'height: 100px'];
+    for (var i = styleAttr.length - 1; i >= 0; i--) {
+      ok(expectedStyleAttr.indexOf(styleAttr[i]) >= 0, "Test the expected style attribute includes `%@` found in the actual style attribute.".fmt(styleAttr[i]));
+    }
+
+    SC.run(function () {
+      view.set('useTopLayout', NO);
+    });
+
+    same(view.get('layout'), { bottom: 10, right: 10, width: 200, height: 50 }, "Test the value of the computed layout.");
+    layoutStyle = view.get('layoutStyle');
+    expectedLayoutStyle = { bottom: "10px", right: "10px", width: "200px", height: "50px" };
+    for (var key in layoutStyle) {
+      equals(layoutStyle[key], expectedLayoutStyle[key], "Test the value of %@ in the layout style.".fmt(key));
+    }
+
+    styleAttr = view.$().attr('style');
+    styleAttr = styleAttr.split(/;\s*/).filter(function (o) { return o; });
+    expectedStyleAttr = ['bottom: 10px', 'width: 200px', 'right: 10px', 'height: 50px'];
+    for (i = styleAttr.length - 1; i >= 0; i--) {
+      ok(expectedStyleAttr.indexOf(styleAttr[i]) >= 0, "Test the expected style attribute includes `%@` found in the actual style attribute.".fmt(styleAttr[i]));
+    }
+  });
+
+
+  module("OTHER LAYOUT STYLE TESTS", {
+    setup: function () {
+
+      SC.run(function () {
+        // create basic view
+        view = SC.View.create({});
+
+        pane = SC.Pane.create({
+          layout: { centerX: 0, centerY: 0, width: 400, height: 400 },
+          childViews: [view]
+        }).append();
+      });
+    },
+
+    teardown: function () {
+      pane.destroy();
+      pane = view = null;
+    }
+  });
+
+
+
+  /*
+    There was a regression where switching from a centered layout to a non-centered
+    layout failed to remove the margin style.
+  */
+  test("Switching from centered to non-centered layouts.", function () {
+    var styleAttr;
+
+    SC.run(function () {
+      view.set('layout', { centerX: 10, centerY: 10, width: 60, height: 60 });
+    });
+
+    SC.run(function () {
+      view.set('layout', { left: 10, top: 10, width: 60, height: 60 });
+    });
+
+    styleAttr = view.$().attr('style');
+    styleAttr = styleAttr.split(/;\s*/).filter(function (o) { return o; });
+    var expectedStyleAttr = ['left: 10px', 'top: 10px', 'width: 60px', 'height: 60px'];
+    for (var i = styleAttr.length - 1; i >= 0; i--) {
+      ok(expectedStyleAttr.indexOf(styleAttr[i]) >= 0, "Test the expected style attribute includes `%@` found in the actual style attribute.".fmt(styleAttr[i]));
+    }
+  });
 })();