Dimensions: fix computing outerWidth on SVGs

jbedard · jbedard · commit 6a97bbab6bcb · 2018-06-10T22:41:13.000-07:00
Fixes gh-3964
diff --git a/src/css.js b/src/css.js
@@ -130,11 +130,12 @@ function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computed
 
 	// Account for positive content-box scroll gutter when requested by providing computedVal
 	if ( !isBorderBox && computedVal >= 0 ) {
+		var val = elem[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ];
 
 		// offsetWidth/offsetHeight is a rounded sum of content, padding, scroll gutter, and border
 		// Assuming integer scroll gutter, subtract the rest and round down
 		delta += Math.max( 0, Math.ceil(
-			elem[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ] -
+			( val === undefined ? computedVal : val ) -
 			computedVal -
 			delta -
 			extra -
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
@@ -352,6 +352,66 @@ QUnit.test( "table dimensions", function( assert ) {
 	assert.equal( colElem.width(), 300, "col elements have width(), see #12243" );
 } );
 
+QUnit.test( "SVG dimensions (basic content-box)", function( assert ) {
+	assert.expect( 8 );
+
+	var svg = jQuery( "<svg width='100' height='100'></svg>" ).appendTo( "#qunit-fixture" );
+
+	assert.equal( svg.width(), 100 );
+	assert.equal( svg.height(), 100 );
+
+	assert.equal( svg.innerWidth(), 100 );
+	assert.equal( svg.innerHeight(), 100 );
+
+	assert.equal( svg.outerWidth(), 100 );
+	assert.equal( svg.outerHeight(), 100 );
+
+	assert.equal( svg.outerWidth( true ), 100 );
+	assert.equal( svg.outerHeight( true ), 100 );
+
+	svg.remove();
+} );
+
+QUnit.test( "SVG dimensions (content-box)", function( assert ) {
+	assert.expect( 8 );
+
+	var svg = jQuery( "<svg width='100' height='100' style='box-sizing: content-box; border: 1px solid white; padding: 2px; margin: 3px'></svg>" ).appendTo( "#qunit-fixture" );
+
+	assert.equal( svg.width(), 100 );
+	assert.equal( svg.height(), 100 );
+
+	assert.equal( svg.innerWidth(), 104 );
+	assert.equal( svg.innerHeight(), 104 );
+
+	assert.equal( svg.outerWidth(), 106 );
+	assert.equal( svg.outerHeight(), 106 );
+
+	assert.equal( svg.outerWidth( true ), 112 );
+	assert.equal( svg.outerHeight( true ), 112 );
+
+	svg.remove();
+} );
+
+QUnit.test( "SVG dimensions (border-box)", function( assert ) {
+	assert.expect( 8 );
+
+	var svg = jQuery( "<svg width='100' height='100' style='box-sizing: border-box; border: 1px solid white; padding: 2px; margin: 3px'></svg>" ).appendTo( "#qunit-fixture" );
+
+	assert.equal( svg.width(), 94 );
+	assert.equal( svg.height(), 94 );
+
+	assert.equal( svg.innerWidth(), 98 );
+	assert.equal( svg.innerHeight(), 98 );
+
+	assert.equal( svg.outerWidth(), 100 );
+	assert.equal( svg.outerHeight(), 100 );
+
+	assert.equal( svg.outerWidth( true ), 106 );
+	assert.equal( svg.outerHeight( true ), 106 );
+
+	svg.remove();
+} );
+
 QUnit.test( "box-sizing:border-box child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height()  see #10413", function( assert ) {
 	assert.expect( 16 );
 
