Closed Bug 736431 Opened 12 years ago Closed 12 years ago

Inline <svg> is given the CSS default height of 150px when the height is not explicitly specified

Categories

(Core :: SVG, defect)

11 Branch
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: julien.sanchez, Unassigned)

References

Details

(Keywords: dev-doc-needed, regression)

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:11.0) Gecko/20100101 Firefox/11.0
Build ID: 20120316083740

Steps to reproduce:

Open jsfiddle test case at http://jsfiddle.net/gentooboontoo/YaM7q/8/



Actual results:

As of firefox 11 version (problem did not occur in Firefox 10), inline svg is clipped when its root element has no width or height attribute.

In jsfiddle test case, the first SVG is clipped beacause SVG has no width or height attribute.
The second one is correct because it has height and width attributes.


Expected results:

SVG should not be clipped and have the height of its parent if I understand correctly http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute

Problem does not occur in chrome nor firefox 10
Rendering problem occurs with Windows and Linux.
Component: Untriaged → SVG
OS: Linux → All
Product: Firefox → Core
QA Contact: untriaged → general
Hardware: x86_64 → All
It seemed to be regressed by Bug 611099 and Bug 668163
Blocks: 668163, 611099
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression
This was an intentional change to address what was felt was unexpected behavior of inline SVG. See bug 668163 comment 26 and 27.

Basically if the width and height attributes are not explicitly set, inline <svg> is treated as having a width and height of 'auto'.
Summary: inline svg rendering is clipped when root svg has no width or height attributes → Inline <svg> is given the CSS default height of 150px when the height is not explicitly specified
IE9CP, IE9, Chrome17.0.963.79m and Opera11.61 are as expected.
Only Firefox11-14a1 is different in a result.
Authors frequently found the previous behavior confusing; the relevant specifications are clear that our new behavior is correct.  See, in particular, http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#IntrinsicSizing , which says:

  Note: the ‘width’ and ‘height’ attributes are not the same as the CSS
  width and height properties. Specifically, percentage values do not
  provide an intrinsic width or height, and do not indicate a percentage
  of the containing block. Rather, once the viewport is established,
  they indicate the portion of the viewport that is actually covered by
  image data.

and the size computation rules in:
http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width
http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height

I'm not sure if the spec has been revised to reflect what makes the second example work, though.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → INVALID
This behavior need to be documented on MDN

At least in those 2 pages :
 - https://developer.mozilla.org/en/SVG_In_HTML_Introduction
 - https://developer.mozilla.org/en/SVG/Element/svg
Keywords: dev-doc-needed
http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute

"If the attribute is not specified, the effect is as if a value of '100%' were specified."

That seems to be directly contradicted by the new behavior.
For the purpose of the attribute's meaning within SVG, it is -- the graphic occupies the complete viewport.  But http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing is clear that percentage widths and heights "do not provide an intrinsic width or height, and do not indicate a percentage of the containing block".
You need to log in before you can comment on or make changes to this bug.