Skip to content

Commit 4deb824

Browse files
scottgonzalezscottgonzalez
committed
Core: Added .outerWidth(), .outerHeight(), .innerWidth(), .innerHeight(). Fixes #5850 - .outerWidth(), .outerHeight(), .innerWidth(), .innerHeight() setters.
1 parent 3f070bd commit 4deb824

File tree

4 files changed

+155
-6
lines changed

4 files changed

+155
-6
lines changed

‎tests/unit/core/core.html

+2
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@ <h2 id="qunit-userAgent"></h2>
127127
<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
128128
</div>
129129
<div id="zIndexAutoNoParent"></div>
130+
131+
<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>
130132
</div>
131133

132134
</body>

‎tests/unit/core/core.js

+108
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,112 @@ test('zIndex', function() {
4646
equals($('#zIndexAutoNoParent').zIndex(), 0, 'zIndex never explicitly set in hierarchy');
4747
});
4848

49+
test( "innerWidth - getter", function() {
50+
var el = $( "#dimensions" );
51+
52+
equals( el.innerWidth(), 122, "getter passthru" );
53+
el.hide();
54+
equals( el.innerWidth(), 122, "getter passthru when hidden" );
55+
});
56+
57+
test( "innerWidth - setter", function() {
58+
var el = $( "#dimensions" );
59+
60+
el.innerWidth( 120 );
61+
equals( el.width(), 98, "width set properly" );
62+
el.hide();
63+
el.innerWidth( 100 );
64+
equals( el.width(), 78, "width set properly when hidden" );
65+
});
66+
67+
test( "innerHeight - getter", function() {
68+
var el = $( "#dimensions" );
69+
70+
equals( el.innerHeight(), 70, "getter passthru" );
71+
el.hide();
72+
equals( el.innerHeight(), 70, "getter passthru when hidden" );
73+
});
74+
75+
test( "innerHeight - setter", function() {
76+
var el = $( "#dimensions" );
77+
78+
el.innerHeight( 60 );
79+
equals( el.height(), 40, "height set properly" );
80+
el.hide();
81+
el.innerHeight( 50 );
82+
equals( el.height(), 30, "height set properly when hidden" );
83+
});
84+
85+
test( "outerWidth - getter", function() {
86+
var el = $( "#dimensions" );
87+
88+
equals( el.outerWidth(), 140, "getter passthru" );
89+
el.hide();
90+
equals( el.outerWidth(), 140, "getter passthru when hidden" );
91+
});
92+
93+
test( "outerWidth - setter", function() {
94+
var el = $( "#dimensions" );
95+
96+
el.outerWidth( 130 );
97+
equals( el.width(), 90, "width set properly" );
98+
el.hide();
99+
el.outerWidth( 120 );
100+
equals( el.width(), 80, "width set properly when hidden" );
101+
});
102+
103+
test( "outerWidth(true) - getter", function() {
104+
var el = $( "#dimensions" );
105+
106+
equals( el.outerWidth(true), 154, "getter passthru w/ margin" );
107+
el.hide();
108+
equals( el.outerWidth(true), 154, "getter passthru w/ margin when hidden" );
109+
});
110+
111+
test( "outerWidth(true) - setter", function() {
112+
var el = $( "#dimensions" );
113+
114+
el.outerWidth( 130, true );
115+
equals( el.width(), 76, "width set properly" );
116+
el.hide();
117+
el.outerWidth( 120, true );
118+
equals( el.width(), 66, "width set properly when hidden" );
119+
});
120+
121+
test( "outerHeight - getter", function() {
122+
var el = $( "#dimensions" );
123+
124+
equals( el.outerHeight(), 86, "getter passthru" );
125+
el.hide();
126+
equals( el.outerHeight(), 86, "getter passthru when hidden" );
127+
});
128+
129+
test( "outerHeight - setter", function() {
130+
var el = $( "#dimensions" );
131+
132+
el.outerHeight( 80 );
133+
equals( el.height(), 44, "height set properly" );
134+
el.hide();
135+
el.outerHeight( 70 );
136+
equals( el.height(), 34, "height set properly when hidden" );
137+
});
138+
139+
test( "outerHeight(true) - getter", function() {
140+
var el = $( "#dimensions" );
141+
142+
equals( el.outerHeight(true), 98, "getter passthru w/ margin" );
143+
el.hide();
144+
equals( el.outerHeight(true), 98, "getter passthru w/ margin when hidden" );
145+
});
146+
147+
test( "outerHeight(true) - setter", function() {
148+
var el = $( "#dimensions" );
149+
150+
el.outerHeight( 90, true );
151+
equals( el.height(), 42, "height set properly" );
152+
el.hide();
153+
el.outerHeight( 80, true );
154+
equals( el.height(), 32, "height set properly when hidden" );
155+
});
156+
49157
})(jQuery);

‎ui/jquery.ui.autocomplete.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -279,13 +279,9 @@ $.widget( "ui.autocomplete", {
279279

280280
menuWidth = ul.width( "" ).outerWidth();
281281
textWidth = this.element.outerWidth();
282-
ul.width( Math.max( menuWidth, textWidth )
283-
- ( parseFloat( ul.css("paddingLeft") ) || 0 )
284-
- ( parseFloat( ul.css("paddingRight") ) || 0 )
285-
- ( parseFloat( ul.css("borderLeftWidth") ) || 0 )
286-
- ( parseFloat( ul.css("borderRightWidth") ) || 0 ) );
282+
ul.outerWidth( Math.max( menuWidth, textWidth ) );
287283
},
288-
284+
289285
_renderMenu: function( ul, items ) {
290286
var self = this;
291287
$.each( items, function( index, item ) {

‎ui/jquery.ui.core.js

+43
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,49 @@ $.fn.extend({
186186
}
187187
});
188188

189+
$.each( [ "Width", "Height" ], function( i, name ) {
190+
var side = name === "Width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ],
191+
type = name.toLowerCase(),
192+
orig = {
193+
innerWidth: $.fn.innerWidth,
194+
innerHeight: $.fn.innerHeight,
195+
outerWidth: $.fn.outerWidth,
196+
outerHeight: $.fn.outerHeight
197+
};
198+
199+
function reduce( elem, size, border, margin ) {
200+
$.each( side, function() {
201+
size -= parseFloat( $.curCSS( elem, "padding" + this, true)) || 0;
202+
if ( border ) {
203+
size -= parseFloat( $.curCSS( elem, "border" + this + "Width", true)) || 0;
204+
}
205+
if ( margin ) {
206+
size -= parseFloat( $.curCSS( elem, "margin" + this, true)) || 0;
207+
}
208+
});
209+
return size;
210+
}
211+
212+
$.fn[ "inner" + name ] = function( size ) {
213+
if ( size === undefined ) {
214+
return orig[ "inner" + name ].call( this );
215+
}
216+
217+
return this.each(function() {
218+
$.style( this, type, reduce( this, size ) + "px" );
219+
});
220+
};
221+
222+
$.fn[ "outer" + name] = function( size, margin ) {
223+
if ( typeof size !== "number" ) {
224+
return orig[ "outer" + name ].call( this, size );
225+
}
226+
227+
return this.each(function() {
228+
$.style( this, type, reduce( this, size, true, margin ) + "px" );
229+
});
230+
};
231+
});
189232

190233
//Additional selectors
191234
$.extend($.expr[':'], {

0 commit comments

Comments
 (0)