Support: Properly check for IE9 absolute scrollbox mishandling

Ref gh-3589
Fixes gh-3699
Fixes gh-3730
Closes gh-3729

2 files changed, 68 insertions, 44 deletions

diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 5db465868..13cd9662b 100644
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -545,7 +545,7 @@ QUnit.test( "width/height on an inline element with no explicitly-set dimensions
 } );
 
 QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
-	assert.expect( 36 );
+	assert.expect( 48 );
 
 	var i,
 		suffix = "",
@@ -561,31 +561,29 @@ QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
 		borderWidth = 1,
 		padding = 2,
 		size = 100 + fraction,
-		scrollBox = {
-			position: "absolute",
-			overflow: "scroll",
-			width: size + "px",
-			height: size + "px"
-		},
-		borderBox = {
-			border: borderWidth + "px solid blue",
-			padding: padding + "px"
-		},
-		plainContentBox = jQuery( "<div />" )
-			.css( scrollBox )
-			.css( { "box-sizing": "content-box" } )
-			.appendTo( parent ),
-		contentBox = jQuery( "<div />" )
-			.css( scrollBox )
-			.css( borderBox )
-			.css( { "box-sizing": "content-box" } )
-			.appendTo( parent ),
-		borderBox = jQuery( "<div />" )
-			.css( scrollBox )
-			.css( borderBox )
-			.css( { "box-sizing": "border-box" } )
-			.appendTo( parent ),
-		$boxes = jQuery( [ plainContentBox[ 0 ], contentBox[ 0 ], borderBox[ 0 ] ] ),
+		plainBox = jQuery( "<div />" )
+			.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
@@ -594,6 +592,13 @@ QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
 			borderBox.clone().css( { overflow: "auto" } ).appendTo( parent )[ 0 ].offsetWidth -
 			borderBox[ 0 ].offsetWidth;
 
+	if ( borderBoxLoss > 0 ) {
+		borderBox.css( {
+			width: ( size + borderBoxLoss ) + "px",
+			height: ( size + borderBoxLoss ) + "px"
+		} );
+	}
+
 	for ( i = 0; i < 3; i++ ) {
 		if ( i === 1 ) {
 			suffix = " after increasing inner* by " + i;
@@ -605,13 +610,13 @@ QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
 			$boxes.outerWidth( updater( i ) ).outerHeight( updater( i ) );
 		}
 
-		assert.equal( plainContentBox.innerWidth(), size,
+		assert.equal( plainBox.innerWidth(), size,
 			"plain content-box innerWidth includes scroll gutter" + suffix );
-		assert.equal( plainContentBox.innerHeight(), size,
+		assert.equal( plainBox.innerHeight(), size,
 			"plain content-box innerHeight includes scroll gutter" + suffix );
-		assert.equal( plainContentBox.outerWidth(), size,
+		assert.equal( plainBox.outerWidth(), size,
 			"plain content-box outerWidth includes scroll gutter" + suffix );
-		assert.equal( plainContentBox.outerHeight(), size,
+		assert.equal( plainBox.outerHeight(), size,
 			"plain content-box outerHeight includes scroll gutter" + suffix );
 
 		assert.equal( contentBox.innerWidth(), size + 2 * padding,
@@ -623,14 +628,23 @@ QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
 		assert.equal( contentBox.outerHeight(), size + 2 * padding + 2 * borderWidth,
 			"content-box outerHeight includes scroll gutter" + suffix );
 
-		assert.equal( borderBox.innerWidth(), size - borderBoxLoss - 2 * borderWidth,
+		assert.equal( borderBox.innerWidth(), size - 2 * borderWidth,
 			"border-box innerWidth includes scroll gutter" + suffix );
-		assert.equal( borderBox.innerHeight(), size - borderBoxLoss - 2 * borderWidth,
+		assert.equal( borderBox.innerHeight(), size - 2 * borderWidth,
 			"border-box innerHeight includes scroll gutter" + suffix );
-		assert.equal( borderBox.outerWidth(), size - borderBoxLoss,
+		assert.equal( borderBox.outerWidth(), size,
 			"border-box outerWidth includes scroll gutter" + suffix );
-		assert.equal( borderBox.outerHeight(), size - borderBoxLoss,
+		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 );
 	}
 } );
 
diff --git a/test/unit/support.js b/test/unit/support.js
index daa8dc664..f893886da 100644
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -73,7 +73,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": true,
 			"radioValue": true,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": true
 		};
 	} else if ( /(msie 10\.0|trident\/7\.0)/i.test( userAgent ) ) {
 		expected = {
@@ -90,7 +91,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": true,
 			"radioValue": false,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": true
 		};
 	} else if ( /msie 9\.0/i.test( userAgent ) ) {
 		expected = {
@@ -107,7 +109,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": true,
 			"radioValue": false,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": "absolute"
 		};
 	} else if ( /chrome/i.test( userAgent ) ) {
 
@@ -127,7 +130,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": true,
 			"radioValue": true,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": true
 		};
 	} else if ( /\b(?:9|10)\.\d(\.\d+)* safari/i.test( userAgent ) ) {
 		expected = {
@@ -144,7 +148,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": false,
 			"radioValue": true,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": true
 		};
 	} else if ( /firefox/i.test( userAgent ) ) {
 		expected = {
@@ -161,7 +166,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": true,
 			"radioValue": true,
-			"reliableMarginLeft": false
+			"reliableMarginLeft": false,
+			"scrollboxSize": true
 		};
 	} else if ( /iphone os (?:9|10)_/i.test( userAgent ) ) {
 		expected = {
@@ -178,7 +184,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": false,
 			"radioValue": true,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": true
 		};
 	} else if ( /iphone os 8_/i.test( userAgent ) ) {
 		expected = {
@@ -195,7 +202,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": false,
 			"radioValue": true,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": true
 		};
 	} else if ( /iphone os 7_/i.test( userAgent ) ) {
 		expected = {
@@ -212,7 +220,8 @@ testIframe(
 			"pixelMarginRight": true,
 			"pixelPosition": false,
 			"radioValue": true,
-			"reliableMarginLeft": true
+			"reliableMarginLeft": true,
+			"scrollboxSize": true
 		};
 	} else if ( /android 4\.[0-3]/i.test( userAgent ) ) {
 		expected = {
@@ -229,7 +238,8 @@ testIframe(
 			"pixelMarginRight": false,
 			"pixelPosition": false,
 			"radioValue": true,
-			"reliableMarginLeft": false
+			"reliableMarginLeft": false,
+			"scrollboxSize": true
 		};
 	}