Re: Treating 'calculated' height as 'specified' height when computing max-height and min-height

My take is that the FF/IE behaviour is correct (the img should be 100px
high), since by using "top:0; bottom:0;" on #inner, the author is
indicating that the height of #inner is intended to be the same as #outer,
without having to repeat "height:100px;".

If EITHER "top" ONLY or "bottom" ONLY (or neither) were specified, then the
img would be 300px high.

For any value of "top" and "bottom" (lengths or percentages), if they are
BOTH specified, then #inner should be treated as if it's height were
explicitly defined.

e.g. If "top:5px; bottom:0px;" was specified on #inner, then that should be
equivalent to "top:5px; height:95px;".

This behaviour should also apply if, for example, "top:5px;" only was
specified in the CSS for #inner (img height would be 300px), and then
"bottom:0px;" was later added to #inner through a style change via
JavaScript (img height would then be 95px).


- Greg Holmes


On Thu, Nov 13, 2014 at 11:18 AM, Robert Hogan <robhogan@gmail.com> wrote:

> At https://crbug.com/422919 we have an interoperability difference
> between Blink and FF/IE we would like to sort out. In the following test
> case Blink renders the images as 300px high, while FF/IE render it as 100px
> high.
>
> <style>
> #outer {
>     height: 100px;
>     outline: 1px solid;
>     position:relative;
>     }
> #inner { top:0; bottom:0; position:absolute; }
> img { max-height: 100%; }
> </style>
> <div id="outer">
>     <div id="inner">
>         <img src="http://placehold.it/300x300" />
>     </div> 
> </div>
>
>