Gecko:SVGLayout

SVG layout is a bit weak. Here are some use cases that don't work with existing standards or our implementation:

• Wrap an SVG container around an auto-height HTML element (e.g., to rotate it, or to apply a filter). I think there's just no way to do this right now. SVG does not support inside-out sizing.

(We can make <foreignObject> size around its contents using dbaron's 'width: shrink-wrap' or some such. Not sure how to make <svg> shrink wrap around the <foreignObject> though. -Hixie)

• XUL + SVG? Not sure what the typical use case is here. Can someone paste an example?

• A big use case is going to be drawing an SVG element as the background (or foreground) of a regular HTML or XUL element. For HTML we can do this:

<div style="position:relative; z-index:0;">
  <svg xmlns="..." style="position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%;">...</svg>
</div>

I guess this doesn't work in XUL. But could a XUL stack do the same thing? Maybe it's not a great solution for HTML either ... should we come up with something easier? Although for HTML this could be abstracted nicely via CSS:

  .svg-container { position:relative; z-index:0; }
  .svg-container > svg { position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%; }

(Better, probably, from an HTML author point of view, is to support SVG in the CSS 'background-image' property. -Hixie)

Some suggestions:

• Treat <svg> as a replaced element (default inline). (I think we're already doing this? - no, not currently. bz looked at it and thought it would be best done after the reflow changes land in 1.9 - bug 294086) Change the SVG spec for compound SVG documents so that if the "width" or "height" attributes are missing, instead of using "100%" (whatever that means) as the intrinsic width or height, we use the bottom or right edge of the rectangle that encloses the element's contents' overflow area as the intrinsic size reported to outer layout, and set the width/height as used by contained elements to zero.

• Fix svg elements so that they report a correct overflow area to CSS layout when content spills out of them.

• Make the "width" and "height" attributes optional on foreignObject. We'll compute an intrinsic width or height from the enclosed content and use that.

Actually I think this is enough to solve my SVG container problem. Then I can just write

<p>Hello
<svg style="display:block;" width="100%" xmlns="...">
  <foreignObject transform="translate(50%,0) rotate(90)">
     <div xmlns="...">Hello</div>
  </foreignObject>
</svg>
<p>Kitty

The outer SVG element will grow in height to include the bottom edge of the foreignobject. It would look something like this:

   Hello
           H
           e
           l
           l
           o
   Kitty

(The glyphs in the vertical Hello would be rotated by 90 degrees.)

• In addition we could look at supporting the XUL CSS properties on SVG elements.