" ).css( { "boxSizing": "border-box", "width": "100px", "height": "100px", "border": "10px solid white", "padding": "2px", "margin": "3px" } ),
$divChild = $divNormal.clone(),
$divUnconnected = $divNormal.clone(),
$divHiddenParent = jQuery( "
" ).css( "display", "none" ).append( $divChild ).appendTo( "body" );
$divNormal.appendTo( "body" );
// tests that child div of a hidden div works the same as a normal div
assert.equal( $divChild.width(), $divNormal.width(), "child of a hidden element width() is wrong see #10413" );
assert.equal( $divChild.innerWidth(), $divNormal.innerWidth(), "child of a hidden element innerWidth() is wrong see #10413" );
assert.equal( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #10413" );
assert.equal( $divChild.outerWidth( true ), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #10413" );
assert.equal( $divChild.height(), $divNormal.height(), "child of a hidden element height() is wrong see #10413" );
assert.equal( $divChild.innerHeight(), $divNormal.innerHeight(), "child of a hidden element innerHeight() is wrong see #10413" );
assert.equal( $divChild.outerHeight(), $divNormal.outerHeight(), "child of a hidden element outerHeight() is wrong see #10413" );
assert.equal( $divChild.outerHeight( true ), $divNormal.outerHeight( true ), "child of a hidden element outerHeight( true ) is wrong see #10413" );
// tests that child div of an unconnected div works the same as a normal div
assert.equal( $divUnconnected.width(), $divNormal.width(), "unconnected element width() is wrong see #10413" );
assert.equal( $divUnconnected.innerWidth(), $divNormal.innerWidth(), "unconnected element innerWidth() is wrong see #10413" );
assert.equal( $divUnconnected.outerWidth(), $divNormal.outerWidth(), "unconnected element outerWidth() is wrong see #10413" );
assert.equal( $divUnconnected.outerWidth( true ), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #10413" );
assert.equal( $divUnconnected.height(), $divNormal.height(), "unconnected element height() is wrong see #10413" );
assert.equal( $divUnconnected.innerHeight(), $divNormal.innerHeight(), "unconnected element innerHeight() is wrong see #10413" );
assert.equal( $divUnconnected.outerHeight(), $divNormal.outerHeight(), "unconnected element outerHeight() is wrong see #10413" );
assert.equal( $divUnconnected.outerHeight( true ), $divNormal.outerHeight( true ), "unconnected element outerHeight( true ) is wrong see #10413" );
// teardown html
$divHiddenParent.remove();
$divNormal.remove();
} );
QUnit.test( "passing undefined is a setter #5571", function( assert ) {
assert.expect( 4 );
assert.equal( jQuery( "#nothiddendiv" ).height( 30 ).height( undefined ).height(), 30, ".height(undefined) is chainable (#5571)" );
assert.equal( jQuery( "#nothiddendiv" ).height( 30 ).innerHeight( undefined ).height(), 30, ".innerHeight(undefined) is chainable (#5571)" );
assert.equal( jQuery( "#nothiddendiv" ).height( 30 ).outerHeight( undefined ).height(), 30, ".outerHeight(undefined) is chainable (#5571)" );
assert.equal( jQuery( "#nothiddendiv" ).width( 30 ).width( undefined ).width(), 30, ".width(undefined) is chainable (#5571)" );
} );
QUnit.test( "setters with and without box-sizing:border-box", function( assert ) {
assert.expect( 120 );
var parent = jQuery( "#foo" ).css( { width: "200px", height: "200px", "font-size": "16px" } ),
el_bb = jQuery( "
" ).appendTo( parent ),
el = jQuery( "
" ).appendTo( parent ),
el_bb_np = jQuery( "
" ).appendTo( parent ),
el_np = jQuery( "
" ).appendTo( parent );
jQuery.each( {
"number": { set: 100, expected: 100 },
"em": { set: "10em", expected: 160 },
"percentage": { set: "50%", expected: 100 }
}, function( units, values ) {
assert.equal( el_bb.width( values.set ).width(), values.expected, "test border-box width(" + units + ") by roundtripping" );
assert.equal( el_bb.innerWidth( values.set ).width(), values.expected - 2, "test border-box innerWidth(" + units + ") by roundtripping" );
assert.equal( el_bb.outerWidth( values.set ).width(), values.expected - 6, "test border-box outerWidth(" + units + ") by roundtripping" );
assert.equal( el_bb.outerWidth( values.set, false ).width(), values.expected - 6, "test border-box outerWidth(" + units + ", false) by roundtripping" );
assert.equal( el_bb.outerWidth( values.set, true ).width(), values.expected - 16, "test border-box outerWidth(" + units + ", true) by roundtripping" );
assert.equal( el_bb.height( values.set ).height(), values.expected, "test border-box height(" + units + ") by roundtripping" );
assert.equal( el_bb.innerHeight( values.set ).height(), values.expected - 2, "test border-box innerHeight(" + units + ") by roundtripping" );
assert.equal( el_bb.outerHeight( values.set ).height(), values.expected - 6, "test border-box outerHeight(" + units + ") by roundtripping" );
assert.equal( el_bb.outerHeight( values.set, false ).height(), values.expected - 6, "test border-box outerHeight(" + units + ", false) by roundtripping" );
assert.equal( el_bb.outerHeight( values.set, true ).height(), values.expected - 16, "test border-box outerHeight(" + units + ", true) by roundtripping" );
assert.equal( el.width( values.set ).width(), values.expected, "test non-border-box width(" + units + ") by roundtripping" );
assert.equal( el.innerWidth( values.set ).width(), values.expected - 2, "test non-border-box innerWidth(" + units + ") by roundtripping" );
assert.equal( el.outerWidth( values.set ).width(), values.expected - 6, "test non-border-box outerWidth(" + units + ") by roundtripping" );
assert.equal( el.outerWidth( values.set, false ).width(), values.expected - 6, "test non-border-box outerWidth(" + units + ", false) by roundtripping" );
assert.equal( el.outerWidth( values.set, true ).width(), values.expected - 16, "test non-border-box outerWidth(" + units + ", true) by roundtripping" );
assert.equal( el.height( values.set ).height(), values.expected, "test non-border-box height(" + units + ") by roundtripping" );
assert.equal( el.innerHeight( values.set ).height(), values.expected - 2, "test non-border-box innerHeight(" + units + ") by roundtripping" );
assert.equal( el.outerHeight( values.set ).height(), values.expected - 6, "test non-border-box outerHeight(" + units + ") by roundtripping" );
assert.equal( el.outerHeight( values.set, false ).height(), values.expected - 6, "test non-border-box outerHeight(" + units + ", false) by roundtripping" );
assert.equal( el.outerHeight( values.set, true ).height(), values.expected - 16, "test non-border-box outerHeight(" + units + ", true) by roundtripping" );
assert.equal( el_bb_np.width( values.set ).width(), values.expected, "test border-box width and negative padding(" + units + ") by roundtripping" );
assert.equal( el_bb_np.innerWidth( values.set ).width(), values.expected, "test border-box innerWidth and negative padding(" + units + ") by roundtripping" );
assert.equal( el_bb_np.outerWidth( values.set ).width(), values.expected, "test border-box outerWidth and negative padding(" + units + ") by roundtripping" );
assert.equal( el_bb_np.outerWidth( values.set, false ).width(), values.expected, "test border-box outerWidth and negative padding(" + units + ", false) by roundtripping" );
assert.equal( el_bb_np.outerWidth( values.set, true ).width(), values.expected - 10, "test border-box outerWidth and negative padding(" + units + ", true) by roundtripping" );
assert.equal( el_bb_np.height( values.set ).height(), values.expected, "test border-box height and negative padding(" + units + ") by roundtripping" );
assert.equal( el_bb_np.innerHeight( values.set ).height(), values.expected, "test border-box innerHeight and negative padding(" + units + ") by roundtripping" );
assert.equal( el_bb_np.outerHeight( values.set ).height(), values.expected, "test border-box outerHeight and negative padding(" + units + ") by roundtripping" );
assert.equal( el_bb_np.outerHeight( values.set, false ).height(), values.expected, "test border-box outerHeight and negative padding(" + units + ", false) by roundtripping" );
assert.equal( el_bb_np.outerHeight( values.set, true ).height(), values.expected - 10, "test border-box outerHeight and negative padding(" + units + ", true) by roundtripping" );
assert.equal( el_np.width( values.set ).width(), values.expected, "test non-border-box width and negative padding(" + units + ") by roundtripping" );
assert.equal( el_np.innerWidth( values.set ).width(), values.expected, "test non-border-box innerWidth and negative padding(" + units + ") by roundtripping" );
assert.equal( el_np.outerWidth( values.set ).width(), values.expected, "test non-border-box outerWidth and negative padding(" + units + ") by roundtripping" );
assert.equal( el_np.outerWidth( values.set, false ).width(), values.expected, "test non-border-box outerWidth and negative padding(" + units + ", false) by roundtripping" );
assert.equal( el_np.outerWidth( values.set, true ).width(), values.expected - 10, "test non-border-box outerWidth and negative padding(" + units + ", true) by roundtripping" );
assert.equal( el_np.height( values.set ).height(), values.expected, "test non-border-box height and negative padding(" + units + ") by roundtripping" );
assert.equal( el_np.innerHeight( values.set ).height(), values.expected, "test non-border-box innerHeight and negative padding(" + units + ") by roundtripping" );
assert.equal( el_np.outerHeight( values.set ).height(), values.expected, "test non-border-box outerHeight and negative padding(" + units + ") by roundtripping" );
assert.equal( el_np.outerHeight( values.set, false ).height(), values.expected, "test non-border-box outerHeight and negative padding(" + units + ", false) by roundtripping" );
assert.equal( el_np.outerHeight( values.set, true ).height(), values.expected - 10, "test non-border-box outerHeight and negative padding(" + units + ", true) by roundtripping" );
} );
} );
testIframe(
"window vs. large document",
"dimensions/documentLarge.html",
function( assert, jQuery, window, document ) {
assert.expect( 2 );
assert.ok( jQuery( document ).height() > jQuery( window ).height(), "document height is larger than window height" );
assert.ok( jQuery( document ).width() > jQuery( window ).width(), "document width is larger than window width" );
}
);
QUnit.test( "allow modification of coordinates argument (gh-1848)", function( assert ) {
assert.expect( 1 );
var offsetTop,
element = jQuery( "
" ).appendTo( "#qunit-fixture" );
element.offset( function( index, coords ) {
coords.top = 100;
return coords;
} );
offsetTop = element.offset().top;
assert.ok( Math.abs( offsetTop - 100 ) < 0.02,
"coordinates are modified (got offset.top: " + offsetTop + ")" );
} );
QUnit.test( "outside view position (gh-2836)", function( assert ) {
// This test ported from gh-2836 example
assert.expect( 1 );
var parent,
html = [
"
"
].join( "" ),
stop = assert.async();
parent = jQuery( html );
parent.appendTo( "#qunit-fixture" );
parent.one( "scroll", function() {
var pos = parent.find( "div" ).eq( 3 ).position();
assert.strictEqual( pos.top, -100 );
stop();
} );
parent.scrollTop( 400 );
} );
QUnit.test( "width/height on element with transform (gh-3193)", function( assert ) {
assert.expect( 2 );
var $elem = jQuery( "
" )
.appendTo( "#qunit-fixture" );
assert.equal( $elem.width(), 200, "Width ignores transforms" );
assert.equal( $elem.height(), 200, "Height ignores transforms" );
} );
QUnit.test( "width/height on an inline element with no explicitly-set dimensions (gh-3571)", function( assert ) {
assert.expect( 8 );
var $elem = jQuery( "
Hello, I'm some text." ).appendTo( "#qunit-fixture" );
jQuery.each( [ "Width", "Height" ], function( i, method ) {
var val = $elem[ method.toLowerCase() ]();
assert.notEqual( val, 0, method + " should not be zero on inline element." );
assert.equal( $elem[ "inner" + method ](), val + 2, "inner" + method + " should include padding" );
assert.equal( $elem[ "outer" + method ](), val + 6, "outer" + method + " should include padding and border" );
assert.equal( $elem[ "outer" + method ]( true ), val + 12, "outer" + method + "(true) should include padding, border, and margin" );
} );
} );
QUnit.test( "width/height on an inline element with percentage dimensions (gh-3611)",
function( assert ) {
assert.expect( 4 );
jQuery( "
" +
"text" +
"
" ).appendTo( "#qunit-fixture" );
var $elem = jQuery( "#gh3611 span" ),
actualWidth = $elem[ 0 ].getBoundingClientRect().width,
marginWidth = $elem.outerWidth( true ),
borderWidth = $elem.outerWidth(),
paddingWidth = $elem.innerWidth(),
contentWidth = $elem.width();
assert.equal( Math.round( borderWidth ), Math.round( actualWidth ),
".outerWidth(): " + borderWidth + " approximates " + actualWidth );
assert.equal( marginWidth, borderWidth, ".outerWidth(true) matches .outerWidth()" );
assert.equal( paddingWidth, borderWidth, ".innerWidth() matches .outerWidth()" );
assert.equal( contentWidth, borderWidth - 10, ".width() excludes padding" );
}
);
QUnit.test( "width/height on a table row with phantom borders (gh-3698)", function( assert ) {
assert.expect( 4 );
jQuery( "
" ).appendTo( "#qunit-fixture" );
var $elem = jQuery( "#gh3698 tr" );
jQuery.each( [ "Width", "Height" ], function( i, method ) {
assert.equal( $elem[ "outer" + method ](), 42,
"outer" + method + " should match content dimensions" );
assert.equal( $elem[ "outer" + method ]( true ), 42,
"outer" + method + "(true) should match content dimensions" );
} );
} );
QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
assert.expect( 48 );
var i,
suffix = "",
updater = function( adjustment ) {
return function( i, old ) {
return old + adjustment;
};
},
parent = jQuery( "
" )
.css( { position: "absolute", width: "1000px", height: "1000px" } )
.appendTo( "#qunit-fixture" ),
fraction = jQuery.support.boxSizingReliable() ?
jQuery( "
" ).appendTo( parent ).width() % 1 :
0,
borderWidth = 1,
padding = 2,
size = 100 + fraction,
plainBox = jQuery( "
" )
.css( {
"box-sizing": "content-box",
position: "absolute",
overflow: "scroll",
width: size + "px",
height: size + "px"
} ),
contentBox = plainBox
.clone()
.css( {
border: borderWidth + "px solid blue",
padding: padding + "px"
} ),
borderBox = contentBox
.clone()
.css( { "box-sizing": "border-box" } ),
relativeBorderBox = borderBox
.clone()
.css( { position: "relative" } ),
$boxes = jQuery(
[ plainBox[ 0 ], contentBox[ 0 ], borderBox[ 0 ], relativeBorderBox[ 0 ] ]
).appendTo( parent ),
// Support: IE 9 only
// Computed width seems to report content width even with "box-sizing: border-box", and
// "overflow: scroll" actually _shrinks_ the element (gh-3699).
borderBoxLoss =
borderBox.clone().css( { overflow: "auto" } ).appendTo( parent )[ 0 ].offsetWidth -
borderBox[ 0 ].offsetWidth;
if ( borderBoxLoss > 0 ) {
borderBox[ 0 ].style.width = ( size + borderBoxLoss ) + "px";
borderBox[ 0 ].style.height = ( size + borderBoxLoss ) + "px";
}
for ( i = 0; i < 3; i++ ) {
if ( i === 1 ) {
suffix = " after increasing inner* by " + i;
size += i;
$boxes.innerWidth( updater( i ) ).innerHeight( updater( i ) );
} else if ( i === 2 ) {
suffix = " after increasing outer* by " + i;
size += i;
$boxes.outerWidth( updater( i ) ).outerHeight( updater( i ) );
}
assert.equal( plainBox.innerWidth(), size,
"plain content-box innerWidth includes scroll gutter" + suffix );
assert.equal( plainBox.innerHeight(), size,
"plain content-box innerHeight includes scroll gutter" + suffix );
assert.equal( plainBox.outerWidth(), size,
"plain content-box outerWidth includes scroll gutter" + suffix );
assert.equal( plainBox.outerHeight(), size,
"plain content-box outerHeight includes scroll gutter" + suffix );
assert.equal( contentBox.innerWidth(), size + 2 * padding,
"content-box innerWidth includes scroll gutter" + suffix );
assert.equal( contentBox.innerHeight(), size + 2 * padding,
"content-box innerHeight includes scroll gutter" + suffix );
assert.equal( contentBox.outerWidth(), size + 2 * padding + 2 * borderWidth,
"content-box outerWidth includes scroll gutter" + suffix );
assert.equal( contentBox.outerHeight(), size + 2 * padding + 2 * borderWidth,
"content-box outerHeight includes scroll gutter" + suffix );
assert.equal( borderBox.innerWidth(), size - 2 * borderWidth,
"border-box innerWidth includes scroll gutter" + suffix );
assert.equal( borderBox.innerHeight(), size - 2 * borderWidth,
"border-box innerHeight includes scroll gutter" + suffix );
assert.equal( borderBox.outerWidth(), size,
"border-box outerWidth includes scroll gutter" + suffix );
assert.equal( borderBox.outerHeight(), size,
"border-box outerHeight includes scroll gutter" + suffix );
assert.equal( relativeBorderBox.innerWidth(), size - 2 * borderWidth,
"relative border-box innerWidth includes scroll gutter" + suffix );
assert.equal( relativeBorderBox.innerHeight(), size - 2 * borderWidth,
"relative border-box innerHeight includes scroll gutter" + suffix );
assert.equal( relativeBorderBox.outerWidth(), size,
"relative border-box outerWidth includes scroll gutter" + suffix );
assert.equal( relativeBorderBox.outerHeight(), size,
"relative border-box outerHeight includes scroll gutter" + suffix );
}
} );
QUnit.test( "outerWidth/Height for table cells and textarea with border-box in IE 11 (gh-4102)", function( assert ) {
assert.expect( 5 );
var $table = jQuery( "
" ).appendTo( "#qunit-fixture" ),
$thead = jQuery( "
" ).appendTo( $table ),
$firstTh = jQuery( "
| " ),
$secondTh = jQuery( "
| " ),
$thirdTh = jQuery( "
| " ),
// Support: Firefox 63, Edge 16-17, Android 8, iOS 7-11
// These browsers completely ignore the border-box and height settings
// The computed height is instead just line-height + border
// Either way, what we're doing in css.js is correct
$td = jQuery( "
text | " ),
$tbody = jQuery( "
" ).appendTo( $table ),
$textarea = jQuery( "
" ).appendTo( "#qunit-fixture" );
jQuery( "
|
" ).appendTo( $thead ).append( $firstTh );
jQuery( "
|
" ).appendTo( $thead ).append( $secondTh );
jQuery( "
|
" ).appendTo( $thead ).append( $thirdTh );
jQuery( "
|
" ).appendTo( $tbody ).append( $td );
assert.strictEqual( $firstTh.outerWidth(), 200, "First th has outerWidth 200." );
assert.strictEqual( $secondTh.outerWidth(), 200, "Second th has outerWidth 200." );
assert.strictEqual( $thirdTh.outerWidth(), 200, "Third th has outerWidth 200." );
// Support: Android 4.0-4.3 only
// Android Browser disregards td's box-sizing, treating it like it was content-box.
// Unlike in IE, offsetHeight shares the same issue so there's no easy way to workaround
// the issue without incurring high size penalty. Let's at least check we get the size
// as the browser sees it.
if ( /android 4\.[0-3]/i.test( navigator.userAgent ) ) {
assert.ok( [ 30, 32 ].indexOf( $td.outerHeight() ) > -1,
"outerHeight of td with border-box should include padding." );
} else {
assert.strictEqual( $td.outerHeight(), 30, "outerHeight of td with border-box should include padding." );
}
assert.strictEqual( $textarea.outerHeight(), 6, "outerHeight of textarea with border-box should include padding and border." );
} );
} )();