Bug 307332 – getComputedStyle of undefined width and height of rect and foreignObject must report 0px

• Status: NEW
• Component: SVG

[Karl Dubost]

This is related 
https://wpt.live/svg/geometry/parsing/height-computed.svg

Take this very simple SVG document:

```
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
   <rect></rect>
</svg>
```

Then:

`window.getComputedStyle(document.querySelector('rect')).height`

* Blink reports `0px`
* Firefox/Safari reports `auto`.
* WPT is expecting `0px`

The definition in SVG2 specs.

The [rect element](https://w3c.github.io/svgwg/svg2-draft/shapes.html#RectElement) defines the `width` and `height` attributes.

> The [width](https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing) and [height](https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing) properties define the overall width and height of the rectangle. A negative value for either property is [invalid](https://w3c.github.io/svgwg/svg2-draft/types.html#TermInvalidValue) and must be [ignored](https://drafts.csswg.org/css-syntax/#css-ignored). **A computed value of zero for either dimension disables rendering of the element**.

This last sentence is important. Let's keep it in mind.

The definition of `width` and `height` attributes are in [7.8. Sizing properties: the effect of the ‘width’ and ‘height’ properties](https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing).

> The CSS [width](https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing) and [height](https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing) properties are used for sizing some SVG elements. Specifically, they are used to size ‘[rect](https://w3c.github.io/svgwg/svg2-draft/shapes.html#RectElement)’, ‘[svg](https://w3c.github.io/svgwg/svg2-draft/struct.html#SVGElement)’, ‘[image](https://w3c.github.io/svgwg/svg2-draft/embedded.html#ImageElement)’ and ‘[foreignObject](https://w3c.github.io/svgwg/svg2-draft/embedded.html#ForeignObjectElement)’. All of these elements have ‘width’ and ‘height’ presentation attributes. The properties are also used for laying out embedded elements from the HTML namespace.

This section deserves probably a summary table in the spec.

| element | value | treated as |
|-|-|-|
| svg | `auto` | `100%` |
| image | `auto` | intrinsic dimensions and aspect ratio |
| other elements (rect, foreignObject)| `auto` | `0` |

There is an incomplete additional paragraph.
> Content dependent units used in 'width' and 'height' for inner SVG elements resolve to SVG's definition of @@ unknown term "auto".

if we click on width and height, we go to 
* [CSS 2.1 width](https://www.w3.org/TR/CSS2/visudet.html#propdef-width)
* [CSS 2.1 height](https://www.w3.org/TR/CSS2/visudet.html#propdef-height)

But the up to date version is 
* [CSS 2.2 width](https://www.w3.org/TR/CSS22/visudet.html#the-width-property) - **Initial**: `auto`
* [CSS 2.2 height](https://www.w3.org/TR/CSS22/visudet.html#the-height-property) - **initial**: `auto`

which according to the table just above means: `0` for the SVG `rect` element.

So I guess, they are defined as [Non-rendered elements](https://www.w3.org/TR/SVG2/render.html#Rendered-vs-NonRendered).

> Non-rendered elements are not represented in the document accessibility tree. Nonetheless, they remain part of the document model, and participate in [style inheritance and cascade](https://www.w3.org/TR/SVG2/styling.html).

[Radar WebKit Bug Importer]

<rdar://problem/170469792>