Bug 154049 – The heights of SVG elements using relative sizes are miscalculated within border-box parents

• Component: SVG
• Status: NEW

[[e-mail]]

Overview:
When including an SVG element within a parent element that uses `box-sizing: border-box`, the relative height of the SVG element seems to be miscalculated.


Steps to reproduce:
- Create an enclosing block element with the `box-sizing: border-box` directive.
- Add a padding value > 0 for this enclosing element.
- Create an inner SVG element with the `height: 100%` directive.
- Observe that the SVG element has a height that is too short by a factor of 2x the parent's padding.



Expected results:

I would expect an SVG element to be sized identically to a `<div>` element that uses `box-sizing: border-box`, as here:
https://jsfiddle.net/p9ke6bo9/

Note that the underlying black box forms a 10px "border" all around the white box.


Actual results:

When you change the `<div>` element to `<svg>` in the example above, the black outline grows to 30px at the bottom:
https://jsfiddle.net/p9ke6bo9/1/

This seems to be because the `<svg>` element is subtracting 4 * 10px (instead of 2 * 10px) from the parent element's height.


Additional example:

When you remove the `box-sizing: border-box` directive from the outer element, the inner `<svg>` element draws correctly:
https://jsfiddle.net/p9ke6bo9/3/

[Said Abou-Hallawa]

Created attachment 271022 [details]
black-screen-shot

When opening https://jsfiddle.net/p9ke6bo9/1/, sometimes I get whole page filled with black. See the attached picture black-screen-shot.

[Swimmer F]

Ran into this bug today (I think).
> - Observe that the SVG element has a height that is too short by a factor of 2x the parent's padding.
My elements end up too tall.

https://jsfiddle.net/nj5a0dyq/

Playing with some paramters led me to the following findings:

- Behaves as expected as long as the sum of padding-top + padding-bottom is less than half the container's height
- Any padding, top or bottom, beyond half the container's height causes the <svg> to become that much taller instead of making it that much shorter (expected behaviour)

[Radar WebKit Bug Importer]

<rdar://problem/97102170>

[Ahmad Saleem]

https://jsfiddle.net/nj5a0dyq/ & https://jsfiddle.net/p9ke6bo9/1/

^ All browsers (Safari Technology Preview 210, Chrome Canary 133 and Firefox Nightly 135) shows same.