1505403 - <img> with display: inline: should probably accept CSS dimensions

Status: RESOLVED DUPLICATE of bug 1196668

(Core :: Layout: Block and Inline, defect)

Description

[Dennis Schubert [:denschub]]

Attachment: Simple testcase with an inline <img> with dimensions

In the attached test case, I try to set `width` and `height` of an `<img>` tag that has `display: inline;` explicitly set.

To my understanding of CSS, assigning dimensions to an inline element should not work, and that's the current behavior in Firefox, as the image has no width and height==line-height.

Unfortunately, other browsers seem to treat images differently. In Chrome, Safari, and Edge, the dimensions get applied, and you can see a green square, even though the image should be rendered as `display: inline;`. Even more unfortunate, this is causing webcompat issues.

It's maybe worth noting that for <video> tags, the behavior also "weird", but consistent. With the same CSS, a green rectangle is visible in Chrome, Safari, Edge, and Firefox. Other replaced elements stay at normal inline behavior (no width and height) in all browsers.

Comment 1

[Mike Taylor [:miketaylr]]

Sean, can you find someone to give some feedback on this? If we need to implement, we should probs file a bug on the compat standard (at least as a starting point).

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Bug 1196668 has a lot more background. The issue is that normally broken images are an inline, but if there's no alt attribute other browsers do give them a replaced box.

Firefox follows the HTML spec here, but there are proposals to change it on that bug.

Comment 4

[Mike Taylor [:miketaylr]]

Thanks Emilio!