sproutcore 1.5.0.pre.3 → 1.5.0.pre.4

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

@@ -0,0 +1,640 @@
+// ========================================================================
+// View Layout Unit Tests
+// ========================================================================
+
+/*globals module test ok same equals */
+
+/* These unit tests verify:  layout(), frame(), styleLayout() and clippingFrame(). */
+(function() {
+  var parent, child;
+
+  /*
+    helper method to test the layout of a view.  Applies the passed layout to a
+    view, then compares both its frame and layoutStyle properties both before
+    and after adding the view to a parent view.  
+
+    You can pass frame rects with some properties missing and they will be
+    filled in for you just so you don't have to write so much code.
+    
+    @param {Hash} layout layout hash to test
+    @param {Hash} no_f expected frame for view with no parent
+    @param {Hash} no_s expected layoutStyle for view with no parent
+    @param {Hash} with_f expected frame for view with parent
+    @param {Hash} with_s expected layoutStyle for view with parent
+    @returns {void}
+  */
+  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 layoutKeys = 'width height top bottom marginLeft marginTop left right zIndex minWidth maxWidth minHeight maxHeight'.w();
+    if (SC.platform.supportsCSSTransforms) { layoutKeys.push('transform'); }
+
+    var frameKeys = 'x y width height'.w();
+
+    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'; }
+      if (typeof with_s[key] === 'number') { with_s[key] = no_s[key].toString() + 'px'; }
+    });
+
+    // set layout
+    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;
+      equals(layoutStyle[testKey], no_s[key], "STYLE NO PARENT %@".fmt(key));
+    });
+
+    if (no_f !== undefined) {
+      if (frame && no_f) {
+        frameKeys.forEach(function(key){
+          equals(frame[key], no_f[key], "FRAME NO PARENT %@".fmt(key));
+        });
+      } else {
+        equals(frame, no_f, "FRAME NO PARENT");
+      }
+    }
+
+
+    // add parent
+    SC.RunLoop.begin();
+    parent.appendChild(child);
+    SC.RunLoop.end();
+
+    layoutStyle = child.get('layoutStyle');
+    frame = child.get('frame');
+
+    // test again
+    layoutKeys.forEach(function(key) {
+      testKey = key === 'transform' ? SC.platform.domCSSPrefix+'Transform' : key;
+      equals(layoutStyle[testKey], with_s[key], "STYLE W/ PARENT %@".fmt(key));
+    });
+
+    if (with_f !== undefined) {
+      frameKeys.forEach(function(key){
+        equals(frame[key], with_f[key], "FRAME W/ PARENT %@".fmt(key));
+      });
+    }
+
+  }
+
+  /**
+    Helper setup that creates a parent and child view so that you can do basic
+    tests.
+  */
+  var commonSetup = {
+    setup: function() {
+      
+      // create basic parent view
+      parent = SC.View.create({
+        layout: { top: 0, left: 0, width: 200, height: 200 }
+      });
+      
+      // create child view to test against.
+      child = SC.View.create();
+    },
+    
+    teardown: function() {
+      parent = child = null ;
+    }
+  };
+
+  module("NOTIFICATIONS", commonSetup) ;
+
+  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.set('layout', { left: 0, top: 10, bottom: 20, right: 50 }) ;
+    ok(didNotify, "didNotify");
+    ok(didNotifyStyle, 'didNotifyStyle');
+  }) ;
+
+  // ..........................................................
+  // 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', commonSetup);
+
+  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 } ;
+
+    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 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) ;
+  }) ;
+
+  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 } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  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%" } ;
+
+    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, 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 s = { top: 0, left: 0, width: 'auto', height: 'auto' };
+
+    performLayoutTest(layout, no_f, s, with_f, s);
+
+    layer.parentNode.removeChild(layer);
+  });
+
+  // See comment in above test
+  test("layout {top, left, width: auto, height: auto} - frame");
+
+
+
+  // ..........................................................
+  // 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 = { 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) ;
+  }) ;
+
+  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%' } ;
+
+    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 = { 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%' } ;
+
+    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: 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) ;
+  }) ;
+
+  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 = null;
+    // See pending test below
+    var with_f = undefined; // { 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);
+
+    layer.parentNode.removeChild(layer);
+  });
+
+  // See commented out lines in test above
+  test("layout {top, left, width: auto, height: auto} - frame");
+
+
+
+  // ..........................................................
+  // 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: function(){
+      child.destroyLayer();
+      commonSetup.teardown();
+    }
+  });
+
+  function transformFor(view){
+    return view.get('layer').style[SC.platform.domCSSPrefix+'Transform'];
+  }
+
+  test("layout {rotateX}", function() {
+    child.adjust('rotateX', 45).updateLayout();
+    equals(transformFor(child), 'rotateX(45deg)', 'transform attribute should be "rotateX(45deg)"')
+  });
+
+  test("layout {rotateY}", function() {
+    child.adjust('rotateY', 45).updateLayout();
+    equals(transformFor(child), 'rotateY(45deg)', 'transform attribute should be "rotateY(45deg)"')
+  });
+
+  test("layout {rotateZ}", function() {
+    child.adjust('rotateZ', 45).updateLayout();
+    equals(transformFor(child), 'rotateZ(45deg)', 'transform attribute should be "rotateZ(45deg)"')
+  });
+
+  test("layout {rotate}", function() {
+    child.adjust('rotate', 45).updateLayout();
+    equals(transformFor(child), 'rotateX(45deg)', 'transform attribute should be "rotateX(45deg)"')
+  });
+
+  test("layout {rotateX} with units", function() {
+    child.adjust('rotateX', '1rad').updateLayout();
+    equals(transformFor(child), 'rotateX(1rad)', 'transform attribute should be "rotateX(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 {rotateX, scale}", function() {
+    child.adjust({ rotateX: 45, scale: 2 }).updateLayout();
+    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();
+    equals(transformFor(child), 'rotateX(90deg)', 'transform attribute should be "rotateX(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();
+        child.wantsAcceleratedLayer = 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: 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) ;
+    }) ;
+
+    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 } ;
+
+      performLayoutTest(layout, no_f, s, with_f, s) ;
+    }) ;
+
+    test("layout {top, left, width: auto, height: auto}", function() {
+      child = SC.View.create({
+        wantsAcceleratedLayer: YES,
+        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 no_f = null;
+      // See test below
+      var with_f = undefined; // { 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);
+  
+      layer.parentNode.removeChild(layer);
+    });
+
+      // See commented lines in test above
+      test("layout {top, left, width: auto, height: auto} - frame");
+
+    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 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) ;
+    }) ;
+
+  }
+
+
+
+
+
+
+
+  // ..........................................................
+  // TEST FRAME/STYLEFRAME WITH INVALID LAYOUT VARIATIONS
+  // 
+  // NOTE:  Each test evaluates the frame before and after adding it to the 
+  // parent.
+
+  module('INVALID LAYOUT VARIATIONS', commonSetup);
+
+  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%' } ;
+
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+  }) ;
+
+  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 } ;
+    
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+    
+  }) ;
+
+  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 } ;
+    
+    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: 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) ;
+
+  }) ;
+
+  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) ;
+    
+  }) ;
+
+  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%' } ;
+    
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+    
+  }) ;
+
+  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%' } ;
+
+    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: 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%' } ;
+    
+    performLayoutTest(layout, no_f, s, with_f, s) ;
+    
+  }) ;
+
+
+  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{
+      child.layoutStyle();
+    }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 );
+    
+  }) ;
+
+
+  // ..........................................................
+  // TEST FRAME/STYLEFRAME WHEN PARENT VIEW IS RESIZED
+  // 
+
+  module('RESIZE FRAME', commonSetup);
+   
+  function verifyFrameResize(layout, before, after) {
+    parent.appendChild(child);
+    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'), after, "After: %@ == %@".fmt(SC.inspect(child.get('frame')), SC.inspect(after)));
+    
+  }
+
+  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(){
+    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(){
+    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(){
+    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 };
+    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("for proper null variables");
+  // nothing should get passed through as undefined, instead we want null in certain cases
+
+
+
+  // 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);
+  //   child.set('layout', layout);
+  //   child.get('frame');
+  //   parent.adjust('width', 'auto').adjust('height', 'auto');
+  //   try{
+  //     child.get('frame');
+  //   }catch(e){
+  //     error=e;
+  //   }
+  //   equals(SC.T_ERROR,SC.typeOf(error),'Layout style functions should throw and '+
+  //   'error if centerx/y and width/height are set at the same time ' + error );
+  //       
+  //    
+  // });
+})();