Core: Added .outerWidth(), .outerHeight(), .innerWidth(), .innerHeigh…

…t(). Fixes #5850 - .outerWidth(), .outerHeight(), .innerWidth(), .innerHeight() setters.

tests/unit/core/core.html

@@ -127,6 +127,8 @@ <h2 id="qunit-userAgent"></h2>
 		<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
 	</div>
 	<div id="zIndexAutoNoParent"></div>
+
+	<div id="dimensions" style="float: left; height: 50px; width: 100px; margin: 1px 12px 11px 2px; border-style: solid; border-width: 3px 14px 13px 4px; padding: 5px 16px 15px 6px;"></div>
 </div>
 
 </body>

tests/unit/core/core.js

@@ -46,4 +46,112 @@ test('zIndex', function() {
 	equals($('#zIndexAutoNoParent').zIndex(), 0, 'zIndex never explicitly set in hierarchy');
 });
 
+test( "innerWidth - getter", function() {
+	var el = $( "#dimensions" );
+
+	equals( el.innerWidth(), 122, "getter passthru" );
+	el.hide();
+	equals( el.innerWidth(), 122, "getter passthru when hidden" );
+});
+
+test( "innerWidth - setter", function() {
+	var el = $( "#dimensions" );
+
+	el.innerWidth( 120 );
+	equals( el.width(), 98, "width set properly" );
+	el.hide();
+	el.innerWidth( 100 );
+	equals( el.width(), 78, "width set properly when hidden" );
+});
+
+test( "innerHeight - getter", function() {
+	var el = $( "#dimensions" );
+
+	equals( el.innerHeight(), 70, "getter passthru" );
+	el.hide();
+	equals( el.innerHeight(), 70, "getter passthru when hidden" );
+});
+
+test( "innerHeight - setter", function() {
+	var el = $( "#dimensions" );
+
+	el.innerHeight( 60 );
+	equals( el.height(), 40, "height set properly" );
+	el.hide();
+	el.innerHeight( 50 );
+	equals( el.height(), 30, "height set properly when hidden" );
+});
+
+test( "outerWidth - getter", function() {
+	var el = $( "#dimensions" );
+
+	equals( el.outerWidth(), 140, "getter passthru" );
+	el.hide();
+	equals( el.outerWidth(), 140, "getter passthru when hidden" );
+});
+
+test( "outerWidth - setter", function() {
+	var el = $( "#dimensions" );
+
+	el.outerWidth( 130 );
+	equals( el.width(), 90, "width set properly" );
+	el.hide();
+	el.outerWidth( 120 );
+	equals( el.width(), 80, "width set properly when hidden" );
+});
+
+test( "outerWidth(true) - getter", function() {
+	var el = $( "#dimensions" );
+
+	equals( el.outerWidth(true), 154, "getter passthru w/ margin" );
+	el.hide();
+	equals( el.outerWidth(true), 154, "getter passthru w/ margin when hidden" );
+});
+
+test( "outerWidth(true) - setter", function() {
+	var el = $( "#dimensions" );
+
+	el.outerWidth( 130, true );
+	equals( el.width(), 76, "width set properly" );
+	el.hide();
+	el.outerWidth( 120, true );
+	equals( el.width(), 66, "width set properly when hidden" );
+});
+
+test( "outerHeight - getter", function() {
+	var el = $( "#dimensions" );
+
+	equals( el.outerHeight(), 86, "getter passthru" );
+	el.hide();
+	equals( el.outerHeight(), 86, "getter passthru when hidden" );
+});
+
+test( "outerHeight - setter", function() {
+	var el = $( "#dimensions" );
+
+	el.outerHeight( 80 );
+	equals( el.height(), 44, "height set properly" );
+	el.hide();
+	el.outerHeight( 70 );
+	equals( el.height(), 34, "height set properly when hidden" );
+});
+
+test( "outerHeight(true) - getter", function() {
+	var el = $( "#dimensions" );
+
+	equals( el.outerHeight(true), 98, "getter passthru w/ margin" );
+	el.hide();
+	equals( el.outerHeight(true), 98, "getter passthru w/ margin when hidden" );
+});
+
+test( "outerHeight(true) - setter", function() {
+	var el = $( "#dimensions" );
+
+	el.outerHeight( 90, true );
+	equals( el.height(), 42, "height set properly" );
+	el.hide();
+	el.outerHeight( 80, true );
+	equals( el.height(), 32, "height set properly when hidden" );
+});
+
 })(jQuery);

ui/jquery.ui.autocomplete.js

@@ -279,13 +279,9 @@ $.widget( "ui.autocomplete", {
 
 		menuWidth = ul.width( "" ).outerWidth();
 		textWidth = this.element.outerWidth();
-		ul.width( Math.max( menuWidth, textWidth )
-			- ( parseFloat( ul.css("paddingLeft") ) || 0 )
-			- ( parseFloat( ul.css("paddingRight") ) || 0 )
-			- ( parseFloat( ul.css("borderLeftWidth") ) || 0 )
-			- ( parseFloat( ul.css("borderRightWidth") ) || 0 ) );
+		ul.outerWidth( Math.max( menuWidth, textWidth ) );
 	},
-	
+
 	_renderMenu: function( ul, items ) {
 		var self = this;
 		$.each( items, function( index, item ) {

ui/jquery.ui.core.js

@@ -186,6 +186,49 @@ $.fn.extend({
 	}
 });
 
+$.each( [ "Width", "Height" ], function( i, name ) {
+	var side = name === "Width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ],
+		type = name.toLowerCase(),
+		orig = {
+			innerWidth: $.fn.innerWidth,
+			innerHeight: $.fn.innerHeight,
+			outerWidth: $.fn.outerWidth,
+			outerHeight: $.fn.outerHeight
+		};
+
+	function reduce( elem, size, border, margin ) {
+		$.each( side, function() {
+			size -= parseFloat( $.curCSS( elem, "padding" + this, true)) || 0;
+			if ( border ) {
+				size -= parseFloat( $.curCSS( elem, "border" + this + "Width", true)) || 0;
+			}
+			if ( margin ) {
+				size -= parseFloat( $.curCSS( elem, "margin" + this, true)) || 0;
+			}
+		});
+		return size;
+	}
+
+	$.fn[ "inner" + name ] = function( size ) {
+		if ( size === undefined ) {
+			return orig[ "inner" + name ].call( this );
+		}
+
+		return this.each(function() {
+			$.style( this, type, reduce( this, size ) + "px" );
+		});
+	};
+
+	$.fn[ "outer" + name] = function( size, margin ) {
+		if ( typeof size !== "number" ) {
+			return orig[ "outer" + name ].call( this, size );
+		}
+
+		return this.each(function() {
+			$.style( this, type, reduce( this, size, true, margin ) + "px" );
+		});
+	};
+});
 
 //Additional selectors
 $.extend($.expr[':'], {