804201 - SVG scroll height and width not available when width/height are determined by CSS stylesheet.

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[Josh]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4

Steps to reproduce:

function createsvg(target, callback){
	var target = target, svgelement = document.createElementNS ("http://www.w3.org/2000/svg", "svg"),
		nodecheck = new elementcreated(svgelement, done);
	target.appendChild(svgelement);
	svgelement.setAttribute("loaded", true);
	function done(target){ callback(svgelement); }
}

var elementcreated = function(target, callback){
	check();
	function check(){
		var status = target.getAttribute("loaded");
		if(status == null) setTimeout(check, 100);
		else { callback(target); return true; }	
	}
}



Actual results:

I am attempting to create an SVG item and then add elements to it. I've been experiencing issues with the element being modified before it was inserted into the DOM. I ended up writing a listener which looks for the attribute "loaded" to be on. 

This works fine, but the issue I'm experiencing now is that my scroll width and height come up with 0,0 no matter what. As a result, my math for my SVG drawing is creating bad plots. 


Expected results:

Once the element was successfully inserted to the dom (and had an attribute added to it). That element's scroll width and height should return something other than 0,0. 

Firefox - http://screencast.com/t/JADeAZrmT
Chrome - http://screencast.com/t/2qJWYSsl

Comment 1

[Robert Longson [:longsonr]]

Your example functions don't seem to have scroll width and height, whatever they are. Can you explain what you are doing to get these things?

Comment 2

[Robert Longson [:longsonr]]

Do you mean this? http://dev.w3.org/csswg/cssom-view/#extensions-to-the-element-interface

If so look at getClientRects. If the element does not have an associated CSS layout box and is in the http://www.w3.org/2000/svg namespace... It does something.

Compare with scrollWidth where it says...

If the element does not have any associated CSS layout box return zero and terminate these steps.

So it seems we're doing exactly what the specification requires, no?

Comment 3

[Josh]

I have a function grabbing size here
var elementsize = function(element){
	if(element.scrollHeight != 0 || element.scrollWidth != 0) return [element.scrollHeight, element.scrollWidth];
	else return [element.getAttribute("height"), element.getAttribute("width")];
}

I added the else and then FF worked. 

I thought that object.scrollHeight would give the height of the item regardless of what is shown? Did I misunderstand this?

I have my svg defined in css as such

svg {
   display: block;
   width:100%
   height:100%
   position:relative;
}

In webkit, the SVG automatically takes the size of it's parent (which is set to pos relative). In Mozilla, it takes 0,0 as the default height. 

Can you explain what I did wrong? Like I stated, I ended up getting everything to work by adding that else to my statement. I would love to have a single scenario that is able to grab element height/width for my SVG items. Any thoughts or suggestions?

Comment 4

[Josh]

Also, clientrects.top and clientrects.bottom = the same in FF, works in Chrome

Comment 5

[Robert Longson [:longsonr]]

scrollWidth and scrollHeight should be 0 always for SVG elements per http://dev.w3.org/csswg/cssom-view/#extensions-to-the-element-interface

Getting the width/height attributes will return what you set them to, in your case null as they aren't set.

Normally one gets the width/height of SVG elements by calling getBBox or getBoundingClientRect. These methods must only be called after the onload event for the outer svg element has fired.

Comment 6

[Josh]

getBoundingClientRect returns the same top and bottom thus height == 0 though :(

Comment 7

[Robert Longson [:longsonr]]

If you have an example of that happening after the svg onload event has fired then do attach it. Here's a site that shows it working: http://go2ghana.net/devel/svg/demo.php