CSS: Make .css("width") & .css("height") return fractional values

Fixes gh-1724
Closes gh-2454
Refs gh-2439

3 files changed, 82 insertions, 16 deletions

diff --git a/test/unit/css.js b/test/unit/css.js
index 34620d05e..9c3a186d0 100644
--- a/test/unit/css.js
+++ b/test/unit/css.js
@@ -904,6 +904,52 @@ testIframeWithCallback( "css('width') should work correctly before document read
 	}
 );
 
+( function() {
+	var supportsFractionalGBCR,
+		qunitFixture = document.getElementById( "qunit-fixture" ),
+		div = document.createElement( "div" );
+	div.style.width = "3.3px";
+	qunitFixture.appendChild( div );
+	supportsFractionalGBCR = jQuery.support.gBCRDimensions() &&
+		div.getBoundingClientRect().width.toFixed(1) === "3.3";
+	qunitFixture.removeChild( div );
+
+	test( "css('width') and css('height') should return fractional values for nodes in the document", function() {
+		if ( !supportsFractionalGBCR ) {
+			expect( 1 );
+			ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
+			return;
+		}
+
+		expect( 2 );
+
+		var el = jQuery( "<div class='test-div'></div>" ).appendTo( "#qunit-fixture" );
+		jQuery( "<style>.test-div { width: 33.3px; height: 88.8px; }</style>" ).appendTo( "#qunit-fixture" );
+
+		equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
+			"css('width') should return fractional values" );
+		equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
+			"css('height') should return fractional values" );
+	} );
+
+	test( "css('width') and css('height') should return fractional values for disconnected nodes", function() {
+		if ( !supportsFractionalGBCR ) {
+			expect( 1 );
+			ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
+			return;
+		}
+
+		expect( 2 );
+
+		var el = jQuery( "<div style='width: 33.3px; height: 88.8px;'></div>" );
+
+		equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
+			"css('width') should return fractional values" );
+		equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
+			"css('height') should return fractional values" );
+	} );
+} )();
+
 test("certain css values of 'normal' should be convertable to a number, see #8627", function() {
 	expect ( 3 );
 
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index c03b96c8b..f4a35981b 100644
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -258,10 +258,12 @@ test("child of a hidden elem (or unconnected node) has accurate inner/outer/Widt
 	equal( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #9441" );
 	equal( $divChild.outerWidth(true), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #9300" );
 
-	equal( $divChild.height(), $divNormal.height(), "child of a hidden element height() is wrong see #9441" );
-	equal( $divChild.innerHeight(), $divNormal.innerHeight(), "child of a hidden element innerHeight() is wrong see #9441" );
-	equal( $divChild.outerHeight(), $divNormal.outerHeight(), "child of a hidden element outerHeight() is wrong see #9441" );
-	equal( $divChild.outerHeight(true), $divNormal.outerHeight( true ), "child of a hidden element outerHeight( true ) is wrong see #9300" );
+	// Support: IE 10-11, Edge
+	// Child height is not always decimal
+	equal( $divChild.height().toFixed( 3 ), $divNormal.height().toFixed( 3 ), "child of a hidden element height() is wrong see #9441" );
+	equal( $divChild.innerHeight().toFixed( 3 ), $divNormal.innerHeight().toFixed( 3 ), "child of a hidden element innerHeight() is wrong see #9441" );
+	equal( $divChild.outerHeight().toFixed( 3 ), $divNormal.outerHeight().toFixed( 3 ), "child of a hidden element outerHeight() is wrong see #9441" );
+	equal( $divChild.outerHeight( true ).toFixed( 3 ), $divNormal.outerHeight( true ).toFixed( 3 ), "child of a hidden element outerHeight( true ) is wrong see #9300" );
 
 	// tests that child div of an unconnected div works the same as a normal div
 	equal( $divUnconnected.width(), $divNormal.width(), "unconnected element width() is wrong see #9441" );
@@ -269,10 +271,12 @@ test("child of a hidden elem (or unconnected node) has accurate inner/outer/Widt
 	equal( $divUnconnected.outerWidth(), $divNormal.outerWidth(), "unconnected element outerWidth() is wrong see #9441" );
 	equal( $divUnconnected.outerWidth(true), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #9300" );
 
-	equal( $divUnconnected.height(), $divNormal.height(), "unconnected element height() is wrong see #9441" );
-	equal( $divUnconnected.innerHeight(), $divNormal.innerHeight(), "unconnected element innerHeight() is wrong see #9441" );
-	equal( $divUnconnected.outerHeight(), $divNormal.outerHeight(), "unconnected element outerHeight() is wrong see #9441" );
-	equal( $divUnconnected.outerHeight(true), $divNormal.outerHeight( true ), "unconnected element outerHeight( true ) is wrong see #9300" );
+	// Support: IE 10-11, Edge
+	// Child height is not always decimal
+	equal( $divUnconnected.height().toFixed( 3 ), $divNormal.height().toFixed( 3 ), "unconnected element height() is wrong see #9441" );
+	equal( $divUnconnected.innerHeight().toFixed( 3 ), $divNormal.innerHeight().toFixed( 3 ), "unconnected element innerHeight() is wrong see #9441" );
+	equal( $divUnconnected.outerHeight().toFixed( 3 ), $divNormal.outerHeight().toFixed( 3 ), "unconnected element outerHeight() is wrong see #9441" );
+	equal( $divUnconnected.outerHeight( true ).toFixed( 3 ), $divNormal.outerHeight( true ).toFixed( 3 ), "unconnected element outerHeight( true ) is wrong see #9300" );
 
 	// teardown html
 	$divHiddenParent.remove();
@@ -329,10 +333,12 @@ test("box-sizing:border-box child of a hidden elem (or unconnected node) has acc
 	equal( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #10413" );
 	equal( $divChild.outerWidth(true), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #10413" );
 
-	equal( $divChild.height(), $divNormal.height(), "child of a hidden element height() is wrong see #10413" );
-	equal( $divChild.innerHeight(), $divNormal.innerHeight(), "child of a hidden element innerHeight() is wrong see #10413" );
-	equal( $divChild.outerHeight(), $divNormal.outerHeight(), "child of a hidden element outerHeight() is wrong see #10413" );
-	equal( $divChild.outerHeight(true), $divNormal.outerHeight( true ), "child of a hidden element outerHeight( true ) is wrong see #10413" );
+	// Support: IE 10-11, Edge
+	// Child height is not always decimal
+	equal( $divChild.height().toFixed( 3 ), $divNormal.height().toFixed( 3 ), "child of a hidden element height() is wrong see #10413" );
+	equal( $divChild.innerHeight().toFixed( 3 ), $divNormal.innerHeight().toFixed( 3 ), "child of a hidden element innerHeight() is wrong see #10413" );
+	equal( $divChild.outerHeight().toFixed( 3 ), $divNormal.outerHeight().toFixed( 3 ), "child of a hidden element outerHeight() is wrong see #10413" );
+	equal( $divChild.outerHeight( true ).toFixed( 3 ), $divNormal.outerHeight( true ).toFixed( 3 ), "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
 	equal( $divUnconnected.width(), $divNormal.width(), "unconnected element width() is wrong see #10413" );
@@ -340,10 +346,12 @@ test("box-sizing:border-box child of a hidden elem (or unconnected node) has acc
 	equal( $divUnconnected.outerWidth(), $divNormal.outerWidth(), "unconnected element outerWidth() is wrong see #10413" );
 	equal( $divUnconnected.outerWidth(true), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #10413" );
 
-	equal( $divUnconnected.height(), $divNormal.height(), "unconnected element height() is wrong see #10413" );
-	equal( $divUnconnected.innerHeight(), $divNormal.innerHeight(), "unconnected element innerHeight() is wrong see #10413" );
-	equal( $divUnconnected.outerHeight(), $divNormal.outerHeight(), "unconnected element outerHeight() is wrong see #10413" );
-	equal( $divUnconnected.outerHeight(true), $divNormal.outerHeight( true ), "unconnected element outerHeight( true ) is wrong see #10413" );
+	// Support: IE 10-11, Edge
+	// Child height is not always decimal
+	equal( $divUnconnected.height().toFixed( 3 ), $divNormal.height().toFixed( 3 ), "unconnected element height() is wrong see #10413" );
+	equal( $divUnconnected.innerHeight().toFixed( 3 ), $divNormal.innerHeight().toFixed( 3 ), "unconnected element innerHeight() is wrong see #10413" );
+	equal( $divUnconnected.outerHeight().toFixed( 3 ), $divNormal.outerHeight().toFixed( 3 ), "unconnected element outerHeight() is wrong see #10413" );
+	equal( $divUnconnected.outerHeight( true ).toFixed( 3 ), $divNormal.outerHeight( true ).toFixed( 3 ), "unconnected element outerHeight( true ) is wrong see #10413" );
 
 	// teardown html
 	$divHiddenParent.remove();
diff --git a/test/unit/support.js b/test/unit/support.js
index 07478e014..b5865b2bd 100644
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -82,6 +82,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -114,6 +115,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": true,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -146,6 +148,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": true,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -178,6 +181,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": false,
 			"deleteExpando": false,
 			"focusin": true,
+			"gBCRDimensions": false,
 			"html5Clone": false,
 			"htmlSerialize": false,
 			"input": false,
@@ -212,6 +216,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -244,6 +249,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -276,6 +282,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -308,6 +315,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -340,6 +348,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -372,6 +381,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -404,6 +414,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,
@@ -436,6 +447,7 @@ testIframeWithCallback( "Check CSP (https://developer.mozilla.org/en-US/docs/Sec
 			"cssFloat": true,
 			"deleteExpando": true,
 			"focusin": false,
+			"gBCRDimensions": true,
 			"html5Clone": true,
 			"htmlSerialize": true,
 			"input": true,