1165595 - [quirks] intrinsic width of image with percentage height does not correctly account for the quirks percentage height behavior

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Simon Albinsson]

Attachment: Screenshot of the problem.

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20150415140819

Steps to reproduce:

Created an image in a div and resized it proportionally using css width:auto . Setting the overflow property does not help.

<STYLE>
div {
    border: solid 1px green;
}
.container {
   height:400px;
   width:300px;
}

.holder{
	border: solid 1px blue;
    float:right;
}
.resized {
	height:90%;
}
</STYLE>
<div class="container">
    <div class="holder">
        <img class="resized" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAACPAgMAAADM7sDzAAAACVBMVEXMzMz+/v7///9Fv2/IAAAA7ElEQVRIS+3OMWrDQBAF0L9LNERbJRCDpNoGSaeY2tU2blK5SJVT6Ah7hCGkcOaUKRzv7gRsSBNM4t89+Mx84C9mgmAXazp9L2Qh7jPHRVpQYZQOnjMfLvLJ8t6ysZed/evMqtGZzbdcYVQmDGcZMPFzzZG3htHyMRiuLHvLO0ucp8ol/lYC0Oww63LkwHjVlLlilxDHU3mzeAYy94lQMe0JyKfcsibMkslrwiynstcDAZmkH54LGzQuFbagelUHz/XmW64vPWirb6qHIwltqOi5CwDkq+zSS03EaLjhoFI4WAaY8k/57VTNf5VPpH1Mhhj2avwAAAAASUVORK5CYII=">
    </div>
    <div>
        LOL, div.. Div Div Div Div Div Div Div Div Div Div Div 
    </div>
	</div>
<pre id="debug">
</pre>
<script>
	var pre=document.getElementById("debug");
	pre.innerHTML+="Image:"+JSON.stringify(document.body.getElementsByClassName("resized")[0].getBoundingClientRect()) +"<br>"
	pre.innerHTML+="Container:"+JSON.stringify(document.body.getElementsByClassName("holder")[0].getBoundingClientRect())  +" (equal-ish in chrome)"
</script>


Actual results:

The div "holder" in the folowing sniplet get the wrong width due to the images width not correctly propagating upon resizing.


Expected results:

The image getting aligned along the right edge of the div

Comment 1

[Simon Albinsson]

Attachment: The HTML-code in the message, as a file.

Comment 2

[Alice0775 White]

The behavior of the following browsers is same as Firefox's.
IE11 on Windows7
IE11 and Spartan0.11 on Windows10TP



The behavior was changed by Bug 300030 since Firefox3.

Comment 3

[Boris Zbarsky [:bzbarsky]]

All that's going on here, as far as I can tell, is that intrinsic width computations for replaced elements with an intrinsic ratio are not aware of quirks percentage height behavior.  Putting the testcase in standards mode makes everything work as expected.

Bug 681499 seems vaguely related.

My suggestion is to not use quirks mode if you can avoid it.