sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/enabled.js

@@ -165,14 +165,6 @@ SC.View.reopen(
   // Methods
   //
 
-  /** @private */
-  init: function (original) {
-    original();
-
-    // If the view is pre-configured as disabled, then go to the proper initial state.
-    if (!this.get('isEnabled')) { this._doDisable(); }
-  }.enhance(),
-
   /** @private
     Observes the isEnabled property and resigns first responder if set to NO.
     This will avoid cases where, for example, a disabled text field retains
@@ -210,16 +202,6 @@ SC.View.reopen(
     }
   },
 
-  /** @private Enhance. */
-  _executeQueuedUpdates: function (original) {
-    original();
-
-    // Update the layout style of the layer if necessary.
-    if (this._enabledStyleNeedsUpdate) {
-      this._doUpdateEnabledStyle();
-    }
-  }.enhance(),
-
   /** @private */
   _doUpdateEnabledStyle: function () {
     var isEnabled = this.get('isEnabled');
@@ -272,16 +254,6 @@ SC.View.reopen(
     }
   },
 
-  applyAttributesToContext: function (original, context) {
-    original(context);
-
-    if (!this.get('isEnabled')) {
-      context.addClass('disabled');
-      context.setAttr('aria-disabled', 'true');
-    }
-
-  }.enhance(),
-
   /** @private */
   _gotoEnabledState: function () {
     this.set('enabledState', SC.CoreView.ENABLED);

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/keyboard.js

@@ -55,23 +55,38 @@ SC.View.reopen(
   /**
     This method will process a key input event, attempting to convert it to
     an appropriate action method and sending it up the responder chain.  The
-    event is converted using the SC.KEY_BINDINGS hash, which maps key events
-    into method names.  If no key binding is found, then the key event will
-    be passed along using an insertText() method.
+    event is converted using the key bindings hashes, (SC.BASE_KEY_BINDINGS
+    and SC.MODIFIED_KEY_BINDINGS) which map key events to method names. If
+    no key binding method is found, then the key event will be passed along
+    to any insertText() method found.
 
     @param {SC.Event} event
     @returns {Object} object that handled event, if any
   */
   interpretKeyEvents: function(event) {
-    var codes = event.commandCodes(), cmd = codes[0], chr = codes[1], ret;
+    var codes = event.commandCodes(),
+        cmd = codes[0],
+        chr = codes[1],
+        ret,
+        match,
+        methodName,
+        target,
+        pane,
+        handler;
 
     if (!cmd && !chr) { return null ; } //nothing to do.
 
     // if this is a command key, try to do something about it.
     if (cmd) {
-      var methodName = SC.MODIFIED_KEY_BINDINGS[cmd] || SC.BASE_KEY_BINDINGS[cmd.match(/[^_]+$/)[0]];
+      match = cmd.match(/[^_]+$/);
+      methodName = SC.MODIFIED_KEY_BINDINGS[cmd];
+      if (!methodName && match && match.length > 0) {
+        methodName = SC.BASE_KEY_BINDINGS[match[0]];
+      }
       if (methodName) {
-        var target = this, pane = this.get('pane'), handler = null;
+        target = this;
+        pane = this.get('pane');
+        handler = null;
         while(target && !(handler = target.tryToPerform(methodName, event))){
           target = (target===pane)? null: target.get('nextResponder') ;
         }

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/layout.js

@@ -7,9 +7,6 @@ SC.LAYOUT_HORIZONTAL = 'sc-layout-horizontal';
 /** Select a vertical layout for various views.*/
 SC.LAYOUT_VERTICAL = 'sc-layout-vertical';
 
-/** @private */
-SC._VIEW_DEFAULT_DIMS = ['marginTop', 'marginLeft'];
-
 /**
   Layout properties to take up the full width of a parent view.
 */
@@ -32,22 +29,29 @@ SC.ANCHOR_CENTER = { centerX: 0, centerY: 0 };
 
 SC.LAYOUT_AUTO = 'auto';
 
+// Regexes representating valid values for rotation and scale layout properties
+SC._ROTATION_VALUE_REGEX = /^\-?\d+(\.\d*)?(rad|deg)$/;
+SC._SCALE_VALUE_REGEX = /^\d+(,\d+){0,2}$/;
 
 SC.View.reopen(
   /** @scope SC.View.prototype */ {
 
   /**
-    Set to YES to indicate the view has layout support added.
+    Walks like a duck. Is YES to indicate that a view has layout support.
   */
   hasLayout: YES,
 
   /**
-    Optional background color.  Will be applied to the view's element if
-    set.  This property is intended for one-off views that need a background
-    element.  If you plan to create many view instances it is probably better
-    to use CSS.
+    The view's background color. Only recommended for use during prototyping and in views
+    where the background color may change arbitrarily, for example in connection with an
+    instance of `SC.Color`. Otherwise you should use CSS and `classNames` or
+    `classNameBindings`.
+
+    If set at create time, will be added to the view's layer. For dynamic background colors,
+    you must add `backgroundColor` to the view's `displayProperties`.
 
     @type String
+    @default null
   */
   backgroundColor: null,
 
@@ -55,10 +59,10 @@ SC.View.reopen(
   _previousLayout: null,
 
   /**
-    Activates use of brower's static layout. To activate, set this
-    property to YES.
+    Activates use of brower's static layout. To activate, set this property to YES.
 
     @type Boolean
+    @default NO
   */
   useStaticLayout: NO,
 
@@ -66,40 +70,6 @@ SC.View.reopen(
   // LAYOUT
   //
 
-  /** @private */
-  init: function (original) {
-    original();
-
-    this._previousLayout = this.get('layout');
-
-    // Apply the automatic child view layout if it is defined.
-    var childViewLayout = this.childViewLayout;
-    if (childViewLayout) {
-      // Layout the child views once.
-      this.set('childViewsNeedLayout', true);
-      this.layoutChildViewsIfNeeded();
-
-      // If the child view layout is live, start observing affecting properties.
-      if (this.get('isChildViewLayoutLive')) {
-        this.addObserver('childViews.[]', this, this._cvl_childViewsDidChange);
-        // DISABLED. this.addObserver('childViewLayout', this, this._cvl_childViewLayoutDidChange);
-        this.addObserver('childViewLayoutOptions', this, this._cvl_childViewLayoutDidChange);
-
-        // Initialize the child views.
-        this._cvl_setupChildViewsLiveLayout();
-      }
-    }
-
-  }.enhance(),
-
-  /** @private */
-  destroy: function (original) {
-    // Clean up.
-    this._previousLayout = null;
-
-    return original();
-  }.enhance(),
-
   /**
     The 'frame' property depends on the 'layout' property as well as the
     parent view's frame.  In order to properly invalidate any cached values,
@@ -112,6 +82,26 @@ SC.View.reopen(
     whenever 'layout' is set.
   */
   propertyDidChange: function (key, value, _keepCache) {
+    //@if(debug)
+    // Debug mode only property validation.
+    switch (key) {
+    case 'layout':
+      // If a layout value is accidentally set to NaN, this can result in infinite loops. Help the developer out by failing
+      // early so that they can follow the stack trace to the problem.
+      var layout = this.get('layout');
+      for (var property in layout) {
+        if (!layout.hasOwnProperty(property)) { continue; }
+
+        var layoutValue = layout[property];
+        if (isNaN(layoutValue) && (layoutValue !== SC.LAYOUT_AUTO) &&
+            !SC._ROTATION_VALUE_REGEX.exec(layoutValue) && !SC._SCALE_VALUE_REGEX.exec(layoutValue)) {
+          throw new Error("SC.View layout property set to invalid value, %@: %@.".fmt(property, layoutValue));
+        }
+      }
+      break;
+    }
+    //@endif
+
     // If the key is 'layout', we need to call layoutDidChange() immediately
     // so that if the frame has changed any cached values (for both this view
     // and any child views) can be appropriately invalidated.
@@ -122,13 +112,52 @@ SC.View.reopen(
     var layoutChange = false;
     if (typeof this.layout === "function" && this._kvo_dependents) {
       var dependents = this._kvo_dependents[key];
-      if (dependents && dependents.indexOf('layout') != -1) { layoutChange = true; }
+      if (dependents && dependents.indexOf('layout') !== -1) { layoutChange = true; }
+    }
+
+    if (key === 'layout' || layoutChange) {
+      this.layoutDidChange();
     }
-    if (key === 'layout' || layoutChange) { this.layoutDidChange(); }
+
     // Resume notification as usual.
     sc_super();
   },
 
+  /** @private Apply the adjustment to a clone of the layout (cloned unless newLayout is passed in) */
+  _sc_applyAdjustment: function (key, newValue, layout, newLayout) {
+    var animateLayout = this._animateLayout;
+
+    // If a call to animate occurs in the same run loop, the animation layout
+    // would still be applied in the next run loop, potentially overriding this
+    // adjustment. So we need to cancel the animation layout.
+    if (animateLayout) {
+      if (newValue === null) {
+        delete animateLayout[key];
+      } else {
+        animateLayout[key] = newValue;
+      }
+
+      if (this._pendingAnimations && this._pendingAnimations[key]) {
+        // Adjusting a value that was about to be animated cancels the animation.
+        delete this._pendingAnimations[key];
+      }
+
+    }
+
+    // Ignore undefined values or values equal to the current value.
+    if (newValue !== undefined && layout[key] != newValue) { // coerced so '100' == 100
+      // Only clone the layout if it is not given.
+      if (!newLayout) newLayout = SC.clone(this.get('layout'));
+
+      if (newValue === null) {
+        delete newLayout[key];
+      } else {
+        newLayout[key] = newValue;
+      }
+    }
+
+    return newLayout;
+  },
 
   /**
     This convenience method will take the current layout, apply any changes
@@ -146,66 +175,31 @@ SC.View.reopen(
     @returns {SC.View} receiver
   */
   adjust: function (key, value) {
-    if (key === undefined) { return this; } // nothing to do.
+    if (key === undefined) { return this; } // FAST PATH! Nothing to do.
 
     var layout = this.get('layout'),
-        didChange = NO,
-        animateLayout = this._animateLayout,
-        cur, hash;
+      newLayout;
 
     // Normalize arguments.
     if (SC.typeOf(key) === SC.T_STRING) {
-      hash = {};
-      hash[key] = value;
+      newLayout = this._sc_applyAdjustment(key, value, layout);
     } else {
-      hash = key;
-    }
-
-    for (key in hash) {
-      if (!hash.hasOwnProperty(key)) { continue; }
-
-      value = hash[key];
-      cur = layout[key];
+      for (var aKey in key) {
+        if (!key.hasOwnProperty(aKey)) { continue; }
 
-      // If a call to animate occurs in the same run loop, the animation layout
-      // would still be applied in the next run loop, potentially overriding this
-      // adjustment. So we need to fix up the animation layout.
-      if (animateLayout) {
-        if (value === null) {
-          delete animateLayout[key];
-        } else {
-          animateLayout[key] = value;
-        }
-
-        if (this._pendingAnimations[key]) {
-          // Adjusting a value that was previously about to be animated cancels the animation.
-          delete this._pendingAnimations[key];
-        }
-      }
-
-      if (value === undefined || cur == value) { continue; }
-
-      // only clone the layout the first time we see a change
-      if (!didChange) layout = SC.clone(layout);
-
-      if (value === null) {
-        delete layout[key];
-      } else {
-        layout[key] = value;
+        newLayout = this._sc_applyAdjustment(aKey, key[aKey], layout, newLayout);
       }
-
-      didChange = YES;
     }
 
     // now set adjusted layout
-    if (didChange) {
+    if (newLayout) {
       var transitionAdjust = this.get('transitionAdjust');
 
       if (this.get('viewState') & SC.CoreView.IS_SHOWN && transitionAdjust) {
         // Run the adjust transition.
-        this._transitionAdjust(layout);
+        this._transitionAdjust(newLayout);
       } else {
-        this.set('layout', layout);
+        this.set('layout', newLayout);
       }
     }
 
@@ -222,44 +216,71 @@ SC.View.reopen(
   },
 
   /** @private */
-  didTransitionAdjust: function () {
-  },
+  didTransitionAdjust: function () {},
 
   /**
-    The layout describes how you want your view to be positioned on the
-    screen.  You can define the following properties:
-
-     - left: the left edge
-     - top: the top edge
-     - right: the right edge
-     - bottom: the bottom edge
-     - height: the height
-     - width: the width
-     - centerX: an offset from center X
-     - centerY: an offset from center Y
-     - minWidth: a minimum width
-     - minHeight: a minimum height
-     - maxWidth: a maximum width
-     - maxHeight: a maximum height
-     - border: border on all sides
-     - borderTop: top border
-     - borderRight: right border
-     - borderBottom: bottom border
-     - borderLeft: bottom left
-     - opacity: the opacity of the view
-     - zIndex: position above or below other views
-
-    Note that you can only use certain combinations to set layout.  For
-    example, you may set left/right or left/width, but not left/width/right,
-    since that combination doesn't make sense.
+    Set the layout to a hash of layout properties to describe in detail how your view
+    should be positioned on screen. Like most application development environments,
+    your views are laid out absolutely, relative to their parent view.
+
+    You can define your layout using combinations of the following positional properties:
+
+     - left
+     - top
+     - right
+     - bottom
+     - height
+     - width
+     - centerX: offset from center, horizontally
+     - centerY: offset from center, vertically
+     - minWidth
+     - minHeight
+     - maxWidth
+     - maxHeight
+     - scale: once positioned, scales the view in place.
+     - transformOriginX, transformOriginY: defines the point (as a decimal percentage) around which
+       your view will scale. (Also impacts rotation; see below.)
+
+    They are processed by SproutCore's layout engine and used to position the view's element onscreen. They are
+    also reliably and speedily processed into a scaled rectangle (with x, y, height, width, scale and origin
+    values) available on the frame property. See documentation on it and the clippingFrame property for more.
+
+    Most of these properties take integer numbers of pixels, for example { left: 10 }, or fractional
+    percentages like { left 0.25 }. Exceptions include scale, which takes a scale factor (e.g. { scale:
+    2 } doubles the view's size), and transformOriginX/Y which take a decimal percent, and default to 0.5
+    (the center of the view).
+
+    It's possible to define very sophisticated layouts with these properties alone. For example, you
+    can define a view which takes up the full screen until it reaches a certain width, and aligns to
+    the left thereafter, with { left: 0, right: 0, maxWidth: 400 }. (If you need the flexibility to
+    assign entirely different layouts at different screen or window sizes, see the Design Modes
+    documentation under SC.Application.)
+
+    Certain layout combinations are nonsensical and of course should be avoided. For example, you
+    can use left + right or left + width, but not left + right + width.
+
+    If your view has a CSS border, it's important that you specify its thickness in the layout hash,
+    using one or more of the following border properties, as well as in your CSS. This is an unfortunate
+    bit of repetition, but it's necessary to allow SproutCore to adjust the layout to compensate. (HTML
+    positions borders outside of the body of an element; SproutCore positions them inside their rectangles.)
+
+     - border: border thickness on all sides
+     - borderTop: top border thickness
+     - borderRight: right border thickness
+     - borderBottom: bottom border thickness
+     - borderLeft: bottom left thickness
+
+    You can also use the following layout properties, which don't impact your view's frame.
 
-    Likewise, you may set a minWidth/minHeight, or maxWidth/maxHeight, but
-    if you also set the width/height explicitly, then those constraints won't
-    matter as much.
+     - opacity: the opacity of the view
+     - rotate: once positioned, rotates the view in place.
+     - zIndex: position above or below other views (Not recommended. Control sibling view
+       overlay with childView order (later views draw above earlier views) where possible.)
 
-    Layout is designed to maximize reliance on the browser's rendering
-    engine to keep your app up to date.
+    To change a layout property, you should use the adjust method, which handles some particulars for you.
 
+    @type Object
+    @default { top: 0, left: 0, bottom: 0, right: 0 }
     @test in layoutStyle
   */
   layout: { top: 0, left: 0, bottom: 0, right: 0 },
@@ -281,6 +302,7 @@ SC.View.reopen(
     fixed left & top position within its parent's frame.  Fixed positions are
     therefore unaffected by changes to their parent view's size.
 
+    @field
     @returns {Boolean} YES if fixed, NO otherwise
     @test in layoutStyle
   */
@@ -318,25 +340,48 @@ SC.View.reopen(
     width and height.  Fixed sizes are therefore unaffected by changes to their
     parent view's size.
 
+    @field
     @returns {Boolean} YES if fixed, NO otherwise
-    @test in layoutStyle
+    @test in layout
   */
   isFixedSize: function () {
-    var layout = this.get('layout'),
-        ret;
+    return this.get('isFixedHeight') && this.get('isFixedWidth');
+  }.property('isFixedWidth', 'isFixedHeight').cacheable(),
 
-    // Size is fixed if it has width + height !== SC.LAYOUT_AUTO
-    ret = (
-      ((layout.width !== undefined) && (layout.height !== undefined)) &&
-      ((layout.width !== SC.LAYOUT_AUTO) && (layout.height !== SC.LAYOUT_AUTO))
-    );
+  /**
+    Returns whether the height is 'fixed' or not. A fixed height is defined on the layout
+    as an integer number of pixels.  Fixed widths are therefore unaffected by changes
+    to their parent view's height.
 
-    // The size may appear fixed, but only if none of the values are percentages.
-    if (ret) {
-      ret = (!SC.isPercentage(layout.width) && !SC.isPercentage(layout.height));
-    }
+    @field
+    @returns {Boolean} YES if fixed, NO otherwise
+    @test in layout
+  */
+  isFixedHeight: function() {
+    var layout = this.get('layout');
 
-    return ret;
+    // Width is fixed if it has a height and it isn't SC.LAYOUT_AUTO or a percent.
+    return (layout.height !== undefined) &&
+      (layout.height !== SC.LAYOUT_AUTO) &&
+      !SC.isPercentage(layout.height);
+  }.property('layout').cacheable(),
+
+  /**
+    Returns whether the width is 'fixed' or not. A fixed width is defined on the layout
+    as an integer number of pixels.  Fixed widths are therefore unaffected by changes
+    to their parent view's width.
+
+    @field
+    @returns {Boolean} YES if fixed, NO otherwise
+    @test in layout
+  */
+  isFixedWidth: function() {
+    var layout = this.get('layout');
+
+    // Width is fixed if it has a width and it isn't SC.LAYOUT_AUTO or a percent.
+    return (layout.width !== undefined) &&
+      (layout.width !== SC.LAYOUT_AUTO) &&
+      !SC.isPercentage(layout.width);
   }.property('layout').cacheable(),
 
   /**
@@ -357,31 +402,7 @@ SC.View.reopen(
     @test in convertFrames
   */
   convertFrameToView: function (frame, targetView) {
-    var myX = 0, myY = 0, targetX = 0, targetY = 0, view = this, f;
-
-    // walk up this side
-    while (view) {
-      f = view.get('frame');
-      myX += f.x;
-      myY += f.y;
-      view = view.get('layoutView');
-    }
-
-    // walk up other size
-    if (targetView) {
-      view = targetView;
-      while (view) {
-        f = view.get('frame');
-        targetX += f.x;
-        targetY += f.y;
-        view = view.get('layoutView');
-      }
-    }
-
-    // now we can figure how to translate the origin.
-    myX = frame.x + myX - targetX;
-    myY = frame.y + myY - targetY;
-    return { x: myX, y: myY, width: frame.width, height: frame.height };
+    return this._convertFrameFromViewHelper(frame, this, targetView);
   },
 
   /**
@@ -401,31 +422,65 @@ SC.View.reopen(
     @test in converFrames
   */
   convertFrameFromView: function (frame, targetView) {
-    var myX = 0, myY = 0, targetX = 0, targetY = 0, view = this, f;
-
-    // walk up this side
-    //Note: Intentional assignment of variable f
-    while (view && (f = view.get('frame'))) {
-      myX += f.x;
-      myY += f.y;
-      view = view.get('parentView');
+    return this._convertFrameFromViewHelper(frame, targetView, this);
+  },
+
+  /** @private */
+  _convertFrameFromViewHelper: function(frame, fromView, targetView) {
+    var myX = frame.x, myY = frame.y, myWidth = frame.width, myHeight = frame.height, view, f;
+
+    // first, walk up from the view of the frame, up to the top level
+    if (fromView) {
+      view = fromView;
+      //Note: Intentional assignment of variable f
+      while (view && (f = view.get('frame'))) {
+
+        // if scale != 1, then multiple by the scale (going from view to parent)
+        if (f.scale && f.scale !== 1) {
+          myX *= f.scale;
+          myY *= f.scale;
+          myWidth *= f.scale;
+          myHeight *= f.scale;
+        }
+
+        myX += f.x;
+        myY += f.y;
+
+        view = view.get('layoutView');
+      }
     }
 
-    // walk up other size
+    // now, we'll walk down from the top level to the target view
+
+    // construct an array of view ancestry, from
+    // the top level view down to the target view
     if (targetView) {
+      var viewAncestors = [];
       view = targetView;
-      while (view) {
+
+      while (view && view.get('frame')) {
+        viewAncestors.unshift(view);
+        view = view.get('layoutView');
+      }
+
+      // now walk the frame from
+      for (var i = 0; i < viewAncestors.length; i++ ) {
+        view = viewAncestors[i];
         f = view.get('frame');
-        targetX += f.x;
-        targetY += f.y;
-        view = view.get('parentView');
+
+        myX -= f.x;
+        myY -= f.y;
+
+        if (f.scale && f.scale !== 1) {
+          myX /= f.scale;
+          myY /= f.scale;
+          myWidth /= f.scale;
+          myHeight /= f.scale;
+        }
       }
     }
 
-    // now we can figure how to translate the origin.
-    myX = frame.x - myX + targetX;
-    myY = frame.y - myY + targetY;
-    return { x: myX, y: myY, width: frame.width, height: frame.height };
+    return { x: myX, y: myY, width: myWidth, height: myHeight };
   },
 
   /**
@@ -470,237 +525,107 @@ SC.View.reopen(
     return frame;
   },
 
-  /**
-    Computes what the frame of this view would be if the parent were resized
-    to the passed dimensions.  You can use this method to project the size of
-    a frame based on the resize behavior of the parent.
-
-    This method is used especially by the scroll view to automatically
-    calculate when scrollviews should be visible.
-
-    Passing null for the parent dimensions will use the actual current
-    parent dimensions.  This is the same method used to calculate the current
-    frame when it changes.
-
-    @param {Rect} pdim the projected parent dimensions
-    @returns {Rect} the computed frame
-  */
-  computeFrameWithParentFrame: function (original, pdim) {
-    var f, layout = this.get('layout');
-
-    // We can't predict the frame for static layout, so just return the view's
-    // current frame (see original computeFrameWithParentFrame in views/view.js)
-    if (this.get('useStaticLayout')) {
-      f = original();
-      return f ? this._adjustForBorder(f, layout) : null;
-    } else {
-      f = {};
-    }
-
-    var error, layer, AUTO = SC.LAYOUT_AUTO,
-        pv = this.get('parentView'),
-        dH, dW, //shortHand for parentDimensions
-        lR = layout.right,
-        lL = layout.left,
-        lT = layout.top,
-        lB = layout.bottom,
-        lW = layout.width,
-        lH = layout.height,
-        lcX = layout.centerX,
-        lcY = layout.centerY;
-
-    if (lW === AUTO) {
-      error = SC.Error.desc(("%@.layout() cannot use width:auto if " +
-        "staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
-      SC.Logger.error(error.toString());
-      throw error;
-    }
-
-    if (lH === AUTO) {
-      error = SC.Error.desc(("%@.layout() cannot use height:auto if " +
-        "staticLayout is disabled").fmt(this), "%@".fmt(this), -1);
-      SC.Logger.error(error.toString());
-      throw error;
-    }
-
-    if (!pdim) { pdim = this.computeParentDimensions(layout); }
-    dH = pdim.height;
-    dW = pdim.width;
-
-    // handle left aligned and left/right
-    if (!SC.none(lL)) {
-      if (SC.isPercentage(lL)) {
-        f.x = dW * lL;
-      } else {
-        f.x = lL;
-      }
-      if (lW !== undefined) {
-        if (lW === AUTO) { f.width = AUTO; }
-        else if (SC.isPercentage(lW)) { f.width = dW * lW; }
-        else { f.width = lW; }
-      } else { // better have lR!
-        f.width = dW - f.x;
-        if (lR && SC.isPercentage(lR)) { f.width = f.width - (lR * dW); }
-        else { f.width = f.width - (lR || 0); }
-      }
-    // handle right aligned
-    } else if (!SC.none(lR)) {
-      if (SC.none(lW)) {
-        if (SC.isPercentage(lR)) {
-          f.width = dW - (dW * lR);
-        }
-        else f.width = dW - lR;
-        f.x = 0;
-      } else {
-        if (lW === AUTO) f.width = AUTO;
-        else if (SC.isPercentage(lW)) f.width = dW * lW;
-        else f.width = (lW || 0);
-        if (SC.isPercentage(lW)) f.x = dW - (lR * dW) - f.width;
-        else f.x = dW - lR - f.width;
-      }
-
-    // handle centered
-    } else if (!SC.none(lcX)) {
-      if (lW === AUTO) f.width = AUTO;
-      else if (SC.isPercentage(lW)) f.width = lW * dW;
-      else f.width = (lW || 0);
-      if (SC.isPercentage(lcX)) f.x = (dW - f.width) / 2 + (lcX * dW);
-      else f.x = (dW - f.width) / 2 + lcX;
-    } else {
-      f.x = 0; // fallback
-      if (SC.none(lW)) {
-        f.width = dW;
-      } else {
-        if (lW === AUTO) f.width = AUTO;
-        if (SC.isPercentage(lW)) f.width = lW * dW;
-        else f.width = (lW || 0);
-      }
-    }
-
-    // handle top aligned and top/bottom
-    if (!SC.none(lT)) {
-      if (SC.isPercentage(lT)) f.y = lT * dH;
-      else f.y = lT;
-      if (lH !== undefined) {
-        if (lH === AUTO) f.height = AUTO;
-        else if (SC.isPercentage(lH)) f.height = lH * dH;
-        else f.height = lH;
-      } else { // better have lB!
-        if (lB && SC.isPercentage(lB)) f.height = dH - f.y - (lB * dH);
-        else f.height = dH - f.y - (lB || 0);
-      }
-
-    // handle bottom aligned
-    } else if (!SC.none(lB)) {
-      if (SC.none(lH)) {
-        if (SC.isPercentage(lB)) f.height = dH - (lB * dH);
-        else f.height = dH - lB;
-        f.y = 0;
-      } else {
-        if (lH === AUTO) f.height = AUTO;
-        if (lH && SC.isPercentage(lH)) f.height = lH * dH;
-        else f.height = (lH || 0);
-        if (SC.isPercentage(lB)) f.y = dH - (lB * dH) - f.height;
-        else f.y = dH - lB - f.height;
-      }
-
-    // handle centered
-    } else if (!SC.none(lcY)) {
-      if (lH === AUTO) f.height = AUTO;
-      if (lH && SC.isPercentage(lH)) f.height = lH * dH;
-      else f.height = (lH || 0);
-      if (SC.isPercentage(lcY)) f.y = (dH - f.height) / 2 + (lcY * dH);
-      else f.y = (dH - f.height) / 2 + lcY;
-
-    // fallback
-    } else {
-      f.y = 0; // fallback
-      if (SC.none(lH)) {
-        f.height = dH;
-      } else {
-        if (lH === AUTO) f.height = AUTO;
-        if (SC.isPercentage(lH)) f.height = lH * dH;
-        else f.height = lH || 0;
-      }
-    }
-
-    f.x = Math.floor(f.x);
-    f.y = Math.floor(f.y);
-    if (f.height !== AUTO) f.height = Math.floor(f.height);
-    if (f.width !== AUTO) f.width = Math.floor(f.width);
-
-    // if width or height were set to auto and we have a layer, try lookup
-    if (f.height === AUTO || f.width === AUTO) {
-      layer = this.get('layer');
-      if (f.height === AUTO) f.height = layer ? layer.clientHeight : 0;
-      if (f.width === AUTO) f.width = layer ? layer.clientWidth : 0;
-    }
-
-    f = this._adjustForBorder(f, layout);
-
-    // Account for special cases inside ScrollView, where we adjust the
-    // element's scrollTop/scrollLeft property for performance reasons.
-    if (pv && pv.isScrollContainer) {
-      pv = pv.get('parentView');
-      f.x -= pv.get('horizontalScrollOffset');
-      f.y -= pv.get('verticalScrollOffset');
-    }
-
-    // make sure the width/height fix min/max...
-    if (!SC.none(layout.maxHeight) && (f.height > layout.maxHeight)) {
-      f.height = layout.maxHeight;
-    }
+  /** @private */
+  _adjustForScale: function (frame, layout, scale, oX, oY) {
+    // Add the original, unscaled height and width.
+    var originalWidth = frame.width;
+    var originalHeight = frame.height;
 
-    if (!SC.none(layout.minHeight) && (f.height < layout.minHeight)) {
-      f.height = layout.minHeight;
+    // make sure width/height are never < 0
+    if (originalHeight < 0) originalHeight = 0;
+    if (originalWidth < 0) originalWidth = 0;
+
+    // GATEKEEP: Scale not supported.
+    if (!SC.platform.supportsCSSTransforms) {
+      frame.scale = 1;
+      frame.transformOriginX = frame.transformOriginY = 0.5;
+
+      // Add the original, unscaled height and width.
+      frame.originalWidth = originalWidth;
+      frame.originalHeight = originalHeight;
+      return frame;
     }
-
-    if (!SC.none(layout.maxWidth) && (f.width > layout.maxWidth)) {
-      f.width = layout.maxWidth;
+    // Get the scale and transform origins, if not provided. (Note inlining of SC.none for performance)
+    /*jshint eqnull:true*/
+    scale = scale == null ? layout.scale : scale;
+    oX = oX == null ? layout.transformOriginX : oX;
+    oY = oY == null ? layout.transformOriginY : oY;
+    // Get defaults.
+    if (scale == null) scale = 1;
+    if (oX == null) oX = 0.5;
+    if (oY == null) oY = 0.5;
+
+    // If the scale isn't 1, do some calculations.
+    if (scale !== 1) {
+      frame = SC.scaleRect(frame, scale, oX, oY);
     }
+    // Regardless, attach the scale numbers for reference.
+    frame.scale = scale;
+    frame.transformOriginX = oX;
+    frame.transformOriginY = oY;
 
-    if (!SC.none(layout.minWidth) && (f.width < layout.minWidth)) {
-      f.width = layout.minWidth;
-    }
+    // Add the original, unscaled height and width.
+    frame.originalWidth = originalWidth;
+    frame.originalHeight = originalHeight;
 
-    // make sure width/height are never < 0
-    if (f.height < 0) f.height = 0;
-    if (f.width < 0) f.width = 0;
+    // Make sure width/height are never < 0.
+    if (frame.height < 0) frame.height = 0;
+    if (frame.width < 0) frame.width = 0;
 
-    return f;
-  }.enhance(),
+    return frame;
+  },
 
   computeParentDimensions: function (frame) {
-    var ret, pv = this.get('parentView'), pf = (pv) ? pv.get('frame') : null;
+    var parentView = this.get('parentView'),
+        parentFrame = (parentView) ? parentView.get('frame') : null,
+        ret;
 
-    if (pf) {
-      ret = { width: pf.width, height: pf.height };
+    if (parentFrame) {
+      ret = {
+        width: parentFrame.width,
+        height: parentFrame.height
+      };
+    } else if (frame) {
+      ret = {
+        width: (frame.left || 0) + (frame.width || 0) + (frame.right || 0),
+        height: (frame.top || 0) + (frame.height || 0) + (frame.bottom || 0)
+      };
     } else {
-      var f = frame || {};
       ret = {
-        width: (f.left || 0) + (f.width || 0) + (f.right || 0),
-        height: (f.top || 0) + (f.height || 0) + (f.bottom || 0)
+        width: 0,
+        height: 0
       };
     }
+
     return ret;
   },
 
   /**
-    The frame of the view including the borders
+    The frame of the view including the borders and scale
   */
   borderFrame: function () {
     var layout = this.get('layout'),
         frame = this.get('frame'),
+        scale = (frame && !SC.none(frame.scale)) ? frame.scale : 1,
         borderTop = this._effectiveBorderFor('borderTop', layout),
+        scaledBorderTop = borderTop * scale,
         borderRight = this._effectiveBorderFor('borderRight', layout),
+        scaledBorderRight = borderRight * scale,
         borderBottom = this._effectiveBorderFor('borderBottom', layout),
-        borderLeft = this._effectiveBorderFor('borderLeft', layout);
+        scaledBorderBottom = borderBottom * scale,
+        borderLeft = this._effectiveBorderFor('borderLeft', layout),
+        scaledBorderLeft = borderLeft * scale;
 
     return frame ? {
-      x: frame.x - borderLeft,
-      y: frame.y - borderTop,
-      width: frame.width + borderLeft + borderRight,
-      height: frame.height + borderTop + borderBottom
+      x: frame.x - scaledBorderLeft,
+      y: frame.y - scaledBorderTop,
+      width: frame.width + scaledBorderLeft + scaledBorderRight,
+      height: frame.height + scaledBorderTop + scaledBorderBottom,
+      scale: scale,
+      originalWidth: frame.originalWidth + borderLeft + borderRight,
+      originalHeight: frame.originalHeight + borderTop + borderBottom,
+      transformOriginX: frame.transformOriginX,
+      transformOriginY: frame.transformOriginY
     } : null;
   }.property('frame').cacheable(),
 
@@ -711,24 +636,38 @@ SC.View.reopen(
     viewDidResize() if its size may have changed.  You will not usually override
     this method, but you may override the viewDidResize() method.
 
+    @param {Frame} parentFrame the parent view's current frame.
     @returns {void}
     @test in viewDidResize
   */
-  parentViewDidResize: function () {
-    var positionMayHaveChanged,
-      sizeMayHaveChanged;
-
-    // If this view uses static layout, our "do we think the frame changed?"
-    // result of isFixedLayout is not applicable and we simply have to assume
-    // that the frame may have changed.
-    sizeMayHaveChanged = this.get('useStaticLayout') || !this.get('isFixedSize');
-    positionMayHaveChanged = !this.get('isFixedPosition');
-
-    if (sizeMayHaveChanged) {
-      // If our size isn't fixed, our frame may have changed and it will effect our child views.
+  parentViewDidResize: function (parentFrame) {
+    // Determine if our position may have changed.
+    var positionMayHaveChanged = !this.get('isFixedPosition');
+
+    // Figure out if our size may have changed.
+    var isStatic = this.get('useStaticLayout'),
+        // Figure out whether our height may have changed.
+        parentHeight = parentFrame ? parentFrame.height : 0,
+        parentHeightDidChange = parentHeight !== this._scv_parentHeight,
+        isFixedHeight = this.get('isFixedHeight'),
+        heightMayHaveChanged = isStatic || (parentHeightDidChange && !isFixedHeight),
+        // Figure out whether our width may have changed.
+        parentWidth = parentFrame ? parentFrame.width : 0,
+        parentWidthDidChange = parentWidth !== this._scv_parentWidth,
+        isFixedWidth = this.get('isFixedWidth'),
+        widthMayHaveChanged = isStatic || (parentWidthDidChange && !isFixedWidth);
+
+    // Update the cached parent frame.
+    this._scv_parentHeight = parentHeight;
+    this._scv_parentWidth = parentWidth;
+
+    // If our height or width changed, our resulting frame change may impact our child views.
+    if (heightMayHaveChanged || widthMayHaveChanged) {
       this.viewDidResize();
-    } else if (positionMayHaveChanged) {
-      // If our size is fixed but our position isn't, our frame may have changed, but it won't effect our child views.
+    }
+    // If our size didn't change but our position did, our frame will change, but it won't impact our child
+    // views' frames. (Note that the _viewFrameDidChange call is made by viewDidResize above.)
+    else if (positionMayHaveChanged) {
       this._viewFrameDidChange();
     }
   },
@@ -749,10 +688,12 @@ SC.View.reopen(
     this._viewFrameDidChange();
 
     // Also notify our children.
-    var cv = this.childViews, len, idx, view;
+    var cv = this.childViews,
+        frame = this.get('frame'),
+        len, idx, view;
     for (idx = 0; idx < (len = cv.length); ++idx) {
       view = cv[idx];
-      view.tryToPerform('parentViewDidResize');
+      view.tryToPerform('parentViewDidResize', frame);
     }
   },
 
@@ -760,7 +701,7 @@ SC.View.reopen(
     Invoked by other views to notify this view that its frame has changed.
 
     This notifies the view that its frame property has changed,
-    then propagates those changes to its child views.
+    then notifies its child views that their clipping frames may have changed.
   */
   _viewFrameDidChange: function () {
     this.notifyPropertyChange('frame');
@@ -854,14 +795,11 @@ SC.View.reopen(
 
     // Handle old style rotation.
     if (!SC.none(currentLayout.rotate)) {
-      //@if (debug)
-      SC.Logger.warn('Developer Warning: Please set rotateX instead of rotate.');
-      //@endif
-      if (SC.none(currentLayout.rotateX)) {
-        currentLayout.rotateX = currentLayout.rotate;
-      }
+      if (SC.none(currentLayout.rotateZ) && SC.platform.get('supportsCSS3DTransforms')) {
+        currentLayout.rotateZ = currentLayout.rotate;
       delete currentLayout.rotate;
     }
+    }
 
     // Optimize notifications depending on if we resized or just moved.
     this._checkForResize();
@@ -885,7 +823,7 @@ SC.View.reopen(
 
   /** @private */
   _checkForResize: function () {
-    // Did our layout change in a way that could cause us to be resized?  If
+    // Did our layout change in a way that could cause us to have changed size?  If
     // not, then there's no need to invalidate the frames of our child views.
     var previousLayout = this._previousLayout,
         currentLayout  = this.get('layout'),
@@ -894,22 +832,25 @@ SC.View.reopen(
     // We test the new layout to see if we believe it will affect the view's frame.
     // Since all the child view frames may depend on the parent's frame, it's
     // best only to notify a frame change when it actually happens.
-    if (previousLayout && !SC.none(previousLayout.width) && !SC.none(previousLayout.height) && previousLayout !== currentLayout) {
-      var currentTest,
-        previousTest;
-
-      // This code already exists in _adjustForBorder, so we use it to test the effective width/height.
-      // TODO: consider checking min/max sizes
-      previousTest = this._adjustForBorder({ x: 0, y: 0, width: previousLayout.width, height: previousLayout.height },
-        previousLayout);
-      currentTest = this._adjustForBorder({ x: 0, y: 0, width: currentLayout.width || 0, height: currentLayout.height || 0 },
-        currentLayout);
-
-      if (previousTest.width === currentTest.width && previousTest.height === currentTest.height) {
-        didResize = false;
-      }
+    /*jshint eqnull:true*/
+    if (previousLayout &&
+        previousLayout.width != null &&
+        previousLayout.height != null &&
+        previousLayout.width === currentLayout.width &&
+        previousLayout.height === currentLayout.height &&
+        previousLayout.border === currentLayout.border &&
+        previousLayout.borderTop === currentLayout.borderTop &&
+        previousLayout.borderLeft === currentLayout.borderLeft &&
+        previousLayout.borderBottom === currentLayout.borderBottom &&
+        previousLayout.borderRight === currentLayout.borderRight) {
+      didResize = false;
     }
 
+    // Cache the last layout to fine-tune notifications when the layout changes.
+    // NOTE: Do this before continuing so that any adjustments that occur in viewDidResize or from _viewFrameDidChange
+    // (say to the position after a resize), don't result in _checkForResize running against the old _previousLayout.
+    this._previousLayout = currentLayout;
+
     if (didResize) {
       this.viewDidResize();
     } else {
@@ -917,9 +858,6 @@ SC.View.reopen(
       // TODO: consider checking for position changes by testing the resulting frame against the cached frame.  This is difficult to do.
       this._viewFrameDidChange();
     }
-
-    // Cache the last layout to fine-tune notifications when the layout changes.
-    this._previousLayout = currentLayout;
   },
 
   /**
@@ -1101,20 +1039,6 @@ SC.View.reopen(
     context.setStyle(this.get('layoutStyle'));
   },
 
-  applyAttributesToContext: function (original, context) {
-    original(context);
-
-    // Have to pass 'true' for second argument for legacy.
-    this.renderLayout(context, true);
-
-    if (this.get('useStaticLayout')) { context.addClass('sc-static-layout'); }
-
-    var backgroundColor = this.get('backgroundColor');
-    if (backgroundColor) {
-      context.setStyle('backgroundColor', backgroundColor);
-    }
-  }.enhance(),
-
   // ------------------------------------------------------------------------
   // Child View Layouts
   //
@@ -1228,16 +1152,6 @@ SC.View.reopen(
     this._updatedLayout();
   },
 
-  /** @private Enhance. */
-  _executeQueuedUpdates: function (original) {
-    original();
-
-    // Update the layout style of the layer if necessary.
-    if (this._layoutStyleNeedsUpdate) {
-      this._doUpdateLayoutStyle();
-    }
-  }.enhance(),
-
   /** @private Override: Notify on attached (avoids notify of frame changed). */
   _notifyDidAttach: function () {
     // If we are using static layout then we don't know the frame until appended to the document.
@@ -1254,14 +1168,22 @@ SC.View.reopen(
   _adopted: function (beforeView) {
     // Our frame may change once we've been adopted to a parent.
     this._checkForResize();
+
+    // Notify all of our descendents that our parent has changed. They will update their `pane` value for one.
+    this._callOnChildViews('_ancestorDidChangeParent');
   },
 
   /** @private Extension: The 'orphaned' event. */
   _orphaned: function (oldParentView) {
     sc_super();
 
-    // Our frame may change once we've been removed from a parent.
-    if (!this.isDestroyed) { this._checkForResize(); }
+    if (!this.isDestroyed) {
+      // Our frame may change once we've been removed from a parent.
+      this._checkForResize();
+
+      // Notify all of our descendents that our parent has changed. They will update their `pane` value for one.
+      this._callOnChildViews('_ancestorDidChangeParent');
+    }
   },
 
   /** @private Extension: The 'updatedContent' event. */