W3C home > Mailing lists > Public > public-css-testsuite@w3.org > August 2012

Re: Percentage Height of a Replaced Element in a Table Cell

From: Gérard Talbot <css21testsuite@gtalbot.org>
Date: Tue, 7 Aug 2012 18:33:06 -0400
Message-ID: <0b9d0941b82ca52263ec3ba7bd5b067c.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Robert Hogan" <lists@roberthogan.net>
Cc: public-css-testsuite@w3.org

Le Mar 7 août 2012 17:57, Robert Hogan a écrit :
> My snippets were incorrect. :(
> So let me try that again:
> Browsers disagree on how to render this snippet:
>         <table style="width:20px;height:20px">
>             <tr>
> <td style="width:100%;height:100%"><img style="height:100%"
> src="50x50.png"></td>
>             </tr>
>         </table>

The same logic given, explained before will apply.

CSS 2.1 does not define how the height of table cells and table rows is
calculated when their height is specified using percentage values.
17.5.3 Table height algorithms

So, the used height fo the table-cell could be any value (20px or 50px
or 123px); it is undefined.

> WebKit, FF: the image is rendered as 50x50
> IE, Opera: the image is rendered as 20x20
> I believe IE and Opera are correct here: "The percentage is calculated
> with
> respect to the height of the generated box's containing block." Going up
> the chain this is 20px.
> This is distinct from the following case, where rendering 50x50 would be
> the right thing to do:
>         <table>
>             <tr>
>                 <td><img style="height:100%" src="50x50.png"></td>
>             </tr>
>         </table>
> "If the height of the containing block is not specified explicitly
> (i.e.,
> it depends on content height), and this element is not absolutely
> positioned, the value computes to 'auto'."

Yes, this is the right thing to do: img's containing block is the
table-cell which uses 'height: auto', so the img intrinsic height and
width will be used.

> Am I right in thinking this?
> Thanks,
> Robert

(More on what I wrote in my previous email)

Regarding 'overflow: visible' and table-cell element and table element:

Overflow and table-cell (non-replaced inline element):



Proposed improvement:






Contributions to the CSS 2.1 test suite:

CSS 2.1 Test suite RC6, March 23rd 2011:

CSS 2.1 test suite harness:

Contributing to to CSS 2.1 test suite:
Received on Tuesday, 7 August 2012 22:33:38 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:13:24 UTC