1251566 - SVG images in <img> without explicitly set width attribute have miscalculated width

Status: RESOLVED DUPLICATE of bug 987629

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[Manuel Strehl]

This might be a duplicate of #1204850. Especially Boris’s last comment seems to point to my issue.

A test case is here: https://jsfiddle.net/boldewyn/q4cma9go/

How to reproduce:

1. Use a simple SVG with a viewBox="0 0 100 100" set, but without width or height attributes.

2. Embed it via <img> in an HTML element with display: inline-block

3. Set the <img>'s max-height to, e.g., 24px.

3. Note, that the <img> is shown, any text is correctly following the image, but the containing inline-block has the wrong width, i.e. a width as if the image had 0px width.

So, there is a mismatch. The container assumes the <img> to have width=0, but the DOM says, there is a width (in the dev tools): $0.width === 24, and the following content is pushed further by these 24px.

What should have happened?

The calculated width of the <img> should be the same as its height, and in this case 24px for both. This value should be propagated to the rendering of its parent. The desired rendering is shown, too, in the JSFiddle.

Comment 1

[Karl Dubost💡 :karlcow]

This seems related to Bug 987629

Comment 2

[Dennis Schubert [:denschub]]

Tentatively closing this as a duplicate of bug 987629. If someone disagrees, please reopen.