CODEWITHSUNDEEP
htmlcsscross-browser
Jacob C.
Jacob C.

Reputation: 364

For broken images, is it specified anywhere whether browsers are supposed to obey width/height attributes/CSS or consider them replaced elements?

I noticed that there is very different behavior among browser of what gets shown when display:inline images are broken. When an image is broken, is there supposed to be any standard behavior, at least in terms of whether width and height (HTML attributes or CSS) are still obeyed, and whether the element still gets treated as a replaced element?

https://html.spec.whatwg.org/multipage/images.html#img-error doesn't seem to define this. Is there something supplementary somewhere that does? I'm used to different browsers having things like different broken image icons since the earliest graphical browsers, but I thought that at least layout-related stuff would be specified somewhere now. Is this not the case?

When src is 404ed, there is an alt attribute, and display is left as the default (inline):

Other things I noticed in the broken images below:

(Images with no alt attributes are not actually valid HTML, but are shown for comparison of behavior.)

Tested in Chrome 64, Firefox 58, Safari 11, EdgeHTML 16.16299

img{
  border:1px solid black;
  margin:1em;
  padding:1em;
}

.force-ib-images img{
  display:inline-block;
}
<img src="x" width="300" height="120" alt="alttext"> (alt="alttext") <br>
<img src="x" width="300" height="120" alt=""         > (alt="")<br>
<img src="x" width="300" height="120" alt            > (alt)<br>
<img src="x" width="300" height="120"                > (no alt attribute)<br>

<hr>

<h3>
  with height/width set via css:
</h3>

<img src="x" style="width:300px; height:120px" alt="alttext"> (alt="alttext") <br>
<img src="x" style="width:300px; height:120px" alt=""         > (alt="")<br>
<img src="x" style="width:300px; height:120px" alt            > (alt)<br>
<img src="x" style="width:300px; height:120px"                > (no alt attribute)<br>

<hr>

<div class="force-ib-images">

  <h3>
    Forced inline-block:
  </h3>

  <img src="x" style="width:300px; height:120px" alt="alttext"> (alt="alttext") <br>
  <img src="x" style="width:300px; height:120px" alt=""         > (alt="")<br>
  <img src="x" style="width:300px; height:120px" alt            > (alt)<br>
  <img src="x" style="width:300px; height:120px"                > (no alt attribute)<br>

</div>


<hr>

  <h3>
    With image:
  </h3>

<img src="https://i.imgur.com/FQFzBJh.png" width="300" height="120" alt="an image">

JSFiddle: https://jsfiddle.net/upkt6p7p/

Upvotes: 2

Views: 1100

Answers (1)

Alohci
Alohci

Reputation: 82966

From HTML 5.3 10.4.2 Images: (WHATWG)

If the element is an img element that represents some text and the user agent does not expect this to change

The user agent is expected to treat the element as a non-replaced phrasing element whose content is the text, optionally with an icon indicating that an image is missing, so that the user can request the image be displayed or investigate why it is not rendering. In non-graphical contexts, such an icon should be omitted.

So it should be a non-replaced element when the image is broken.

But note that browsers do not have to be compliant with section 10. "is expected" means that the browser only need comply if it claims to do so.

User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents that, if followed, are likely to lead to a user experience that closely resembles the experience intended by the documents' authors. [...] For the purposes of conformance for user agents designated as supporting the suggested default rendering, the term "expected" in this section has the same conformance implications as "must". (10 Rendering)(WHATWG)

Upvotes: 1

Related Questions