Closed Bug 597272 Opened 14 years ago Closed 14 years ago

An SVG element in html resolves to a computed style of 'auto' instead of '100%'

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: jamesr, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.5 Safari/534.7
Build Identifier: 4.0b7pre

The following HTML produces a green circle when it should render only text:

<!DOCTYPE html>
<html>
<body>
<p>This circle is drawn via SVG.</p>
<svg>
<circle cx="20" cy="20" r="20" fill="green" />
</svg>
</body>

the 'height' attribute on the <svg> element should be 100%, due to http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute.  This should map to a computed style value of 100% due to http://www.w3.org/TR/SVG/styling.html#UAStyleSheet.  Then, thanks to http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height, the intrinsic height should then collapse down to 0px.

Currently in WebKit the circle displays due to a bug in WebKit's calculation of percentage heights on replaced elements (which I'm also in the process of fixing).

Reproducible: Always
Status: UNCONFIRMED → NEW
Ever confirmed: true
<svg> sizing in CSS contexts in SVG 1.1 is completely broken.  The SVG working group has completely redone it in SVG Tiny 1.2, and is working on errata for SVG 1.1.In particular, the 'height' attribute of the <svg> element is not set in SVG 1.2 Tiny in the case above (because a lacuna value doesn't affect the DOM, so even if you use the suggested styles from the UA sheet in svg 1.1 you get nothing specified).But even ignoring all that, you're misreading CSS2.1.  Even if you use the SVG 1.1 stuff, so that the _specified_ height value is 100%, the computed value has to be determined per http://www.w3.org/TR/CSS21/visudet.html#the-height-property which says:    Specifies a percentage height. The percentage is calculated with respect    to the height of the generated box's containing block. If the height of    the containing block is not specified explicitly (i.e., it depends on    content height), and this element is not absolutely positioned, the value    computes to 'auto'.So in this case, the computed height of the <svg> is very much 'auto'.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → INVALID
Er...  Let's try that again.

<svg> sizing in CSS contexts in SVG 1.1 is completely broken.  The SVG working
group has completely redone it in SVG Tiny 1.2, and is working on errata for
SVG 1.1.

In particular, the 'height' attribute of the <svg> element is not set in SVG
1.2 Tiny in the case above (because a lacuna value doesn't affect the DOM, so
even if you use the suggested styles from the UA sheet in svg 1.1 you get
nothing specified).

But even ignoring all that, you're misreading CSS2.1.  Even if you use the SVG
1.1 stuff, so that the _specified_ height value is 100%, the computed value has
to be determined per
http://www.w3.org/TR/CSS21/visudet.html#the-height-property which says:

    Specifies a percentage height. The percentage is calculated with respect
    to the height of the generated box's containing block. If the height of
    the containing block is not specified explicitly (i.e., it depends on
    content height), and this element is not absolutely positioned, the value
    computes to 'auto'.

So in this case, the computed height of the <svg> is very much 'auto'.
You need to log in before you can comment on or make changes to this bug.