1426095 - intrinsic width calculation for block containing img is too big

Status: UNCONFIRMED

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

Description

[jeppereinhold]

Attachment: expected result - from Chrome 62

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce:

(Originally filed in a years old issue, that somewhat relates to this: https://bugzilla.mozilla.org/show_bug.cgi?id=829958#c13 )

Create a layout with div > div > img, where the inner div and image has height 100% to fill full height, and display block or inline-block.


Actual results:

See this jsfiddle originally by joachim.rolland.marmier that demonstrates the issue: http://jsfiddle.net/nm9u354f/1/

The inner div (green) and the image are correctly full height. But the inner div is now wider than the image, it is actually as wide as the image's intrinsic width in pixels. But the img element is correctly scaled to fit the outer div (blue).

This results in the inner div that should just be as wide as the image, is too wide, if the image is a portrait aspect-ratio.



Expected results:

The inner div (green) should be same size as img element, and thus the green part should not be visible. See attached screenshot from Chrome 62.

Comment 1

[Boris Zbarsky [:bzbarsky]]

> See this jsfiddle originally by joachim.rolland.marmier that demonstrates the issue: http://jsfiddle.net/nm9u354f/1/

So looking at this fiddle, I expect the issue is that the <div id="content"> has auto computed height.  So the <div class="wrapper"> also has auto computed height.  This is then also true of the <div class="imageHolder"> and the <img>.  So when computing the intrinsic width of the image it has auto computed height and its intrinsic width ends up being the naturalWidth of the image.

Now the only real question is why the used heights take that "height: 100%" into account, even though per spec as far as I can tell the computed heights should all be auto.

This seems like fundamentally the same issue as bug 1362999 to me.  The CSS working group really needs to clean up their specs here, because right now the spec doesn't match reality and we're trying to implement the spec...