Permalink
Browse files

Merge pull request #2602 from SergioCrisostomo/svg-size-fix

Fix svg element size
  • Loading branch information...
ibolmo committed Jul 2, 2014
2 parents 9e49197 + 81bd289 commit 6837e04a89c2358dc4d2c52e59f7bc72964ea628
Showing with 125 additions and 2 deletions.
  1. +31 −2 Source/Element/Element.Dimensions.js
  2. +94 −0 Specs/Element/Element.Dimensions.js
@@ -27,6 +27,24 @@ element.appendChild(child);
var brokenOffsetParent = (child.offsetParent === element);
element = child = null;
var hasLimitedGetClientBoudingRect = !document.body.getBoundingClientRect().width;
var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];
var svgCalculateSize = function(el){
var gCS = window.getComputedStyle(el),
bounds = {x: 0, y: 0};
heightComponents.each(function(css){
bounds.y += parseFloat(gCS[css]);
});
widthComponents.each(function(css){
bounds.x += parseFloat(gCS[css]);
});
return bounds;
};
var isOffset = function(el){
return styleString(el, 'position') != 'static' || isBody(el);
};
@@ -49,7 +67,18 @@ Element.implement({
getSize: function(){
if (isBody(this)) return this.getWindow().getSize();
return {x: this.offsetWidth, y: this.offsetHeight};
//<ltIE9>
// This if clause is because IE8- cannot calculate getBoundingClientRect of elements with visibility hidden.
if (hasLimitedGetClientBoudingRect) return {x: this.offsetWidth, y: this.offsetHeight};
//</ltIE9>
// This svg section under, calling `svgCalculateSize()`, can be removed when FF fixed the svg size bug.
// Bug info: https://bugzilla.mozilla.org/show_bug.cgi?id=530985
if (this.get('tag') == 'svg') return svgCalculateSize(this);
var bounds = this.getBoundingClientRect();
return {x: bounds.width, y: bounds.height};
},
getScrollSize: function(){
@@ -87,7 +116,7 @@ Element.implement({
try {
return element.offsetParent;
} catch(e) {}
} catch(e){}
return null;
},
@@ -89,6 +89,100 @@ describe('Element.Dimensions', function(){
});
describe("SVG dimensions", function(){
if (!document.addEventListener) return; // IE8- has no support for svg anyway, so this spec does not apply
var svgElements = [{
el: 'svg',
prop: {
'xmlns': 'http://www.w3.org/2000/svg',
height: '200px',
width: '142px',
viewBox: '0 0 512 512'
}
}, {
el: 'polygon',
prop: {
fill: "#E44D26",
points: "107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"
}
}, {
el: 'polygon',
prop: {
fill: "#F16529",
points: "256,480.523 376.03,447.246 404.27,130.894 256,130.894"
}
}, {
el: 'polygon',
prop: {
fill: "#E44D26",
points: "107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"
}
}, {
el: 'polygon',
prop: {
fill: "#EBEBEB",
points: "256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"
}
}, {
el: 'polygon',
prop: {
fill: "#EBEBEB",
points: "256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"
}
}, {
el: 'path',
prop: {
d: "M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"
}
}, {
el: 'path',
prop: {
d: "M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"
}
}, {
el: 'path',
prop: {
d: "M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"
}
}, {
el: 'path',
prop: {
d: "M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"
}
}, {
el: 'polygon',
prop: {
fill: "#FFFFFF",
points: "255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"
}
}, {
el: 'polygon',
prop: {
fill: "#FFFFFF",
points: "255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"
}
}];
var svgContainer;
svgElements.each(function (e, i){
var thisElement = document.createElementNS('http://www.w3.org/2000/svg', e.el);
thisElement.setProperties(e.prop);
if (i == 0){
svgContainer = thisElement
$(document.body).adopt(thisElement);
return
};
svgContainer.adopt(thisElement);
});
var svgElement = document.getElement('svg');
it("should get the correct height and width of a svg element", function(){
expect(svgElement.getSize().y).toEqual(200);
expect(svgElement.getSize().x).toEqual(142);
svgElement.destroy();
});
});
describe('Element.getPosition', function(){
it('should measure the x and y position of the element', function(){

0 comments on commit 6837e04

Please sign in to comment.