1238900 - max-width: 100% does not work correctly on img inside table

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Mikko Rantalainen]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20151210085006

Steps to reproduce:

Open test case at
https://jsfiddle.net/wz7s7hhh/

The trigger for this bug seems to be image with max-width (and no width) combined with a table cell. I understand that if the table has no style, the test case would be underspecified and the current behavior would be according to CSS spec as far as I know. However, the test case includes table, img { max-width: 100%; } which should be enough to make the image at least narrower than the viewport.


Actual results:

The big image overflows the container (marked with red border).


Expected results:

The big image should have been scaled to fit the table cell (marked with blue border) and the blue border should be sized to take 50% of the table according to CSS.

The test case works correctly with webkit/Chrome 47.0 and Microsoft Edge 20.0.

Can be reproduced at least with Firefox 43.0 and latest-mozilla-central build. Firefox behavior seems similar to Internet Explorer 11.0.

Comment 1

[Mikko Rantalainen]

Related: bug 434230 and bug 975632. I believe this bug is technically a bit different from those, though.

Comment 2

[Boris Zbarsky [:bzbarsky]]

> which should be enough to make the image at least narrower than the viewport

Why?  The table will ignore its max-width style if its kids are too big, because auto-layout table cells never allow overflow of direct kids by default.

This really looks identical to bug 823483 to me....

Comment 3

[Karl Dubost💡 :karlcow]

This is fixed by bug 823483 https://jsfiddle.net/wz7s7hhh/