spade 0.0.1 → 0.0.2

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

@@ -1,180 +0,0 @@
-// ==========================================================================
-// Project:   SproutCore - JavaScript Application Framework
-// Copyright: ©2006-2010 Apple Inc. and contributors.
-// License:   Licensed under MIT license (see license.js)
-// ==========================================================================
-
-/*global module test equals context ok same */
-
-module("SC.View#layoutDidChange");
-
-test("notifies layoutStyle & frame change", function() {
-
-  var view = SC.View.create();
-  var callCount = 0;
-
-  view.addObserver('layoutStyle', function() { callCount++; });
-  view.addObserver('frame', function() { callCount++; });
-
-  view.layoutDidChange();
-  equals(callCount,2,'should trigger observers for layoutStyle + frame');
-});
-
-test("invokes layoutDidChangeFor() on layoutView each time it is called", function() {
-
-  var callCount = 0 ;
-  var layoutView = SC.View.create({
-    layoutDidChangeFor: function(changedView){
-      equals(this.get('childViewsNeedLayout'), YES, 'should set childViewsNeedLayout to YES before calling layoutDidChangeFor()');
-
-      equals(view, changedView, 'should pass view');
-      callCount++;
-    }
-  });
-
-  var view = SC.View.create({ layoutView: layoutView });
-
-  view.layoutDidChange();
-  view.layoutDidChange();
-  view.layoutDidChange();
-
-  equals(callCount, 3, 'should call layoutView.layoutDidChangeFor each time');
-});
-
-test("invokes layoutChildViewsIfNeeded() on layoutView once per runloop", function() {
-
-  var callCount = 0 ;
-  var layoutView = SC.View.create({
-    layoutChildViewsIfNeeded: function(){
-      callCount++;
-    }
-  });
-
-  var view = SC.View.create({ layoutView: layoutView });
-
-  SC.RunLoop.begin();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  SC.RunLoop.end();
-
-  equals(callCount, 1, 'should call layoutView.layoutChildViewsIfNeeded one time');
-});
-
-
-test("should not invoke layoutChildViewsIfNeeded() if layoutDidChangeFor() sets childViewsNeedLayout to NO each time", function() {
-
-  var callCount = 0 ;
-  var layoutView = SC.View.create({
-    layoutDidChangeFor: function() {
-      this.set('childViewsNeedLayout', NO);
-    },
-
-    layoutChildViewsIfNeeded: function(){
-      callCount++;
-    }
-  });
-
-  var view = SC.View.create({ layoutView: layoutView });
-
-  SC.RunLoop.begin();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  view.layoutDidChange();
-  SC.RunLoop.end();
-
-  equals(callCount, 0, 'should not call layoutView.layoutChildViewsIfNeeded');
-});
-
-test('returns receiver', function() {
-  var view = SC.View.create();
-  equals(view.layoutDidChange(), view, 'should return receiver');
-});
-
-test("is invoked whenever layout property changes", function() {
-
-  var callCount = 0 ;
-  var layoutView = SC.View.create({
-    layoutDidChangeFor: function(changedView){
-      callCount++;
-    }
-  });
-
-  var view = SC.View.create({ layoutView: layoutView });
-
-  view.set('layout', { top: 0, left: 10 });
-  equals(callCount, 1, 'should call layoutDidChangeFor when setting layout of child view');
-
-
-});
-
-test("is invoked on parentView if no layoutView whenever layout property changes", function() {
-
-  var callCount = 0 ;
-  var parentView = SC.View.create({
-    layoutDidChangeFor: function(changedView){
-      callCount++;
-    }
-  });
-
-  var view = SC.View.create({});
-  view.set('parentView', parentView);
-
-  view.set('layout', { top: 0, left: 10 });
-  equals(callCount, 1, 'should call layoutDidChangeFor when setting layout of child view');
-
-});
-
-test("sets rotateX when rotate is set", function() {
-  var view = SC.View.create({});
-  view.set('layout', { rotate: 45 });
-
-  equals(view.get('layout').rotateX, 45, "should set rotateX");
-});
-
-test("sets rotate when rotateX is set", 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");
-});
-
-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");
-});
-
-// 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() {
-  var regularViewCounter = 0, coreViewCounter = 0;
-
-  var view = SC.View.create({
-    childViews: ['regular', 'core'],
-
-    regular: SC.View.create({
-      viewDidResize: function() {
-        regularViewCounter++;
-        // Make sure we call the default implementation to
-        // ensure potential blow-uppy behavior is invoked
-        sc_super();
-      }
-    }),
-
-    core: SC.CoreView.create({
-      viewDidResize: function() {
-        coreViewCounter++;
-        sc_super();
-      }
-    })
-  });
-
-  view.viewDidResize();
-
-  equals(regularViewCounter, 1, "regular view's viewDidResize gets called");
-  equals(coreViewCounter, 1, "core view's viewDidResize gets called");
-});

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

@@ -1,735 +0,0 @@
-// ========================================================================
-// 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 ' +
-                      'borderTopWidth borderBottomWidth borderLeftWidth borderRightWidth').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 BORDER
-  // 
-
-  module('BORDER LAYOUT VARIATIONS', commonSetup);
-
-  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 } ;
-
-    performLayoutTest(layout, no_f, s, with_f, s) ;
-  }) ;
-
-  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 s = { top: 10, left: 10, bottom: 10, right: 10,
-               borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
-
-    performLayoutTest(layout, no_f, s, with_f, s) ;
-  }) ;
-
-  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 s = { top: 10, left: 10, bottom: 10, right: 10,
-               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 3, borderLeftWidth: 4 } ;
-
-    performLayoutTest(layout, no_f, s, with_f, s) ;
-  }) ;
-
-  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 s = { top: 10, left: 10, bottom: 10, right: 10,
-               borderTopWidth: 1, borderRightWidth: 2, borderBottomWidth: 5, borderLeftWidth: 5 } ;
-
-    performLayoutTest(layout, no_f, s, with_f, s) ;
-  }) ;
-
-  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 s = { bottom: 10, right: 10, width: 46, height: 46,
-              borderTopWidth: 2, borderRightWidth: 2, borderBottomWidth: 2, borderLeftWidth: 2 } ;
-
-    performLayoutTest(layout, no_f, s, with_f, s) ;
-  }) ;
-
-  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 } ;
-
-    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', border: 2 };
-    var no_f = null;
-    var with_f = undefined; //{ 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);
-
-    layer.parentNode.removeChild(layer);
-  });
-
-
-  // ..........................................................
-  // 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 );
-  //       
-  //    
-  // });
-})();