Bug 147185 – Webkit renders the alt text of images w/o src property and using width:auto incorrectly

• Status: NEW
• Component: Images

Created attachment 257244 [details]
Minimal html example reporting the img widths using js

When the src property of an img tag is missing, the alt text is displayed as expected. However, when a height is specified for the image and width:auto is applicable then the overall width of the element can be very large and is dependent on the length of the alt text and the height e.g. specifying a height="500" with an alt string of 123 chars will result in an image element 18,136px wide - depending on base font size. 

The following img tags are identical except for height and the resulting element widths are 181, 1814 and 18136px respectively:

<img height="5" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." style="width:auto;">
<img height="50" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." style="width:auto;">
<img height="500" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." style="width:auto;">

This occurs on Safari Version 8.0.6 (10600.6.3) on OS X 10.10.3 and the current Safari (and related UIWebView) version on iOS 8.4. 

Depending on the javascript techniques used on the site (e.g. setting parent.style.width = childImg.scrollWidth) this can cause iOS Safari+Webkit apps to crash.

Note that this does *not* occur if the src attribute is present but the actual image is not found. As per #62774 the alt text is not displayed at all but the resultant element is the correct size.

fwiw Chrome (Version 43.0.2357.134 (64-bit)) and Firefox (39.0) on OS X 10.10.3 and Chrome on iOS render the above img examples identically as expected.

[Sam Sneddon [:gsnedders]]

Sounds like we're using the width of the line box as the intrinsic width.

https://html.spec.whatwg.org/multipage/rendering.html#images-3 is the relevant part of the HMTL spec, specifically with:

> 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.

where:

> The icons mentioned above are expected to be relatively small so as not to disrupt most text but be easily clickable. In a visual environment, for instance, icons could be 16 pixels by 16 pixels square, or 1em by 1em if the images are scalable. In an audio environment, the icon could be a short bleep. The icons are intended to indicate to the user that they can be used to get to whatever options the UA provides for images, and, where appropriate, are expected to provide access to the context menu that would have come up if the user interacted with the actual image.

[Alexey Proskuryakov]

The content of attachment 439998 [details] has been deleted for the following reason:

spam/phishing

[Ahmad Saleem]

*** Safari 17.2.1 ***

Respective image widths are: 181, 1814, 18136

*** Chrome Canary 122 ***

Respective image widths are: 809, 809, 809

*** Firefox Nightly 123 ***

Respective image widths are: 793, 793, 793

____

Just wanted to share updated test results. Thanks!