sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/build.js

@@ -0,0 +1,85 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global module test equals context ok same */
+
+var buildableView, parent;
+module('SC.Buildable', {
+  setup: function() {
+    parent = SC.View.create();
+    buildableView = SC.View.create({
+      buildIn: function() {
+        this.called_any = YES;
+        this.called_buildIn = YES;
+      },
+      
+      resetBuild: function() {
+        this.called_any = YES;
+        this.called_resetBuild = YES;
+      },
+      
+      buildOut: function() {
+        this.called_any = YES;
+        this.called_buildOut = YES;
+      },
+      
+      buildOutDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildOutDidCancel = YES;
+      },
+      
+      buildInDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildInDidCancel = YES;
+      }
+    });
+  },
+  
+  teardown: function() {
+  }
+});
+
+test("resetBuildState calls resetBuild", function(){
+  ok(!buildableView.called_any, "Nothing should have happened yet.");
+  buildableView.resetBuildState();
+  ok(buildableView.called_resetBuild, "reset should have been called");
+});
+
+test("changing parent view calls resetBuild", function() {
+  ok(!buildableView.called_any, "Nothing should have happened yet.");
+  parent.appendChild(buildableView);
+  ok(buildableView.called_resetBuild, "reset should have been called");
+});
+
+test("buildInToView starts build in", function() {
+  buildableView.willBuildInToView(parent);
+  ok(!buildableView.isBuildingIn, "Should not be building in yet.");
+  buildableView.buildInToView(parent);
+  ok(buildableView.isBuildingIn, "Should now be building in.");
+  ok(buildableView.called_buildIn, "Build in should have been called.");
+});
+
+test("buildOutFromView starts build out", function() {
+  buildableView.willBuildInToView(parent);
+  buildableView.buildInToView(parent);
+  buildableView.buildInDidFinish(); // hack this in here, because our implementations above purposefully don't.
+  
+  ok(!buildableView.isBuildingOut, "Should not yet be building out.");
+  buildableView.buildOutFromView(parent);
+  ok(buildableView.isBuildingOut, "View should now be building out.");
+});
+
+test("resetBuildState cancels buildOut", function() {
+  buildableView.willBuildInToView(parent);
+  buildableView.buildInToView(parent);
+  buildableView.buildInDidFinish(); // hack this in here, because our implementations above purposefully don't.
+
+  buildableView.buildOutFromView(parent);
+  ok(buildableView.isBuildingOut, "View should now be building out.");
+  
+  buildableView.resetBuildState(parent);
+  ok(!buildableView.isBuildingOut, "View should no longer be building out.");
+  ok(buildableView.called_buildOutDidCancel, "Cancel ought to have been called.");
+});

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/build_children.js

@@ -0,0 +1,89 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global module test equals context ok same */
+
+var buildableView, parent;
+module('SC.Buildable', {
+  setup: function() {
+    parent = SC.View.create({
+      buildInDidFinishFor: function() {
+        sc_super();
+        this.called_buildInDidFinishFor = YES;
+      },
+      buildOutDidFinishFor: function() {
+        sc_super();
+        this.called_buildOutDidFinishFor = YES;
+      }
+    });
+    buildableView = SC.View.create({
+      buildIn: function() {
+        this.called_any = YES;
+        this.called_buildIn = YES;
+      },
+      
+      resetBuild: function() {
+        this.called_any = YES;
+        this.called_resetBuild = YES;
+      },
+      
+      buildOut: function() {
+        this.called_any = YES;
+        this.called_buildOut = YES;
+      },
+      
+      buildOutDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildOutDidCancel = YES;
+      },
+      
+      buildInDidCancel: function() {
+        this.called_any = YES;
+        this.called_buildInDidCancel = YES;
+      }
+    });
+  },
+  
+  teardown: function() {
+  }
+});
+
+test("Calling buildInChild adds child and builds it in.", function(){
+  var v = buildableView, p = parent;
+  p.buildInChild(v);
+  
+  // check right after build in is called
+  ok(v.called_buildIn, "child started build in.");
+  ok(v.isBuildingIn, "child is building in.");
+  ok(!p.called_buildInDidFinsihFor, "child has not finished building in, according to parent.");
+  
+  // the parent view should be set already
+  equals(v.get("parentView"), p, "Parent view should be the parent");
+  
+  // finish build in
+  v.buildInDidFinish();
+  
+  // now check that the view registered that finish
+  ok(p.called_buildInDidFinishFor, "child has finished building in, according to parent.");
+});
+
+
+test("Calling buildOutChild builds out the child, and only removes it when done.", function() {
+  var v = buildableView, p = parent;
+  p.buildInChild(v);
+  v.buildInDidFinish();
+  
+  p.buildOutChild(v);
+  ok(v.called_buildOut, "child started build out.");
+  ok(v.isBuildingOut, "child is building out.");
+  ok(!p.called_buildOutDidFinishFor, "child has not finished building out, according to parent.");
+  equals(v.get("parentView"), p, "Parent view should still be the former parent");
+  
+  // finish build out
+  v.buildOutDidFinish();
+  
+  ok(p.called_buildOutDidFinishFor, "child has finished building out, according to parent.");
+  equals(v.get("parentView"), null, "Parent view is now null");
+});

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/clippingFrame.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same Q$ htmlbody */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/convertFrames.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same Q$ htmlbody */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/createChildViews.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/createLayer.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same Q$ */
@@ -16,11 +16,11 @@ test("returns the receiver", function() {
   equals(v.createLayer(), v, 'returns receiver');
 });
 
-test("calls prepareContext() and sets layer to resulting element", function() {
+test("calls renderToContext() and sets layer to resulting element", function() {
   var v= SC.View.create({
     tagName: 'span',
     
-    prepareContext: function(context, firstTime) {
+    renderToContext: function(context, firstTime) {
       context.push("foo");
     }
   });

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/destroyLayer.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same Q$ */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/didAppendToDocument.js

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            portions copyright @2009 Apple Inc.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test htmlbody ok equals same stop start Q$ */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/findLayerInParentLayer.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/init.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/insertBefore.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layer.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same precondition */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layoutChildViews.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
-// Copyright: �2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// Copyright: ©2006-2009 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layoutDidChange.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
-// Copyright: �2006-2009 Apple Inc. and contributors.
-// License:   Licened under MIT license (see license.js)
+// Copyright: ©2006-2009 Apple Inc. and contributors.
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /*global module test equals context ok same */

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layoutStyle.js

@@ -27,6 +27,8 @@ function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
   
   // make sure we add null properties and convert numbers to 'XXpx' to style layout.
   var keys = 'width height top bottom marginLeft marginTop left right zIndex minWidth maxWidth minHeight maxHeight'.w();
+  if (SC.platform.supportsCSSTransforms) keys.push('transform');
+
   keys.forEach(function(key) {
     if (no_s[key]===undefined) no_s[key] = null;
     if (with_s[key]===undefined) with_s[key] = null;  
@@ -38,9 +40,14 @@ function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
   // set layout
   child.set('layout', layout) ;
 
+  console.log(child.get('layoutStyle'));
+
+  var testKey;
+
   // test
   keys.forEach(function(key) {
-    equals(child.get('layoutStyle')[key], no_s[key], "STYLE NO PARENT %@".fmt(key)) ;  
+    testKey = key === 'transform' ? SC.platform.domCSSPrefix+'Transform' : key;
+    equals(child.get('layoutStyle')[testKey], no_s[key], "STYLE NO PARENT %@".fmt(key)) ;  
   });
   
   // add parent
@@ -50,7 +57,8 @@ function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
   
   // test again
   keys.forEach(function(key) {
-    equals(child.get('layoutStyle')[key], with_s[key], "STYLE NO PARENT %@".fmt(key)) ;  
+    testKey = key === 'transform' ? SC.platform.domCSSPrefix+'Transform' : key;
+    equals(child.get('layoutStyle')[testKey], with_s[key], "STYLE W/ PARENT %@".fmt(key)) ;  
   });
 }
 
@@ -160,6 +168,221 @@ test("layout {top, left, width: auto, height: auto}", function() {
   layer.parentNode.removeChild(layer);
 });
 
+
+// ..........................................................
+// TEST FRAME/STYLEFRAME WITH BASIC LAYOUT VARIATIONS
+// 
+// NOTE:  Each test evaluates the frame before and after adding it to the 
+// parent.
+
+module('BASIC LAYOUT VARIATIONS PERCENTAGE', commonSetup);
+
+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 = { top: '10%', left: '10%', width: '50%', height: '50%' } ;
+  var with_f = { top: '10%', left: '10%', width: '50%', height: '50%' } ;
+
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+}) ;
+
+test("layout {top, left, bottom, right}", function() {
+
+  var layout = { top: 0.1, left: 0.1, bottom: 0.1, right: 0.1 };
+  var no_f = { top: '10%', left: '10%', bottom: '10%', right: '10%' };
+  var with_f =  { 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) ;
+}) ;
+
+test("layout {bottom, right, width, height}", function() {
+
+  var layout = { bottom: 0.1, right: 0.1, width: 0.5, height: 0.5 };
+  var no_f = { bottom: '10%', right: '10%', width: '50%', height: '50%' };
+  var with_f = { 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) ;
+}) ;
+
+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: 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) ;
+}) ;
+
+test("layout {top, left, width: auto, height: auto}", function() {
+  child = SC.View.create({
+    useStaticLayout: YES,
+    render: function(context) {
+      // needed for auto
+      context.push('<div style="padding: 10px"></div>');
+    }
+  });
+
+  // parent MUST have a layer.
+  parent.createLayer();
+  var layer = parent.get('layer');
+  document.body.appendChild(layer);
+  
+  var layout = { top: 0.1, left: 0.1, width: 'auto', height: 'auto' };
+  var no_f = { x: 0, y: 0, width: 0, height: 0 };
+  var with_f = { x: 0, y: 0, width: 20, height: 20 };
+  var s = { top: '10%', left: '10%', width: 'auto', height: 'auto' };
+  
+  performLayoutTest(layout, no_f, s, with_f, s);
+  
+  layer.parentNode.removeChild(layer);
+});
+
+
+
+// ..........................................................
+// TEST CSS TRANSFORM LAYOUT VARIATIONS
+// 
+// NOTE:  Each test evaluates the frame before and after adding it to the 
+// parent.
+
+module('CSS TRANSFORM LAYOUT VARIATIONS', {
+  setup: function(){
+    commonSetup.setup();
+    child.createLayer();
+    document.body.appendChild(child.get('layer'));
+  },
+
+  teardown: commonSetup.teardown
+});
+
+function transformFor(view){
+  return view.get('layer').style[SC.platform.domCSSPrefix+'Transform'];
+}
+
+test("layout {rotate}", function() {
+  child.adjust('rotate', 45).updateLayout();
+  equals(transformFor(child), 'rotate(45deg)', 'transform attribute should be "rotate(45deg)"')
+});
+
+test("layout {rotate} with units", function() {
+  child.adjust('rotate', '1rad').updateLayout();
+  equals(transformFor(child), 'rotate(1rad)', 'transform attribute should be "rotate(1rad)"')
+});
+
+test("layout {scale}", function() {
+  child.adjust('scale', 2).updateLayout();
+  equals(transformFor(child), 'scale(2)', 'transform attribute should be "scale(2)"')
+});
+
+test("layout {scale} with multiple", function() {
+  child.adjust('scale', [2, 3]).updateLayout();
+  equals(transformFor(child), 'scale(2, 3)', 'transform attribute should be "scale(2, 3)"')
+});
+
+test("layout {rotate, scale}", function() {
+  child.adjust({ rotate: 45, scale: 2 }).updateLayout();
+  equals(transformFor(child), 'rotate(45deg) scale(2)', 'transform attribute should be "rotate(45deg) scale(2)"')
+});
+
+test("layout {rotate} update", function() {
+  child.adjust('rotate', 45).updateLayout();
+  child.adjust('rotate', 90).updateLayout();
+  equals(transformFor(child), 'rotate(90deg)', 'transform attribute should be "rotate(90deg)"')
+});
+
+
+if (SC.platform.supportsCSSTransforms) {
+
+  // ..........................................................
+  // TEST FRAME/STYLEFRAME WITH ACCELERATE LAYOUT VARIATIONS
+  // 
+  // NOTE:  Each test evaluates the frame before and after adding it to the 
+  // parent.
+
+  module('ACCELERATED LAYOUT VARIATIONS', {
+    setup: function(){
+      commonSetup.setup();
+      // Force support
+      child.hasAcceleratedLayer = YES;
+    },
+
+    teardown: commonSetup.teardown
+  });
+
+  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: 0, y: 0, width: 50, height: 50, transform: expectedTransform } ;
+    var with_f = { x: 0, y: 0, width: 50, height: 50, transform: expectedTransform } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, bottom, right}", function() {
+
+    var layout = { top: 10, left: 10, bottom: 10, right: 10 };
+    var expectedTransform = 'translateX(0px) translateY(0px)';
+    if (SC.platform.supportsCSS3DTransforms) expectedTransform += ' translateZ(0px)';
+    var no_f = { x: 10, y: 10, width: 0, height: 0, transform: expectedTransform } ;
+    var with_f = { x: 10, y: 10, width: 180, height: 180, transform: expectedTransform } ;
+    var s = { top: 10, left: 10, bottom: 10, right: 10, transform: expectedTransform } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  test("layout {top, left, width: auto, height: auto}", function() {
+    child = SC.View.create({
+      hasAcceleratedLayer: YES, // Force this
+      useStaticLayout: YES,
+      render: function(context) {
+        // needed for auto
+        context.push('<div style="padding: 10px"></div>');
+      }
+    });
+
+    // parent MUST have a layer.
+    parent.createLayer();
+    var layer = parent.get('layer');
+    document.body.appendChild(layer);
+  
+    var layout = { top: 0, left: 0, width: 'auto', height: 'auto' };
+    var expectedTransform = 'translateX(0px) translateY(0px)';
+    if (SC.platform.supportsCSS3DTransforms) expectedTransform += ' translateZ(0px)';
+    var no_f = { x: 0, y: 0, width: 0, height: 0, transform: expectedTransform };
+    var with_f = { x: 0, y: 0, width: 20, height: 20, transform: expectedTransform };
+    var s = { top: 0, left: 0, width: 'auto', height: 'auto', transform: expectedTransform };
+  
+    performLayoutTest(layout, no_f, s, with_f, s);
+  
+    layer.parentNode.removeChild(layer);
+  });
+
+  test("layout w/ percentage {top, left, width, height}", function() {
+
+    var layout = { top: 0.1, left: 0.1, width: 0.5, height: 0.5 };
+    var expectedTransform = 'translateX(0px) translateY(0px)';
+    if (SC.platform.supportsCSS3DTransforms) expectedTransform += ' translateZ(0px)';
+    var s = { top: '10%', left: '10%', width: '50%', height: '50%', transform: expectedTransform } ;
+    var no_f = { top: '10%', left: '10%', width: '50%', height: '50%', transform: expectedTransform } ;
+    var with_f = { top: '10%', left: '10%', width: '50%', height: '50%', transform: expectedTransform } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+}
+
+
+
+
+
+
+
 // ..........................................................
 // TEST FRAME/STYLEFRAME WITH INVALID LAYOUT VARIATIONS
 // 
@@ -170,20 +393,20 @@ module('INVALID LAYOUT VARIATIONS', commonSetup);
 
 test("layout {top, left} - assume right/bottom=0", function() {
   
-  var layout = { top: 10, left: 10 };
+  var layout = { top: 0.1, left: 0.1 };
   var no_f = { x: 10, y: 10, width: 0, height: 0 } ;
   var with_f = { x: 10, y: 10, width: 190, height: 190 } ;
-  var s = { bottom: 0, right: 0, top: 10, left: 10 } ;
+  var s = { bottom: 0, right: 0, top: '10%', left: '10%' } ;
 
   performLayoutTest(layout, no_f, s, with_f, s) ;
 }) ;
 
 test("layout {height, width} - assume top/left=0", function() {
 
-  var layout = { height: 60, width: 60 };
+  var layout = { height: 0.6, width: 0.6 };
   var no_f = { x: 0, y: 0, width: 60, height: 60 } ;
   var with_f = { x: 0, y: 0, width: 60, height: 60 } ;
-  var s = { width: 60, height: 60, top: 0, left: 0 } ;
+  var s = { width: '60%', height: '60%', top: 0, left: 0 } ;
   
   performLayoutTest(layout, no_f, s, with_f, s) ;
   
@@ -191,32 +414,42 @@ test("layout {height, width} - assume top/left=0", function() {
 
 test("layout {right, bottom} - assume top/left=0", function() {
 
-  var layout = { right: 10, bottom: 10 };
+  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: 190, height: 190 } ;
-  var s = { bottom: 10, right: 10, top: 0, left: 0 } ;
+  var s = { bottom: '10%', right: '10%', top: 0, left: 0 } ;
   
   performLayoutTest(layout, no_f, s, with_f, s) ;
   
 }) ;
 
+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: 190, height: 190 } ;
+  var s = { bottom: '10%', right: '10%', top: null, left: null, maxWidth: 10, maxHeight: 10 } ;
+
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+
+}) ;
+
 test("layout {centerX, centerY} - assume width/height=0", function() {
 
-  var layout = { centerX: 10, centerY: 10 };
+  var layout = { centerX: 0.1, centerY: 0.1 };
   var no_f = { x: 10, y: 10, width: 0, height: 0 } ;
   var with_f = { x: 110, y: 110, width: 0, height: 0 } ;
-  var s = { width: 0, height: 0, top: "50%", left: "50%", marginTop: 10, marginLeft: 10 } ;
-  
+  var s = { width: 0, height: 0, top: "50%", left: "50%", marginTop: "50%", marginLeft: "50%" } ;
   performLayoutTest(layout, no_f, s, with_f, s) ;
   
 }) ;
 
 test("layout {top, left, centerX, centerY, height, width} - top/left take presidence", function() {
 
-  var layout = { top: 10, left: 10, centerX: 10, centerY: 10, height: 60, width: 60 };
+  var layout = { top: 0.1, left: 0.1, centerX: 0.1, centerY: 0.1, height: 0.6, width: 0.6 };
   var no_f = { x: 10, y: 10, width: 60, height: 60 } ;
   var with_f = { x: 10, y: 10, width: 60, height: 60 } ;
-  var s = { width: 60, height: 60, top: 10, left: 10 } ;
+  var s = { width: '60%', height: '60%', top: '10%', left: '10%' } ;
   
   performLayoutTest(layout, no_f, s, with_f, s) ;
   
@@ -224,21 +457,21 @@ test("layout {top, left, centerX, centerY, height, width} - top/left take presid
 
 test("layout {bottom, right, centerX, centerY, height, width} - bottom/right take presidence", function() {
 
-  var layout = { bottom: 10, right: 10, centerX: 10, centerY: 10, height: 60, width: 60 };
+  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: 60, height: 60 } ;
   var with_f = { x: 130, y: 130, width: 60, height: 60 } ;
-  var s = { width: 60, height: 60, bottom: 10, right: 10 } ;
-  
+  var s = { width: '60%', height: '60%', bottom: '10%', right: '10%' } ;
+
   performLayoutTest(layout, no_f, s, with_f, s) ;
   
 }) ;
 
 test("layout {top, left, bottom, right, centerX, centerY, height, width} - top/left take presidence", function() {
 
-  var layout = { top: 10, left: 10, bottom: 10, right: 10, centerX: 10, centerY: 10, height: 60, width: 60 };
+  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: 10, y: 10, width: 60, height: 60 } ;
   var with_f = { x: 10, y: 10, width: 60, height: 60 } ;
-  var s = { width: 60, height: 60, top: 10, left: 10 } ;
+  var s = { width: '60%', height: '60%', top: '10%', left: '10%' } ;
   
   performLayoutTest(layout, no_f, s, with_f, s) ;
   
@@ -247,7 +480,8 @@ test("layout {top, left, bottom, right, centerX, centerY, height, width} - top/l
 
 test("layout {centerX, centerY, width:auto, height:auto}", function() {
   var error=null;
-  var layout = { centerX: 10, centerY: 10, width: 'auto', height: 'auto' };
+  var layout = { centerX: 0.1, centerY: 0.1, width: 'auto', height: 'auto' };
+
   child.set('layout', layout) ;
   try{
     child.layoutStyle();
@@ -268,11 +502,10 @@ module('RESIZE FRAME', commonSetup);
  
 function verifyFrameResize(layout, before, after) {
   parent.appendChild(child);
-  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))) ;
-  
-  parent.adjust('width', 300).adjust('height', 300);
+  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)));
   
@@ -306,6 +539,40 @@ test("frame loc shifts with centerX/centerY", function(){
   verifyFrameResize(layout, before, after);
 });
 
+//with percentage
+
+test("frame does not change with top/left/w/h", 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", 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", 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", 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 };
+  verifyFrameResize(layout, before, after);
+});
+
+
+
+
+
 
 // test("frame size shifts with top/left/bottom/right", function(){
 //   var error=null;