Dimensions: fix computing outerWidth on SVGs

Fixes gh-3964
Closes gh-4096
This commit is contained in:
Jason Bedard 2018-06-20 22:09:29 -07:00 committed by GitHub
parent 0645099e02
commit e743cbd285
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 1 deletions

View File

@ -107,7 +107,10 @@ function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computed
delta -
extra -
0.5
) );
// If offsetWidth/offsetHeight is unknown, then we can't determine content-box scroll gutter
// Use an explicit zero to avoid NaN (gh-3964)
) ) || 0;
}
return delta;

View File

@ -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 );