147185 2015-07-21 23:34:42 -0700 Webkit renders the alt text of images w/o src property and using width:auto incorrectly 2024-01-16 21:17:51 -0800 1 1 1 Unclassified WebKit Images 528+ (Nightly build) Unspecified Unspecified NEW P2 Major --- 1 wkbugzilla webkit-unassigned 1266joules ahmad.saleem792 gsnedders heycam peng.liu6 simon.fraser wkbugzilla zalan oldest_to_newest 1111216 0 257244 wkbugzilla 2015-07-21 23:34:42 -0700 Created attachment 257244 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. 1743991 1 gsnedders 2021-03-25 16:48:25 -0700 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. 1799937 3 ap 2021-10-03 17:23:08 -0700 The content of attachment 439998 has been deleted for the following reason: spam/phishing 2005483 4 ahmad.saleem792 2024-01-16 21:17:51 -0800 *** 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! 257244 2015-07-21 23:34:42 -0700 2015-07-21 23:34:42 -0700 Minimal html example reporting the img widths using js minimal-img-example.html text/html 1250 wkbugzilla PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij48 L21ldGE+CiAgICA8dGl0bGU+VGVzdCBtaXNzaW5nIGltYWdlIHNyYyBhbmQgbG9uZyBhbHQgdGV4 dDwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8cCBpZD0ib3V0cHV0Ij48L3A+CgogICAgPGRp dj4KICAgICAgICA8aW1nIGhlaWdodD0iNSIgYWx0PSJMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1l dCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LCBzZWQgZG8gZWl1c21vZCB0ZW1wb3IgaW5j aWRpZHVudCB1dCBsYWJvcmUgZXQgZG9sb3JlIG1hZ25hIGFsaXF1YS4iIHN0eWxlPSJ3aWR0aDph dXRvOyI+CiAgICA8L2Rpdj4KICAgIDxkaXY+CiAgICAgICAgPGltZyBoZWlnaHQ9IjUwIiBhbHQ9 IkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQs IHNlZCBkbyBlaXVzbW9kIHRlbXBvciBpbmNpZGlkdW50IHV0IGxhYm9yZSBldCBkb2xvcmUgbWFn bmEgYWxpcXVhLiIgc3R5bGU9IndpZHRoOmF1dG87Ij4KICAgIDwvZGl2PgogICAgPGRpdj4KICAg ICAgICA8aW1nIGhlaWdodD0iNTAwIiBhbHQ9IkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBj b25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQsIHNlZCBkbyBlaXVzbW9kIHRlbXBvciBpbmNpZGlk dW50IHV0IGxhYm9yZSBldCBkb2xvcmUgbWFnbmEgYWxpcXVhLiIgc3R5bGU9IndpZHRoOmF1dG87 Ij4KICAgIDwvZGl2PgoKICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAg ICB3aW5kb3cub25sb2FkID0gZnVuY3Rpb24oKSB7CiAgICAgICAgICAgIHZhciBhbGxJbWFnZXMg PSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSggJ2ltZycgKSwKICAgICAgICAgICAgICAg IHRleHQgPSAnUmVzcGVjdGl2ZSBpbWFnZSB3aWR0aHMgYXJlOiAnLAogICAgICAgICAgICAgICAg bGVuID0gYWxsSW1hZ2VzLmxlbmd0aCwKICAgICAgICAgICAgICAgIGkgPSAwOwogICAgICAgICAg ICBmb3IgKCA7IGkgPCBsZW47IGkrKyApIHsKICAgICAgICAgICAgICAgIHRleHQgKz0gKyBhbGxJ bWFnZXNbaV0ud2lkdGggKyAoIGkgPCBsZW4gLSAxID8gJywgJyA6ICcnICk7CiAgICAgICAgICAg IH0KICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoICdvdXRwdXQnICkuaW5uZXJI VE1MID0gdGV4dDsKICAgICAgICB9CgogICAgPC9zY3JpcHQ+CjwvYm9keT4KPC9odG1sPgo=