You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ha...@apache.org on 2017/03/26 13:02:09 UTC

[17/40] git commit: [flex-asjs] [refs/heads/tlf] - Major overhaul of containers and layouts.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
index 77e752c..ec1a761 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/TileLayout.as
@@ -20,6 +20,7 @@ package org.apache.flex.html.beads.layouts
 {
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
@@ -210,14 +211,14 @@ package org.apache.flex.html.beads.layouts
 
 				var host:UIBase = _strand as UIBase;
 				var viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
-				var contentView:IParentIUIBase = viewBead.contentView;
+				var contentView:IParentIUIBase = viewBead.contentView as IParentIUIBase;
 				children = contentView.internalChildren();
 				n = children.length;
 				if (n === 0) return false;
 
-				viewBead.contentView.width = host.width;
-				viewBead.contentView.element.style["display"] = "flex";
-				viewBead.contentView.element.style["flex-flow"] = "row wrap";
+				contentView.width = host.width;
+				contentView.element.style["display"] = "flex";
+				contentView.element.style["flex-flow"] = "row wrap";
 
 				var realN:int = n;
 				for (i = 0; i < n; i++)

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
index 0d02425..24c5445 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalColumnLayout.as
@@ -21,6 +21,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadLayout;
 	import org.apache.flex.core.IContainer;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IMeasurementBead;
 	import org.apache.flex.core.IParent;
@@ -100,7 +101,7 @@ package org.apache.flex.html.beads.layouts
 		{			
             var host:UIBase = UIBase(_strand);
             var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost();
-            var contentView:IParent = layoutParent.contentView;
+            var contentView:ILayoutObject = layoutParent.contentView;
             var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
 			var sw:Number = host.width;
 			var sh:Number = host.height;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
index 2365991..f80ddf7 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalFlexLayout.as
@@ -22,13 +22,14 @@ package org.apache.flex.html.beads.layouts
 	
 	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.IParentIUIBase;
 	
 	COMPILE::SWF {
-		import org.apache.flex.core.UIBase;
 		import org.apache.flex.core.IUIBase;
-		import org.apache.flex.core.IParentIUIBase;
 		import org.apache.flex.core.ValuesManager;
 		import org.apache.flex.events.Event;
 		import org.apache.flex.events.IEventDispatcher;
@@ -39,6 +40,14 @@ package org.apache.flex.html.beads.layouts
 	
 	public class VerticalFlexLayout extends VerticalLayout
 	{
+		/**
+		 * Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
+		 */
 		public function VerticalFlexLayout()
 		{
 			super();
@@ -55,26 +64,70 @@ package org.apache.flex.html.beads.layouts
 			host = value as ILayoutChild;
 		}
 		
+		private var _grow:Number = -1;
+		
+		/**
+		 * Sets the amount items grow in proportion to other items.
+		 * The default is 0 which prevents the items from expanding to
+		 * fit the space. Use a negative value to unset this property.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
+		 */
+		public function get grow():Number {
+			return _grow;
+		}
+		public function set grow(value:Number):void {
+			_grow = value;
+		}
+		
+		private var _shrink:Number = -1;
+		
+		/**
+		 * Sets the amount an item may shrink in proportion to other items.
+		 * The default is 1 which allows items to shrink to fit into the space. 
+		 * Set this to 0 if you want to allow scrolling of the space. Use a negative
+		 * value to unset this property.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
+		 */
+		public function get shrink():Number {
+			return _shrink;
+		}
+		public function set shrink(value:Number):void {
+			_shrink = value;
+		}
+		
 		/**
 		 * 
 		 *  @flexjsignorecoercion org.apache.flex.core.ILayoutHost
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.8
 		 */
 		override public function layout():Boolean
 		{
 			COMPILE::SWF {
 				//return super.layout();
-				var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
-				var contentView:IParentIUIBase = layoutParent.contentView;
+				var layoutHost:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
+				var contentView:ILayoutObject = layoutHost.contentView;
 				
 				var n:Number = contentView.numElements;
 				if (n == 0) return false;
-				
-				trace("VerticalFlexLayout: contentView size: "+contentView.width+" x "+contentView.height+"; explicit: "+UIBase(contentView).explicitWidth+" x "+UIBase(contentView).explicitHeight);
-				
+								
 				var spacing:String = "none";
 				
 				var maxWidth:Number = 0;
 				var maxHeight:Number = 0;
+				var growCount:Number = 0;
+				var remainingHeight:Number = contentView.height;
 				var childData:Array = [];
 				
 				var ilc:ILayoutChild;
@@ -91,12 +144,20 @@ package org.apache.flex.html.beads.layouts
 				{
 					var child:IUIBase = contentView.getElementAt(i) as IUIBase;
 					if (child == null || !child.visible) {
-						childData.push({width:0, height:0, mt:0, ml:0, mr:0, mb:0, canAdjust:false});
+						childData.push({width:0, height:0, mt:0, ml:0, mr:0, mb:0, grow:0, canAdjust:false});
 						continue;
 					}
 					
 					ilc = child as ILayoutChild;
 					
+					var flexGrow:Object = ValuesManager.valuesImpl.getValue(child, "flex-grow");
+					var growValue:Number = -1;
+					if (flexGrow != null) {
+						growValue = Number(flexGrow);
+						if (!isNaN(growValue) && growValue > 0) growCount++;
+						else growValue = 0;
+					}
+					
 					var useWidth:Number = -1;
 					if (ilc) {
 						if (!isNaN(ilc.explicitWidth)) useWidth = ilc.explicitWidth;
@@ -109,9 +170,7 @@ package org.apache.flex.html.beads.layouts
 					if (ilc) {
 						if (!isNaN(ilc.explicitHeight)) useHeight = ilc.explicitHeight;
 						else if (!isNaN(ilc.percentHeight)) useHeight = contentView.height * (ilc.percentHeight/100.0);
-						else {
-							canAdjust = true;
-						}
+						else useHeight = ilc.height;
 					}
 					
 					margin = ValuesManager.valuesImpl.getValue(child, "margin");
@@ -131,7 +190,7 @@ package org.apache.flex.html.beads.layouts
 					if (maxWidth < useWidth) maxWidth = useWidth;
 					if (maxHeight < useHeight) maxHeight = useHeight;
 					
-					childData.push({width:useWidth, height:useHeight, mt:mt, ml:ml, mr:mr, mb:mb, canAdjust:canAdjust});
+					childData.push({width:useWidth, height:useHeight, mt:mt, ml:ml, mr:mr, mb:mb, grow:growValue, canAdjust:canAdjust});
 				}
 				
 				var xpos:Number = 0;
@@ -145,26 +204,34 @@ package org.apache.flex.html.beads.layouts
 					if (data.width == 0 || data.height == 0) continue;
 					
 					useWidth = (data.width < 0 ? maxWidth : data.width);
-					useHeight = (data.height < 0 ? maxHeight : data.height);
+					if (data.height > 0) {
+						if (data.grow > 0 && growCount > 0) {
+							useHeight = remainingHeight / growCount;
+						} else {
+							useHeight = data.height;
+						}
+					} else {
+						useHeight = child.height;
+					}
 					
 					ilc = child as ILayoutChild;
 					if (ilc) {
 						ilc.setX(xpos + data.ml);
 						ilc.setY(ypos + data.mt);
 						ilc.setWidth(useWidth - data.ml - data.mr);
-						if (data.height > 0) {
-							ilc.setHeight(useHeight - data.mt - data.mb);
+						if (useHeight > 0) {
+							ilc.setHeight(useHeight);
 						}
 					} else {
 						child.x = xpos + data.ml;
 						child.y = ypos + data.mt;
 						child.width = useWidth - data.ml - data.mr;
-						if (data.height > 0) {
-							child.height = useHeight - data.mt - data.mb;
+						if (useHeight > 0) {
+							child.height = useHeight;
 						}
 					}
 					
-					ypos += child.height + data.mt + data.mb;
+					ypos += useHeight + data.mt + data.mb;
 					
 					trace("VerticalFlexLayout: setting child "+i+" to "+child.width+" x "+child.height+" at "+child.x+", "+child.y);
 				}
@@ -178,11 +245,19 @@ package org.apache.flex.html.beads.layouts
 			
 			COMPILE::JS {
 				var viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
+				var contentView:ILayoutObject = viewBead.contentView;
+
+				contentView.element.style["display"] = "flex";
+				contentView.element.style["flex-flow"] = "column";
 				
-				// set the display on the contentView
-				viewBead.contentView.width = host.width;
-				viewBead.contentView.element.style["display"] = "flex";
-				viewBead.contentView.element.style["flex-flow"] = "column";
+				var n:int = contentView.numElements;
+				if (n == 0) return false;
+				
+				for(var i:int=0; i < n; i++) {
+					var child:UIBase = contentView.getElementAt(i) as UIBase;
+					if (grow >= 0) child.element.style["flex-grow"] = String(grow);
+					if (shrink >= 0) child.element.style["flex-shrink"] = String(shrink);
+				}
 				
 				return true;
 			}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
index b3f0638..b4f5443 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayout.as
@@ -22,6 +22,7 @@ package org.apache.flex.html.beads.layouts
 	import org.apache.flex.core.IBeadModel;
 	import org.apache.flex.core.ILayoutChild;
 	import org.apache.flex.core.ILayoutHost;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.ILayoutParent;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
@@ -93,176 +94,92 @@ package org.apache.flex.html.beads.layouts
 		{
 			COMPILE::SWF
 			{
-				var layoutParent:ILayoutHost = (host as ILayoutParent).getLayoutHost();
-				var contentView:IParentIUIBase = layoutParent ? layoutParent.contentView : IParentIUIBase(host);
-				var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+				var layoutHost:ILayoutHost = (host as ILayoutParent).getLayoutHost(); 
+				var contentView:ILayoutObject = layoutHost.contentView;
 				
-				var n:int = contentView.numElements;
-				var hasHorizontalFlex:Boolean;
+				var n:Number = contentView.numElements;
+				if (n == 0) return false;
+				
+				var maxWidth:Number = 0;
+				var maxHeight:Number = 0;
 				var hostSizedToContent:Boolean = host.isWidthSizedToContent();
-				var flexibleHorizontalMargins:Array = [];
+				var hostWidth:Number = hostSizedToContent ? 0 : contentView.width;
+				var hostHeight:Number = contentView.height;
+				
 				var ilc:ILayoutChild;
+				var data:Object;
+				var canAdjust:Boolean = false;
 				var marginLeft:Object;
 				var marginRight:Object;
 				var marginTop:Object;
 				var marginBottom:Object;
 				var margin:Object;
-				var maxWidth:Number = 0;
-				var cssValue:*;
-				// asking for contentView.width can result in infinite loop if host isn't sized already
-				var w:Number = hostSizedToContent ? 0 : contentView.width;
-				var h:Number = contentView.height;
 				
-				for (var i:int = 0; i < n; i++)
+				var paddingMetrics:Rectangle = CSSContainerUtils.getPaddingMetrics(host);
+				var borderMetrics:Rectangle = CSSContainerUtils.getBorderMetrics(host);
+				
+				var xpos:Number = borderMetrics.left + paddingMetrics.left;
+				var ypos:Number = borderMetrics.top + paddingMetrics.left;
+				
+				// First pass determines the data about the child.
+				for(var i:int=0; i < n; i++)
 				{
 					var child:IUIBase = contentView.getElementAt(i) as IUIBase;
 					if (child == null || !child.visible) continue;
-					ilc = child as ILayoutChild;
-					var left:Number = NaN;
-					cssValue = ValuesManager.valuesImpl.getValue(child, "left");
-					if (cssValue !== undefined)
-						left = CSSUtils.toNumber(cssValue);
-					var right:Number = NaN;
-					cssValue = ValuesManager.valuesImpl.getValue(child, "right");
-					if (cssValue !== undefined)
-						right = CSSUtils.toNumber(cssValue);
+					var top:Number = ValuesManager.valuesImpl.getValue(child, "top");
+					var bottom:Number = ValuesManager.valuesImpl.getValue(child, "bottom");
 					margin = ValuesManager.valuesImpl.getValue(child, "margin");
 					marginLeft = ValuesManager.valuesImpl.getValue(child, "margin-left");
 					marginTop = ValuesManager.valuesImpl.getValue(child, "margin-top");
 					marginRight = ValuesManager.valuesImpl.getValue(child, "margin-right");
 					marginBottom = ValuesManager.valuesImpl.getValue(child, "margin-bottom");
-					var ml:Number = CSSUtils.getLeftValue(marginLeft, margin, w);
-					var mr:Number = CSSUtils.getRightValue(marginRight, margin, w);
-					var mt:Number = CSSUtils.getTopValue(marginTop, margin, h);
-					var mb:Number = CSSUtils.getBottomValue(marginBottom, margin, h);
-					var lastmb:Number;
-					var yy:Number;
-					if (i == 0)
-					{
-						if (ilc)
-							ilc.setY(mt + padding.top);
-						else
-							child.y = mt + padding.top;
-					}
-					else
-					{
-						if (ilc)
-							ilc.setY(yy + Math.max(mt, lastmb));
-						else
-							child.y = yy + Math.max(mt, lastmb);
-					}
-					if (ilc)
-					{
-						if (!isNaN(ilc.percentHeight))
-							ilc.setHeight(contentView.height * ilc.percentHeight / 100, !isNaN(ilc.percentWidth));
-					}
-					lastmb = mb;
-					var marginObject:Object = {};
-					flexibleHorizontalMargins[i] = marginObject;
+					var ml:Number = CSSUtils.getLeftValue(marginLeft, margin, hostWidth);
+					var mr:Number = CSSUtils.getRightValue(marginRight, margin, hostWidth);
+					var mt:Number = CSSUtils.getTopValue(marginTop, margin, hostHeight);
+					var mb:Number = CSSUtils.getBottomValue(marginBottom, margin, hostHeight);
 					if (marginLeft == "auto")
-					{
 						ml = 0;
-						marginObject.marginLeft = marginLeft;
-						hasHorizontalFlex = true;
-					}
-					else
-					{
-						ml = Number(marginLeft);
-						if (isNaN(ml))
-						{
-							ml = 0;
-							marginObject.marginLeft = marginLeft;
-						}
-						else
-							marginObject.marginLeft = ml;
-					}
 					if (marginRight == "auto")
-					{
 						mr = 0;
-						marginObject.marginRight = marginRight;
-						hasHorizontalFlex = true;
-					}
-					else
-					{
-						mr = Number(marginRight);
-						if (isNaN(mr))
-						{
-							mr = 0;
-							marginObject.marginRight = marginRight;
-						}
-						else
-							marginObject.marginRight = mr;
-					}
-					if (!hostSizedToContent)
-					{
-						// if host is sized by parent,
-						// we can position and size children horizontally now
-						setPositionAndWidth(child, left, ml, padding.left, 
-							right, mr, padding.right, w);
-					}
-					else
-					{
-						if (!isNaN(left))
-						{
-							ml = left;
-							marginObject.left = ml;
-						}
-						if (!isNaN(right))
-						{
-							mr = right;
-							marginObject.right = mr;
+					
+					ilc = child as ILayoutChild;
+					
+					ypos += mt;
+					
+					var childXpos:Number = xpos + ml; // default x position
+					
+					if (!hostSizedToContent) {
+						var childWidth:Number = child.width;
+						if (ilc != null && !isNaN(ilc.percentWidth)) {
+							childWidth = (hostWidth-borderMetrics.left-borderMetrics.right-paddingMetrics.left-paddingMetrics.right) * ilc.percentWidth/100.0;
+							ilc.setWidth(childWidth - mr - ml);
 						}
-						maxWidth = Math.max(maxWidth, ml + child.width + mr);                    
+						// the following code center-aligns the child, but since HTML does not
+						// do this normally, this code is commented. (Use VerticalFlexLayout for
+						// horizontally centered elements in a vertical column).
+						//					childXpos = hostWidth/2 - (childWidth + ml + mr)/2;
 					}
-					yy = child.y + child.height;
-				}
-				if (hostSizedToContent)
-				{
-					for (i = 0; i < n; i++)
-					{
-						child = contentView.getElementAt(i) as IUIBase;
-						if (child == null || !child.visible) continue;
-						var obj:Object = flexibleHorizontalMargins[i];
-						setPositionAndWidth(child, obj.left, obj.marginLeft, padding.left,
-							obj.right, obj.marginRight, padding.right, maxWidth);
-					}
-				}
-				if (hasHorizontalFlex)
-				{
-					for (i = 0; i < n; i++)
-					{
-						child = contentView.getElementAt(i) as IUIBase;
-						if (child == null || !child.visible) continue;
-						ilc = child as ILayoutChild;
-						obj = flexibleHorizontalMargins[i];
-						if (hasHorizontalFlex)
-						{
-							if (ilc)
-							{
-								if (obj.marginLeft == "auto" && obj.marginRight == "auto")
-									ilc.setX(maxWidth - child.width / 2);
-								else if (obj.marginLeft == "auto")
-									ilc.setX(maxWidth - child.width - obj.marginRight - padding.right);                            
-							}
-							else
-							{
-								if (obj.marginLeft == "auto" && obj.marginRight == "auto")
-									child.x = maxWidth - child.width / 2;
-								else if (obj.marginLeft == "auto")
-									child.x = maxWidth - child.width - obj.marginRight - padding.right;
-							}
+					
+					if (ilc) {
+						ilc.setX(childXpos);
+						ilc.setY(ypos);
+						
+						if (!isNaN(ilc.percentHeight)) {
+							var newHeight:Number = (contentView.height-borderMetrics.top-borderMetrics.bottom-paddingMetrics.top-paddingMetrics.bottom) * ilc.percentHeight / 100;
+							ilc.setHeight(newHeight - mt - mb);
 						}
+						
+					} else {
+						child.x = childXpos;
+						child.y = ypos;
 					}
+					
+					ypos += child.height + mb;
 				}
 				
-				// Only return true if the contentView needs to be larger; that new
-				// size is stored in the model.
-				var sizeChanged:Boolean = true;
-				
 				host.dispatchEvent( new Event("layoutComplete") );
 				
-				return sizeChanged;
-				
+				return true;	
 			}
 			COMPILE::JS
 			{
@@ -271,11 +188,8 @@ package org.apache.flex.html.beads.layouts
 				var n:int;
 				
 				var viewBead:ILayoutHost = (host as ILayoutParent).getLayoutHost();
-				var contentView:IParentIUIBase = viewBead.contentView;
+				var contentView:IParentIUIBase = viewBead.contentView as IParentIUIBase;
 				children = contentView.internalChildren();
-				var scv:Object = getComputedStyle(host.positioner);
-				var hasWidth:Boolean = !host.isWidthSizedToContent();
-				var maxWidth:Number = 0;
 				n = children.length;
 				for (i = 0; i < n; i++)
 				{
@@ -289,76 +203,14 @@ package org.apache.flex.html.beads.layouts
 					{
 						// block elements don't measure width correctly so set to inline for a second
 						child.style.display = 'inline-block';
-						maxWidth = Math.max(maxWidth, child.offsetLeft + child.offsetWidth);
 						child.style.display = 'block';
 					}
 					child.flexjs_wrapper.dispatchEvent('sizeChanged');
 				}
-				if (!hasWidth && n > 0 && !isNaN(maxWidth)) {
-					var pl:String = scv['padding-left'];
-					var pr:String = scv['padding-right'];
-					var npl:int = parseInt(pl.substring(0, pl.length - 2), 10);
-					var npr:int = parseInt(pr.substring(0, pr.length - 2), 10);
-					maxWidth += npl + npr;
-					contentView.width = maxWidth;
-				}
 				host.dispatchEvent( new Event("layoutComplete") );
 				return true;
 			}
 		}
 		
-		COMPILE::SWF
-		private function setPositionAndWidth(child:IUIBase, left:Number, ml:Number, pl:Number,
-											 right:Number, mr:Number, pr:Number, w:Number):void
-		{
-			var widthSet:Boolean = false;
-			
-			var ww:Number = w;
-			var ilc:ILayoutChild = child as ILayoutChild;
-			if (!isNaN(left))
-			{
-                if (ilc)
-                    ilc.setX(left + ml);
-                else
-    				child.x = left + ml;
-				ww -= left + ml;
-			}
-			else 
-			{
-                if (ilc)
-                    ilc.setX(ml + pl);
-                else
-    				child.x = ml + pl;
-				ww -= ml + pl;
-			}
-			if (!isNaN(right))
-			{
-				if (!isNaN(left))
-				{
-					if (ilc)
-						ilc.setWidth(ww - right - mr, true);
-					else
-					{
-						child.width = ww - right - mr;
-						widthSet = true;
-					}
-				}
-				else
-                {
-                    if (ilc)
-                        ilc.setX(w - right - mr - child.width);
-                    else
-    					child.x = w - right - mr - child.width;
-                }
-			}
-			if (ilc)
-			{
-				if (!isNaN(ilc.percentWidth))
-					ilc.setWidth(w * ilc.percentWidth / 100, true);
-			}
-			if (!widthSet)
-				child.dispatchEvent(new Event("sizeChanged"));
-		}
-		
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/ButtonBarModel.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/ButtonBarModel.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/ButtonBarModel.as
new file mode 100644
index 0000000..9eb6a24
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/models/ButtonBarModel.as
@@ -0,0 +1,102 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.beads.models
+{
+	import org.apache.flex.core.IRollOverModel;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.EventDispatcher;
+			
+    /**
+     *  The ArraySelectionModel class is a selection model for
+     *  a dataProvider that is an array. It assumes that items
+     *  can be fetched from the dataProvider
+     *  dataProvider[index].  Other selection models
+     *  would support other kinds of data providers.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class ButtonBarModel extends ArraySelectionModel
+	{
+		public static const PIXEL_WIDTHS:Number = 0;
+		public static const PROPORTIONAL_WIDTHS:Number = 1;
+		public static const PERCENT_WIDTHS:Number = 2;
+		
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function ButtonBarModel()
+		{
+		}
+		
+		private var _buttonWidths:Array = null;
+		
+		/**
+		 *  The widths of each button. This property may be null (the default) in which
+		 *  case the buttons are equally sized. Or this array may contain values, one per
+		 *  button, which either indicate each button's width in pixels (set .widthType
+		 *  to ButtonBarModel.PIXEL_WIDTHS) or proportional to other buttons (set
+		 *  .widthType to ButtonBarModel.PROPORTIONAL_WIDTHS). The array can also contain
+		 *  specific percentages (set .widthType to ButtonBarModel.PERCENT_WIDTHS). If 
+		 *  this array is set, the number of entries must match the number of buttons. 
+		 *  However, any entry may be null to indicate the button's default size is to be used.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get buttonWidths():Array
+		{
+			return _buttonWidths;
+		}
+		public function set buttonWidths(value:Array):void
+		{
+			_buttonWidths = value;
+			dispatchEvent(new Event("buttonWidthsChanged"));
+		}
+		
+		private var _widthType:Number = ButtonBarModel.PIXEL_WIDTHS;
+		
+		/**
+		 * Indicates how to interpret the values of the buttonWidths array.
+		 * 
+		 * PIXEL_WIDTHS: all of the values are exact pixel widths (unless a value is null).
+		 * PROPORTIONAL_WIDTHS: all of the values are proportions. Use 1 to indicate normal, 2 to be 2x, etc. Use 0 (or null) to mean fixed default size.
+		 */
+		public function get widthType():Number
+		{
+			return _widthType;
+		}
+		public function set widthType(value:Number):void
+		{
+			_widthType = value;
+			dispatchEvent(new Event("widthTypeChanged"));
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ButtonBarButtonItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ButtonBarButtonItemRenderer.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ButtonBarButtonItemRenderer.as
index 1d320e3..0ff21d2 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ButtonBarButtonItemRenderer.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ButtonBarButtonItemRenderer.as
@@ -107,6 +107,7 @@ package org.apache.flex.html.supportClasses
 			var added:Boolean = false;
 			if (textButton == null) {
 				textButton = new TextButton();
+				textButton.percentWidth = 100;
 				
 				// listen for clicks on the button and translate them into
 				// an itemClicked event.

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/CheckBoxIcon.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/CheckBoxIcon.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/CheckBoxIcon.as
index 92c3f53..c9eeefb 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/CheckBoxIcon.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/CheckBoxIcon.as
@@ -82,7 +82,7 @@ package org.apache.flex.html.supportClasses
 			element = input as WrappedHTMLElement;
 
 			positioner = element;
-			positioner.style.position = 'relative';
+			//positioner.style.position = 'relative';
 
 			(element as WrappedHTMLElement).flexjs_wrapper = this;
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ClippingViewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ClippingViewport.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ClippingViewport.as
index 00b88c1..55cf95d 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ClippingViewport.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ClippingViewport.as
@@ -82,14 +82,14 @@ package org.apache.flex.html.supportClasses
         /**
          * @copy org.apache.flex.core.IViewport
          */
-		override public function layoutViewportAfterContentLayout():Size
+		override public function layoutViewportAfterContentLayout(contentSize:Size):void
 		{
             COMPILE::SWF
             {
-	             var contentSize:Size;
+	             //var contentSize:Size;
                 do
                 {
-                    contentSize = super.layoutViewportAfterContentLayout();
+                    /*contentSize = */super.layoutViewportAfterContentLayout(contentSize);
                     if (isNaN(viewportHeight))
                         viewportHeight = contentSize.height;
                     if (isNaN(viewportWidth))
@@ -123,13 +123,8 @@ package org.apache.flex.html.supportClasses
 
                 var rect:Rectangle = new Rectangle(0, 0, viewportWidth,viewportHeight);
                 contentArea.$sprite.scrollRect = rect;
-                return contentSize;
 
             }
-            COMPILE::JS
-            {
-                return new Size(contentView.width, contentView.height);
-            }
 
 		}
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ContainerContentArea.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ContainerContentArea.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ContainerContentArea.as
index 502211e..947a5f1 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ContainerContentArea.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ContainerContentArea.as
@@ -18,26 +18,22 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.supportClasses
 {
-	import org.apache.flex.core.IContentView;
 	import org.apache.flex.core.UIBase;
     import org.apache.flex.events.Event;
 	import org.apache.flex.events.IEventDispatcher;
-	
-	COMPILE::SWF {
-		import org.apache.flex.core.IChild;
-	}
+	import org.apache.flex.core.IChild;
+	import org.apache.flex.core.ILayoutObject;
 	
     /**
      *  The ContainerContentArea class implements the contentView for
-     *  a Container.  Container's don't always parent their children directly as
-     *  that makes it harder to handle scrolling.
+     *  a Container on the SWF platform.
      *  
      *  @langversion 3.0
      *  @playerversion Flash 10.2
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
      */
-	public class ContainerContentArea extends UIBase implements IContentView
+	public class ContainerContentArea extends UIBase implements ILayoutObject
 	{
         /**
          *  Constructor.
@@ -67,24 +63,24 @@ package org.apache.flex.html.supportClasses
 		 *  @playerversion AIR 2.6
 		 *  @productversion FlexJS 0.0
 		 */
-		public function removeAllElements():void
-		{
-			COMPILE::SWF
-			{
-				var n:Number = numElements;
-				for (var i:Number = n-1; i >= 0; i--) {
-					var child:IChild = getElementAt(i);
-					removeElement(child,false);
-				}
-				$sprite.removeChildren(0);
-			}
-			COMPILE::JS
-			{
-				while (element.hasChildNodes()) 
-				{
-					element.removeChild(element.lastChild);
-				}
-			}
-		}
+//		public function removeAllElements():void
+//		{
+//			COMPILE::SWF
+//			{
+//				var n:Number = numElements;
+//				for (var i:Number = n-1; i >= 0; i--) {
+//					var child:IChild = getElementAt(i);
+//					removeElement(child,false);
+//				}
+//				$sprite.removeChildren(0);
+//			}
+//			COMPILE::JS
+//			{
+//				while (element.hasChildNodes()) 
+//				{
+//					element.removeChild(element.lastChild);
+//				}
+//			}
+//		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataContentBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataContentBead.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataContentBead.as
new file mode 100644
index 0000000..72db824
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataContentBead.as
@@ -0,0 +1,124 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.supportClasses
+{	
+	import org.apache.flex.core.IBead;
+	
+    import org.apache.flex.core.IChild;
+    import org.apache.flex.core.IContentView;
+    import org.apache.flex.core.IItemRenderer;
+    import org.apache.flex.core.IItemRendererParent;
+	import org.apache.flex.core.IRollOverModel;
+	import org.apache.flex.core.ISelectionModel;
+	import org.apache.flex.core.IStrand;
+    import org.apache.flex.core.UIBase;
+	import org.apache.flex.events.IEventDispatcher;
+	import org.apache.flex.events.Event;
+	import org.apache.flex.events.ItemAddedEvent;
+	import org.apache.flex.events.ItemClickedEvent;
+	import org.apache.flex.events.ItemRemovedEvent;
+
+    /**
+     *  The DataGroup class is the IItemRendererParent used internally
+     *  by org.apache.flex.html.List class.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class DataContent implements IBead
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function DataContent()
+		{
+			super();
+		}
+		
+		/**
+		 * @private
+		 */
+		override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+		{
+			super.addElement(c, dispatchEvent);
+			
+			var newEvent:ItemAddedEvent = new ItemAddedEvent("itemAdded");
+			newEvent.item = c;
+			
+			var strand:IEventDispatcher = parent as IEventDispatcher;
+			strand.dispatchEvent(newEvent);
+		}
+		
+		/**
+		 * @private
+		 */
+		override public function removeElement(c:IChild, dispatchEvent:Boolean = true):void
+		{	
+			super.removeElement(c, dispatchEvent);
+			
+			var newEvent:ItemRemovedEvent = new ItemRemovedEvent("itemRemoved");
+			newEvent.item = c;
+			
+			var strand:IEventDispatcher = parent as IEventDispatcher;
+			strand.dispatchEvent(newEvent);
+		}
+
+        /**
+         *  @copy org.apache.flex.core.IItemRendererParent#getItemRendererForIndex()
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function getItemRendererForIndex(index:int):IItemRenderer
+        {
+			if (index < 0 || index >= numElements) return null;
+            return getElementAt(index) as IItemRenderer;
+        }
+		
+		/**
+		 *  Refreshes the itemRenderers. Useful after a size change by the data group.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+		 */
+		public function updateAllItemRenderers():void
+		{
+			var n:Number = numElements;
+			for (var i:Number = 0; i < n; i++)
+			{
+				var renderer:DataItemRenderer = getItemRendererForIndex(i) as DataItemRenderer;
+				if (renderer) {
+					renderer.setWidth(this.width,true);
+					renderer.adjustSize();
+				}
+			}
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridButtonBarButtonItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridButtonBarButtonItemRenderer.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridButtonBarButtonItemRenderer.as
index f6663a5..645a393 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridButtonBarButtonItemRenderer.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGridButtonBarButtonItemRenderer.as
@@ -66,6 +66,8 @@ package org.apache.flex.html.supportClasses
 			var added:Boolean = false;
 			if (textButton == null) {
 				textButton = new DataGridButtonBarTextButton();
+				textButton.percentWidth = 100;
+				textButton.percentHeight = 100;
 				
 				// listen for clicks on the button and translate them into
 				// an itemClicked event.
@@ -77,5 +79,14 @@ package org.apache.flex.html.supportClasses
 			
 			if (added) addElement(textButton);
 		}
+		
+		/**
+		 * @private
+		 */
+		COMPILE::JS
+		override public function adjustSize():void
+		{
+			// not neeed for JS platform
+		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGroup.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGroup.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGroup.as
index f7ebf01..4b2aad1 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGroup.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataGroup.as
@@ -41,7 +41,7 @@ package org.apache.flex.html.supportClasses
      *  @playerversion AIR 2.6
      *  @productversion FlexJS 0.0
      */
-	public class DataGroup extends ContainerContentArea implements IItemRendererParent, IContentView
+	public class DataGroup extends ContainerContentArea implements IContentView
 	{
         /**
          *  Constructor.
@@ -118,5 +118,13 @@ package org.apache.flex.html.supportClasses
 				}
 			}
 		}
+		
+		/**
+		 * Removes all of the elements
+		 */
+		public function removeAllElements():void
+		{
+			// TBD
+		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataItemRenderer.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataItemRenderer.as
index 7de2389..c526977 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataItemRenderer.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/DataItemRenderer.as
@@ -163,7 +163,7 @@ package org.apache.flex.html.supportClasses
 		{
 			element = document.createElement('div') as WrappedHTMLElement;
 			positioner = element;
-			positioner.style.position = 'relative';
+			//positioner.style.position = 'relative';
 
 			element.flexjs_wrapper = this;
 			className = 'DataItemRenderer';

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/GroupContentProxy.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/GroupContentProxy.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/GroupContentProxy.as
new file mode 100644
index 0000000..6212ba1
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/GroupContentProxy.as
@@ -0,0 +1,91 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.supportClasses
+{
+	import org.apache.flex.core.IContentProxy;
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.IChild;
+	
+	COMPILE::JS {
+		import org.apache.flex.core.WrappedHTMLElement;
+	}
+	
+    /**
+     *  The ContainerContentArea class implements the contentView for
+     *  a Container on the SWF platform.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class GroupContentProxy implements IContentProxy
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function GroupContentProxy(host:Object)
+		{
+			super();
+			_host = host;
+		}
+		
+		private var _host:Object;
+		
+		public function set host(value:Object):void
+		{
+			_host = value;
+		}
+		public function get host():Object
+		{
+			return _host;
+		}
+		
+		public function get numElements():Number
+		{
+			return (host as UIBase).numElements;
+		}
+		
+		public function getElementAt(index):IChild
+		{
+			return (host as UIBase).getElementAt(index);
+		}
+		
+		public function get width():Number
+		{
+			return (host as UIBase).width;
+		}
+		
+		public function get height():Number
+		{
+			return (host as UIBase).height;
+		}
+		
+		COMPILE::JS
+		public function get element():WrappedHTMLElement
+		{
+			return (host as UIBase).element;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/MXMLItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/MXMLItemRenderer.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/MXMLItemRenderer.as
index cacac1e..f70403e 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/MXMLItemRenderer.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/MXMLItemRenderer.as
@@ -20,6 +20,7 @@ package org.apache.flex.html.supportClasses
 {
 	import org.apache.flex.core.ILayoutHost;
 	import org.apache.flex.core.ILayoutParent;
+	import org.apache.flex.core.ILayoutObject;
 	import org.apache.flex.core.IStrand;
 	import org.apache.flex.core.IBead;
 	import org.apache.flex.core.IBeadLayout;
@@ -35,7 +36,7 @@ package org.apache.flex.html.supportClasses
 	 *  @playerversion AIR 2.6
 	 *  @productversion FlexJS 0.0
 	 */
-	public class MXMLItemRenderer extends DataItemRenderer implements ILayoutParent, ILayoutHost, IStrand
+	public class MXMLItemRenderer extends DataItemRenderer implements ILayoutParent, ILayoutHost, IStrand, ILayoutObject
 	{
 		/**
 		 *  constructor.
@@ -65,7 +66,7 @@ package org.apache.flex.html.supportClasses
 			return this; 
 		}
 		
-		public function get contentView():IParentIUIBase
+		public function get contentView():ILayoutObject
 		{
 			return this;
 		}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/PanelLayoutProxy.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/PanelLayoutProxy.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/PanelLayoutProxy.as
new file mode 100644
index 0000000..5c40443
--- /dev/null
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/PanelLayoutProxy.as
@@ -0,0 +1,132 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.html.supportClasses
+{
+	import org.apache.flex.core.UIBase;
+	import org.apache.flex.core.ILayoutObject;
+	import org.apache.flex.core.IChild;
+	import org.apache.flex.events.IEventDispatcher;
+	
+	import org.apache.flex.html.Panel;
+	
+	COMPILE::JS {
+		import org.apache.flex.core.WrappedHTMLElement;
+	}
+	
+    /**
+     *  The PanelLayoutProxy class is used by Panel in order for layouts to operate
+	 *  on the Panel itself. If Panel were being used, its numElements, getElementAt, etc.
+	 *  functions would actually redirect to its Container content. In order for a layout
+	 *  to work on the Panel directly (its TitleBar, Container, and ControlBar children),
+	 *  this proxy is used which will invoke the Panel's $numElements, $getElementAt, etc
+	 *  functions.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+	public class PanelLayoutProxy implements ILayoutObject
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+		public function PanelLayoutProxy(host:Object)
+		{
+			super();
+			_host = host;
+		}
+		
+		private var _host:Object;
+		
+		public function get host():Object
+		{
+			return _host;
+		}
+				
+		/**
+		 *  The width of the bounding box.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get width():Number {
+			return (host as Panel).width;
+		}
+		
+		/**
+		 * The height of the bounding box.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get height():Number {
+			return (host as Panel).height;
+		}
+		
+		/**
+		 *  The number of elements in the parent.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function get numElements():int
+		{
+			return (host as Panel).$numElements;
+		}
+		
+		/**
+		 *  Get a component from the parent.
+		 * 
+		 *  @param c The index of the subcomponent.
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function getElementAt(index:int):IChild
+		{
+			return (host as Panel).$getElementAt(index);
+		}
+		
+		COMPILE::JS
+		public function get somethingelse():WrappedHTMLElement
+		{
+			return (host as Panel).element;
+		}
+			
+		COMPILE::JS
+		public function get element():WrappedHTMLElement
+		{
+			return (host as Panel).element;
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/RadioButtonIcon.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/RadioButtonIcon.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/RadioButtonIcon.as
index 119400f..3c29ae5 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/RadioButtonIcon.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/RadioButtonIcon.as
@@ -101,7 +101,7 @@ package org.apache.flex.html.supportClasses
 			element = input as WrappedHTMLElement;
 
 			positioner = element;
-			positioner.style.position = 'relative';
+			//positioner.style.position = 'relative';
 
 			(element as WrappedHTMLElement).flexjs_wrapper = this;
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
index 74dd040..4d207a2 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/ScrollingViewport.as
@@ -18,12 +18,9 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.html.supportClasses
 {
-    COMPILE::SWF
-    {
-        import flash.geom.Rectangle;
-    }
 	import org.apache.flex.core.IBead;
 	import org.apache.flex.core.IBeadLayout;
+	import org.apache.flex.core.IContainer;
 	import org.apache.flex.core.IContentViewHost;
 	import org.apache.flex.core.IParentIUIBase;
 	import org.apache.flex.core.IStrand;
@@ -33,12 +30,15 @@ package org.apache.flex.html.supportClasses
     COMPILE::SWF
     {
         import org.apache.flex.core.IViewportScroller;
+		import org.apache.flex.utils.CSSContainerUtils;
+		import flash.geom.Rectangle;
     }
 	import org.apache.flex.core.UIBase;
 	import org.apache.flex.events.Event;
 	import org.apache.flex.geom.Size;
 	import org.apache.flex.html.beads.ScrollBarView;
 	import org.apache.flex.html.beads.models.ScrollBarModel;
+	import org.apache.flex.geom.Rectangle;
 
 	/**
 	 * The ScrollingViewport extends the Viewport class by adding horizontal and
@@ -51,6 +51,66 @@ package org.apache.flex.html.supportClasses
 	 *  @playerversion AIR 2.6
 	 *  @productversion FlexJS 0.0
 	 */
+	COMPILE::JS
+	public class ScrollingViewport extends Viewport implements IBead, IViewport
+	{
+		/**
+		 * Constructor
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function ScrollingViewport()
+		{
+		}
+		
+		public function get verticalScrollPosition():Number
+		{
+			return this.contentView.positioner.scrollTop;
+		}
+		public function set verticalScrollPosition(value:Number):void
+		{
+			this.contentView.positioner.scrollTop = value;
+		}
+		
+		public function get horizontalScrollPosition():Number
+		{
+			return this.contentView.positioner.scrollLeft;
+		}
+		public function set horizontalScrollPosition(value:Number):void
+		{
+			this.contentView.positioner.scrollLeft = value;
+		}
+		
+		/**
+		 * @flexjsignorecoercion HTMLElement 
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			(value as UIBase).element.style.overflow = "auto";
+		}
+		
+		/**
+		* @copy org.apache.flex.core.IViewport
+		*/
+		override public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
+		{
+			// does nothing for the JS platform
+		}
+		
+		/**
+		 * @copy org.apache.flex.core.IViewport
+		 */
+		override public function layoutViewportAfterContentLayout(contentSize:Size):void
+		{
+			// does nothing for the JS platform
+		}
+	}
+	
+	COMPILE::SWF
 	public class ScrollingViewport extends Viewport implements IBead, IViewport
 	{
 		/**
@@ -65,86 +125,42 @@ package org.apache.flex.html.supportClasses
 		{
 		}
 
-        COMPILE::SWF
 		private var _verticalScroller:ScrollBar;
 
-        COMPILE::SWF
 		public function get verticalScroller():IViewportScroller
 		{
 			return _verticalScroller;
 		}
 
-        COMPILE::SWF
 		private var _horizontalScroller:ScrollBar
 
-        COMPILE::SWF
 		public function get horizontalScroller():IViewportScroller
 		{
 			return _horizontalScroller;
 		}
 
-        COMPILE::SWF
         private var _verticalScrollPosition:Number = 0;
 
         public function get verticalScrollPosition():Number
         {
-            COMPILE::SWF
-            {
-                return _verticalScrollPosition;
-            }
-            COMPILE::JS
-            {
-                return this.contentView.positioner.scrollTop;
-            }
+			return _verticalScrollPosition;
         }
         public function set verticalScrollPosition(value:Number):void
         {
-            COMPILE::SWF
-            {
-                _verticalScrollPosition = value;
-                handleVerticalScrollChange();
-            }
-            COMPILE::JS
-            {
-                this.contentView.positioner.scrollTop = value;
-            }
+			_verticalScrollPosition = value;
+			handleVerticalScrollChange();
         }
 
-        COMPILE::SWF
         private var _horizontalScrollPosition:Number = 0;
 
         public function get horizontalScrollPosition():Number
         {
-            COMPILE::SWF
-            {
-                return _horizontalScrollPosition;
-            }
-            COMPILE::JS
-            {
-                return this.contentView.positioner.scrollLeft;
-            }
+			return _horizontalScrollPosition;
         }
         public function set horizontalScrollPosition(value:Number):void
         {
-            COMPILE::SWF
-            {
-                _horizontalScrollPosition = value;
-                handleHorizontalScrollChange();
-            }
-            COMPILE::JS
-            {
-                this.contentView.positioner.scrollLeft = value;
-            }
-        }
-
-        /**
-         * @flexjsignorecoercion HTMLElement 
-         */
-        COMPILE::JS
-        override public function set strand(value:IStrand):void
-        {
-            super.strand = value;
-            (contentView.element as HTMLElement).style.overflow = 'auto';
+			_horizontalScrollPosition = value;
+			handleHorizontalScrollChange();
         }
 
         private var viewportWidth:Number;
@@ -155,127 +171,85 @@ package org.apache.flex.html.supportClasses
          */
         override public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
         {
-           super.layoutViewportBeforeContentLayout(width, height);
-           viewportWidth = width;
-           viewportHeight = height;
+           	super.layoutViewportBeforeContentLayout(width, height);
+           	viewportWidth = width;
+           	viewportHeight = height;
         }
 
         /**
          * @copy org.apache.flex.core.IViewport
          */
-		override public function layoutViewportAfterContentLayout():Size
+		override public function layoutViewportAfterContentLayout(contentSize:Size):void
 		{
-            COMPILE::SWF
-            {
-                var hadV:Boolean = _verticalScroller != null && _verticalScroller.visible;
-                var hadH:Boolean = _horizontalScroller != null && _horizontalScroller.visible;
-                var contentSize:Size;
-                do
-                {
-                    contentSize = super.layoutViewportAfterContentLayout();
-                    if (isNaN(viewportHeight))
-                        viewportHeight = contentSize.height;
-                    if (isNaN(viewportWidth))
-                        viewportWidth = contentSize.width;
-
-                    var host:UIBase = UIBase(_strand);
-                    var visibleWidth:Number;
-                    var visibleHeight:Number;
-                    var needV:Boolean = contentSize.height > viewportHeight;
-                    var needH:Boolean = contentSize.width > viewportWidth;
-
-                    if (needV)
-                    {
-                        if (_verticalScroller == null) {
-                            _verticalScroller = createVerticalScrollBar();
-                            (host as IContentViewHost).strandChildren.addElement(_verticalScroller);
-                        }
-                    }
-                    if (needH)
-                    {
-                        if (_horizontalScroller == null) {
-                            _horizontalScroller = createHorizontalScrollBar();
-                            (host as IContentViewHost).strandChildren.addElement(_horizontalScroller);
-                        }
-                    }
-
-                    if (needV)
-                    {
-                        _verticalScroller.visible = true;
-                        _verticalScroller.x = contentArea.x + viewportWidth - _verticalScroller.width;
-                        _verticalScroller.y = contentArea.y;
-                        _verticalScroller.setHeight(viewportHeight - (needH ? _horizontalScroller.height : 0), true);
-                        visibleWidth = _verticalScroller.x;
-                    }
-                    else if (_verticalScroller)
-                        _verticalScroller.visible = false;
-
-                    if (needH)
-                    {
-                        _horizontalScroller.visible = true;
-                        _horizontalScroller.x = contentArea.x;
-                        _horizontalScroller.y = contentArea.y + viewportHeight - _horizontalScroller.height;
-                        _horizontalScroller.setWidth(viewportWidth - (needV ? _verticalScroller.width : 0), true);
-                        visibleHeight = _horizontalScroller.y;
-                    }
-
-                    var needsLayout:Boolean = false;
-                    // resize content area if needed to get out from under scrollbars
-                    if (!isNaN(visibleWidth) || !isNaN(visibleHeight))
-                    {
-                        if (!isNaN(visibleWidth))
-                            needsLayout = visibleWidth != contentView.width;
-                        if (!isNaN(visibleHeight))
-                            needsLayout = visibleHeight != contentView.height;
-                        if (!isNaN(visibleWidth) && !isNaN(visibleHeight))
-                            contentArea.setWidthAndHeight(visibleWidth, visibleHeight, false);
-                        else if (!isNaN(visibleWidth))
-                            contentArea.setWidth(visibleWidth, false);
-                        else if (!isNaN(visibleHeight))
-                            contentArea.setHeight(visibleHeight, false);
-                    }
-                    if (needsLayout)
-                    {
-                        var layout:IBeadLayout = host.getBeadByType(IBeadLayout) as IBeadLayout;
-                        layout.layout();
-                    }
-                } while (needsLayout && (needV != hadV || needH == hadH));
-                if (_verticalScroller)
-                {
-                    ScrollBarModel(_verticalScroller.model).maximum = contentSize.height;
-                    ScrollBarModel(_verticalScroller.model).pageSize = contentArea.height;
-                    ScrollBarModel(_verticalScroller.model).pageStepSize = contentArea.height;
-                    if (contentSize.height > contentArea.height &&
-                        (contentSize.height - contentArea.height) < _verticalScrollPosition)
-                        _verticalScrollPosition = contentSize.height - contentArea.height;
-                }
-                if (_horizontalScroller)
-                {
-                    ScrollBarModel(_horizontalScroller.model).maximum = contentSize.width;
-                    ScrollBarModel(_horizontalScroller.model).pageSize = contentArea.width;
-                    ScrollBarModel(_horizontalScroller.model).pageStepSize = contentArea.width;
-                    if (contentSize.width > contentArea.width &&
-                        (contentSize.width - contentArea.width) < _horizontalScrollPosition)
-                        _horizontalScrollPosition = contentSize.width - contentArea.width;
-                }
-
-                var rect:Rectangle = new Rectangle(_horizontalScrollPosition, _verticalScrollPosition,
-                    (_verticalScroller != null && _verticalScroller.visible) ?
-                    _verticalScroller.x : viewportWidth,
-                    (_horizontalScroller != null && _horizontalScroller.visible) ?
-                    _horizontalScroller.y : viewportHeight);
-                contentArea.$sprite.scrollRect = rect;
-                return contentSize;
-
-            }
-            COMPILE::JS
-            {
-                return new Size(contentView.width, contentView.height);
-            }
-
+			var hadV:Boolean = _verticalScroller != null && _verticalScroller.visible;
+			var hadH:Boolean = _horizontalScroller != null && _horizontalScroller.visible;
+			
+			var hostWidth:Number = UIBase(_strand).width;
+			var hostHeight:Number = UIBase(_strand).height;
+			
+			var needV:Boolean = contentSize.height > viewportHeight;
+			var needH:Boolean = contentSize.width > viewportWidth;
+			
+			if (needV)
+			{
+				if (_verticalScroller == null) {
+					_verticalScroller = createVerticalScrollBar();
+					(_strand as IContainer).$addElement(_verticalScroller);
+				}
+			}
+			if (needH)
+			{
+				if (_horizontalScroller == null) {
+					_horizontalScroller = createHorizontalScrollBar();
+					(_strand as IContainer).$addElement(_horizontalScroller);
+				}
+			}
+			
+			if (needV)
+			{
+				_verticalScroller.visible = true;
+				_verticalScroller.x = hostWidth - _verticalScroller.width;
+				_verticalScroller.y = 0;
+				_verticalScroller.setHeight(hostHeight - (needH ? _horizontalScroller.height : 0), true);
+				
+				ScrollBarModel(_verticalScroller.model).maximum = contentSize.height;// + paddingMetrics.top + paddingMetrics.bottom;
+				ScrollBarModel(_verticalScroller.model).pageSize = contentArea.height;
+				ScrollBarModel(_verticalScroller.model).pageStepSize = contentArea.height;
+				
+				if (contentSize.height > contentArea.height &&
+					(contentSize.height - contentArea.height) < _verticalScrollPosition)
+					_verticalScrollPosition = contentSize.height - contentArea.height;
+			}
+			else if (_verticalScroller) {
+				_verticalScroller.visible = false;
+			}
+			
+			if (needH)
+			{
+				_horizontalScroller.visible = true;
+				_horizontalScroller.x = 0;
+				_horizontalScroller.y = hostHeight - _horizontalScroller.height;
+				_horizontalScroller.setWidth(hostWidth - (needV ? _verticalScroller.width : 0), true);
+				
+				ScrollBarModel(_horizontalScroller.model).maximum = contentSize.width;// + paddingMetrics.left + paddingMetrics.right;
+				ScrollBarModel(_horizontalScroller.model).pageSize = contentArea.width;
+				ScrollBarModel(_horizontalScroller.model).pageStepSize = contentArea.width;
+				
+				if (contentSize.width > contentArea.width &&
+					(contentSize.width - contentArea.width) < _horizontalScrollPosition)
+					_horizontalScrollPosition = contentSize.width - contentArea.width;
+			} 
+			else if (_horizontalScroller) {
+				_horizontalScroller.visible = false;
+			}
+			
+			var rect:flash.geom.Rectangle = new flash.geom.Rectangle(_horizontalScrollPosition, _verticalScrollPosition,
+				(_verticalScroller != null && _verticalScroller.visible) ? _verticalScroller.x : hostWidth,
+				(_horizontalScroller != null && _horizontalScroller.visible) ? _horizontalScroller.y : hostHeight);
+			
+			contentArea.$sprite.scrollRect = rect;
 		}
 
-		COMPILE::SWF
 		private function createVerticalScrollBar():ScrollBar
 		{
 			var vsbm:ScrollBarModel = new ScrollBarModel();
@@ -293,7 +267,6 @@ package org.apache.flex.html.supportClasses
 			return vsb;
 		}
 
-        COMPILE::SWF
 		private function createHorizontalScrollBar():ScrollBar
 		{
 			var hsbm:ScrollBarModel = new ScrollBarModel();
@@ -311,31 +284,28 @@ package org.apache.flex.html.supportClasses
 			return hsb;
 		}
 
-        COMPILE::SWF
 		private function handleVerticalScroll(event:Event):void
 		{
 			var host:UIBase = UIBase(_strand);
 			var vpos:Number = ScrollBarModel(_verticalScroller.model).value;
-			var rect:Rectangle = contentArea.$sprite.scrollRect;
+			var rect:flash.geom.Rectangle = contentArea.$sprite.scrollRect;
 			rect.y = vpos;
 			contentArea.$sprite.scrollRect = rect;
 
 			_verticalScrollPosition = vpos;
 		}
 
-        COMPILE::SWF
 		private function handleHorizontalScroll(event:Event):void
 		{
 			var host:UIBase = UIBase(_strand);
 			var hpos:Number = ScrollBarModel(_horizontalScroller.model).value;
-			var rect:Rectangle = contentArea.$sprite.scrollRect;
+			var rect:flash.geom.Rectangle = contentArea.$sprite.scrollRect;
 			rect.x = hpos;
 			contentArea.$sprite.scrollRect = rect;
 
 			_horizontalScrollPosition = hpos;
 		}
 
-        COMPILE::SWF
 		private function handleVerticalScrollChange():void
 		{
 			if (_verticalScroller) {
@@ -343,7 +313,6 @@ package org.apache.flex.html.supportClasses
 			}
 		}
 
-        COMPILE::SWF
 		private function handleHorizontalScrollChange():void
 		{
 			if (_horizontalScroller) {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/StringItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/StringItemRenderer.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/StringItemRenderer.as
index aa00f50..cea7673 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/StringItemRenderer.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/StringItemRenderer.as
@@ -22,17 +22,17 @@ package org.apache.flex.html.supportClasses
     {
         import flash.text.TextFieldAutoSize;
         import flash.text.TextFieldType;
-        
-        import org.apache.flex.core.CSSTextField;            
+
+        import org.apache.flex.core.CSSTextField;
     }
     COMPILE::JS
     {
         import org.apache.flex.core.WrappedHTMLElement;
-        import org.apache.flex.html.beads.controllers.ItemRendererMouseController;        
+        import org.apache.flex.html.beads.controllers.ItemRendererMouseController;
     }
     import org.apache.flex.events.Event;
     import org.apache.flex.html.beads.ITextItemRenderer;
-    
+
 	/**
 	 *  The StringItemRenderer class displays data in string form using the data's toString()
 	 *  function.
@@ -55,20 +55,20 @@ package org.apache.flex.html.supportClasses
 		public function StringItemRenderer()
 		{
 			super();
-			
+
             COMPILE::SWF
             {
                 textField = new CSSTextField();
                 textField.type = TextFieldType.DYNAMIC;
                 textField.autoSize = TextFieldAutoSize.LEFT;
                 textField.selectable = false;
-                textField.parentDrawsBackground = true;         
+                textField.parentDrawsBackground = true;
             }
 		}
-		
+
         COMPILE::SWF
 		public var textField:CSSTextField;
-		
+
 		/**
 		 * @private
 		 */
@@ -76,12 +76,12 @@ package org.apache.flex.html.supportClasses
 		override public function addedToParent():void
 		{
 			super.addedToParent();
-			
+
 			$sprite.addChild(textField);
 
 			adjustSize();
 		}
-		
+
 		/**
 		 * @private
 		 */
@@ -89,14 +89,14 @@ package org.apache.flex.html.supportClasses
 		override public function adjustSize():void
 		{
 			var cy:Number = height/2;
-			
+
 			textField.x = 0;
 			textField.y = cy - textField.height/2;
 			textField.width = width;
-			
+
 			updateRenderer();
 		}
-		
+
 		/**
 		 *  The text currently displayed by the itemRenderer instance.
 		 *
@@ -109,29 +109,29 @@ package org.apache.flex.html.supportClasses
 		{
             COMPILE::SWF
             {
-                return textField.text;                    
+                return textField.text;
             }
             COMPILE::JS
             {
                 return this.element.innerHTML;
             }
 		}
-		
+
 		public function set text(value:String):void
 		{
             COMPILE::SWF
             {
-                textField.text = value;                    
+                textField.text = value;
             }
             COMPILE::JS
             {
                 this.element.innerHTML = value;
             }
 		}
-		
+
 		/**
 		 *  Sets the data value and uses the String version of the data for display.
-		 * 
+		 *
 		 *  @param Object data The object being displayed by the itemRenderer instance.
 		 *
 		 *  @langversion 3.0
@@ -146,33 +146,33 @@ package org.apache.flex.html.supportClasses
 			if (labelField) text = String(value[labelField]);
 			else if (dataField) text = String(value[dataField]);
 			else text = String(value);
-            
+
             this.text = text;
 		}
-		
+
         COMPILE::JS
         private var controller:ItemRendererMouseController;
-            
+
         COMPILE::JS
         private var backgroundView:WrappedHTMLElement;
-        
+
         /**
          * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
          */
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
-        {            
+        {
             element = document.createElement('span') as WrappedHTMLElement;
             positioner = element;
-            positioner.style.position = 'relative';
-            
+            //positioner.style.position = 'relative';
+
             element.flexjs_wrapper = this;
             className = 'StringItemRenderer';
-            
+
             // itemRenderers should provide something for the background to handle
             // the selection and highlight
             backgroundView = element;
-            
+
             return element;
         }
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/Viewport.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/Viewport.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/Viewport.as
index 285282a..b155e44 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/Viewport.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/supportClasses/Viewport.as
@@ -32,10 +32,15 @@ package org.apache.flex.html.supportClasses
     import org.apache.flex.geom.Size;
 	import org.apache.flex.html.beads.models.ScrollBarModel;
     import org.apache.flex.utils.CSSContainerUtils;
+	COMPILE::SWF
+	{
+		import flash.geom.Rectangle;
+	}
 
     /**
      * A Viewport is the area of a Container set aside for displaying
-     * content and any scrolling controls.
+     * content. If the content exceeds the visible area of the viewport
+	 * it will be clipped or hidden.
 	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
@@ -76,6 +81,7 @@ package org.apache.flex.html.supportClasses
         /**
          * @flexjsignorecoercion Class
          */
+		COMPILE::SWF
 		public function set strand(value:IStrand):void
 		{
 			_strand = value;
@@ -86,6 +92,17 @@ package org.apache.flex.html.supportClasses
                 contentArea = new c() as UIBase;
             }
 		}
+		
+		/**
+		 * @flexjsignorecoercion Class
+		 */
+		COMPILE::JS
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			contentArea = value as UIBase;
+			contentArea.element.style.overflow = "hidden";
+		}
 
         /**
          * @copy org.apache.flex.core.IViewport#setPosition()
@@ -97,8 +114,10 @@ package org.apache.flex.html.supportClasses
          */
         public function setPosition(x:Number, y:Number):void
         {
-            contentArea.x = x;
-            contentArea.y = y;
+			COMPILE::SWF {
+            	contentArea.x = x;
+            	contentArea.y = y;
+			}
         }
 
         /**
@@ -111,10 +130,12 @@ package org.apache.flex.html.supportClasses
          */
 		public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
 		{
+			COMPILE::SWF {
 			if (!isNaN(width))
                 contentArea.width = width;
             if (!isNaN(height))
                 contentArea.height = height;
+			}
 		}
 
         /**
@@ -125,26 +146,17 @@ package org.apache.flex.html.supportClasses
 	     *  @playerversion AIR 2.6
 	     *  @productversion FlexJS 0.0
          */
-		public function layoutViewportAfterContentLayout():Size
+		public function layoutViewportAfterContentLayout(contentSize:Size):void
 		{
-            // pass through all of the children and determine the maxWidth and maxHeight
-            // note: this is not done on the JavaScript side because the browser handles
-            // this automatically.
-            var maxWidth:Number = 0;
-            var maxHeight:Number = 0;
-            var num:Number = contentArea.numElements;
-
-            for (var i:int=0; i < num; i++) {
-                var child:IUIBase = contentArea.getElementAt(i) as IUIBase;
-                if (child == null || !child.visible) continue;
-                var childXMax:Number = child.x + child.width;
-                var childYMax:Number = child.y + child.height;
-                maxWidth = Math.max(maxWidth, childXMax);
-                maxHeight = Math.max(maxHeight, childYMax);
-            }
-
-            var padding:Rectangle = CSSContainerUtils.getPaddingMetrics(this._strand);
-            return new Size(maxWidth + padding.right, maxHeight + padding.bottom);
+			COMPILE::SWF {
+				var hostWidth:Number = UIBase(_strand).width;
+				var hostHeight:Number = UIBase(_strand).height;
+				
+				var rect:flash.geom.Rectangle = new flash.geom.Rectangle(0, 0, hostWidth, hostHeight);
+				contentArea.$sprite.scrollRect = rect;
+				
+				return;
+			}
 		}
 
 	}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/DOMWrapper.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/DOMWrapper.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/DOMWrapper.as
index d341cba..1b5d09a 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/DOMWrapper.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/DOMWrapper.as
@@ -33,7 +33,7 @@ package org.apache.flex.svg
         {
 			super();
         }
-		
+
 		/**
 		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
 		 */
@@ -46,8 +46,8 @@ package org.apache.flex.svg
 			element.style.top = "0px";
 			//element.offsetParent = null;
 			positioner = element;
-			positioner.style.position = 'relative';
-			
+			//positioner.style.position = 'relative';
+
 			return element;
 		}
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicContainer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicContainer.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicContainer.as
index ca68053..6b05fea 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicContainer.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicContainer.as
@@ -35,33 +35,33 @@ package org.apache.flex.svg
         }
 
     }
-	
+
 	COMPILE::JS
 	public class GraphicContainer extends UIBase implements ITransformHost, IContainer
 	{
 		private var graphicGroup:ContainerBase;
-		
+
 		public function GraphicContainer()
 		{
 			super();
 		}
-		
+
 		/**
 		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
 		 */
 		override protected function createElement():org.apache.flex.core.WrappedHTMLElement
 		{
 			element = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as org.apache.flex.core.WrappedHTMLElement;
-			
+
 			positioner = element;
-			
+
 			// absolute positioned children need a non-null
 			// position value in the parent.  It might
 			// get set to 'absolute' if the container is
 			// also absolutely positioned
-			positioner.style.position = 'relative';
+			//positioner.style.position = 'relative';
 			element.flexjs_wrapper = this;
-			
+
 			graphicGroup = new GraphicGroup();
 			super.addElement(graphicGroup);
 			return element;
@@ -70,9 +70,9 @@ package org.apache.flex.svg
 		COMPILE::JS
 		override protected function setClassName(value:String):void
 		{
-			element.setAttribute('class', value);           
+			element.setAttribute('class', value);
 		}
-		
+
 		override public function get transformElement():org.apache.flex.core.WrappedHTMLElement
 		{
 			return graphicGroup.element;
@@ -80,7 +80,7 @@ package org.apache.flex.svg
 
 		/**
 		 *  @copy org.apache.flex.core.IParent#getElementAt()
-		 * 
+		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -89,11 +89,11 @@ package org.apache.flex.svg
 		override public function getElementAt(index:int):IChild
 		{
 			return graphicGroup.getElementAt(index);
-		}        
-		
+		}
+
 		/**
 		 *  @copy org.apache.flex.core.IParent#addElement()
-		 * 
+		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -105,10 +105,10 @@ package org.apache.flex.svg
 			if (dispatchEvent)
 				this.dispatchEvent(new Event("childrenAdded"));
 		}
-		
+
 		/**
 		 *  @copy org.apache.flex.core.IParent#addElementAt()
-		 * 
+		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -120,10 +120,10 @@ package org.apache.flex.svg
 			if (dispatchEvent)
 				this.dispatchEvent(new Event("childrenAdded"));
 		}
-		
+
 		/**
 		 *  @copy org.apache.flex.core.IParent#removeElement()
-		 * 
+		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -135,10 +135,10 @@ package org.apache.flex.svg
 			if (dispatchEvent)
 				this.dispatchEvent(new Event("childrenRemoved"));
 		}
-		
+
 		/**
 		 *  @copy org.apache.flex.core.IContainer#childrenAdded()
-		 * 
+		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -148,10 +148,10 @@ package org.apache.flex.svg
 		{
 			dispatchEvent(new Event("childrenAdded"));
 		}
-		
+
 		/**
 		 *  @copy org.apache.flex.core.IParent#getElementIndex()
-		 * 
+		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -161,11 +161,11 @@ package org.apache.flex.svg
 		{
 			return graphicGroup.getElementIndex(c);
 		}
-		
-		
+
+
 		/**
 		 *  The number of elements in the parent.
-		 * 
+		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
@@ -206,21 +206,21 @@ class GraphicGroup extends ContainerBase
 	override protected function createElement():org.apache.flex.core.WrappedHTMLElement
 	{
 		element = document.createElementNS('http://www.w3.org/2000/svg', 'g') as org.apache.flex.core.WrappedHTMLElement;
-		
+
 		positioner = element;
-		
+
 		// absolute positioned children need a non-null
 		// position value in the parent.  It might
 		// get set to 'absolute' if the container is
 		// also absolutely positioned
-		positioner.style.position = 'relative';
+		//positioner.style.position = 'relative';
 		element.flexjs_wrapper = this;
-		
+
 		/*addEventListener('childrenAdded',
 		runLayoutHandler);
 		addEventListener('elementRemoved',
 		runLayoutHandler);*/
-		
+
 		return element;
 	}
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicShape.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicShape.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicShape.as
index 19fb305..da8d0a9 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicShape.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/GraphicShape.as
@@ -35,7 +35,7 @@ package org.apache.flex.svg
 
 	public class GraphicShape extends UIBase implements IGraphicShape
 	{
-        
+
 		private var _fill:IFill;
 		private var _stroke:IStroke;
 
@@ -83,7 +83,7 @@ package org.apache.flex.svg
         {
 			super();
         }
-		
+
 		/**
 		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
 		 */
@@ -94,8 +94,8 @@ package org.apache.flex.svg
 			element.flexjs_wrapper = this;
 			//element.offsetParent = null;
 			positioner = element;
-			positioner.style.position = 'relative';
-			
+			//positioner.style.position = 'relative';
+
 			return element;
 		}
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/679eccb5/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/Image.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/Image.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/Image.as
index cd0729f..dd96ceb 100644
--- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/Image.as
+++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/svg/Image.as
@@ -18,7 +18,7 @@ package org.apache.flex.svg
 
 	COMPILE::JS
 	{
-		import org.apache.flex.core.WrappedHTMLElement;            
+		import org.apache.flex.core.WrappedHTMLElement;
 	}
     public class Image extends ImageBase
     {
@@ -34,7 +34,7 @@ package org.apache.flex.svg
         {
 			super();
        }
-		
+
 		/**
 		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
 		 */
@@ -47,14 +47,14 @@ package org.apache.flex.svg
 			element.setAttribute('y', 0);
 			//element.offsetParent = null;
 			positioner = element;
-			positioner.style.position = 'relative';
+			//positioner.style.position = 'relative';
 			addImageElement();
 			return element;
 		}
-		
+
 		COMPILE::JS
 		protected var _image:WrappedHTMLElement;
-		
+
 		/**
 		 * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
 		 */
@@ -69,19 +69,19 @@ package org.apache.flex.svg
 				element.appendChild(_image);
 			}
 		}
-		
+
 		COMPILE::JS
 		override public function get imageElement():Element
 		{
 			return _image;
 		}
-		
+
 		COMPILE::JS
 		override public function get transformElement():WrappedHTMLElement
 		{
 			return _image;
 		}
-		
+
 		COMPILE::JS
 		override public function applyImageData(binaryDataAsString:String):void
 		{
@@ -100,7 +100,7 @@ package org.apache.flex.svg
 			super.setHeight(value, noEvent);
 			positioner.setAttribute("height", value);
 		}
-		
+
 		COMPILE::JS
 		override public function setX(value:Number):void
 		{
@@ -113,16 +113,16 @@ package org.apache.flex.svg
 		{
 			super.setY(value);
 			positioner.setAttribute("y", value);
-			
+
 		}
-		
+
 		COMPILE::JS
 		override public function set x(value:Number):void
 		{
 			super.x = value;
 			positioner.setAttribute("x", value);
 		}
-		
+
 		COMPILE::JS
 		override public function set y(value:Number):void
 		{