1187172 - parent of img with percentage height too wide when any ancestor has horizontal scrollbar or is border-box with top/bottom padding

Status: RESOLVED DUPLICATE of bug 930218

Description

[goldstar.kevin]

Created attachment 8638275 [details]
reproduce.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

I started with an img with height 100% (and width auto). Then I surrounded that image with a div with percentage height, followed by another div with percentage height, and so on.

I then added added a "overflow-x: auto; overflow-y: hidden" rule to one ancestor and "box-sizing: border-box; padding: 50px 0" to another ancestor.

Reproduced using Firefox 39. Chrome 43 and IE9+ do not exhibit this problem.


Actual results:

For an unbroken chain of ancestors with percentage heights, styling an ancestor with "box-sizing: border-box; padding: 50px 0", or any other amount of top/bottom padding will cause the parent of the image to be too wide.


Expected results:

It looks like what happened is that first, the height of the image was computed without paying attention the amount of space the horizontal scrollbars and top/bottom padding that ancestors used up in the space that the image must fit in, and the width was scaled proportionally. The img's parent was expanded to accommodate these dimensions. Then, the image was shrunk to the correct height as a percentage of its parent after taking into account the vertical padding and scrollbar, while still maintaining its aspect ratio. Although the parent's height shrinks to fit the img height, the parent still respects the img's width as if the img was not shrunk by the vertical padding and horizontal scrollbar of its ancestors.

The expected result was to have the img's parent shrink to the final width of the img after the img is shrunk by height, respecting the vertical padding and horizontal scrollbars of its ancestors.

The attached file includes several CSS rules that demonstrate what I mean. If you only use the CSS declaration that overrides an ancestor's padding, then the extra width of the img parent is exactly the height of an ancestor's scrollbar.

Comment 1

[goldstar.kevin]

Created attachment 8638278 [details]
Expected

Expected layout

Comment 2

[goldstar.kevin]

Might be a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=829958

Comment 3

[Boris Zbarsky [:bzbarsky, bz on IRC]]

Not very likely, since that one is fixed.

But it's a duplicate of bug 930218...