674520 - computed table width ignores table caption minimum width

Status: UNCONFIRMED

(Core :: Layout: Tables, defect)

Description

[Alain Bryden]

Attachment: Example of Firefox problem with table width vs IE doing it right

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Build ID: 20110615151330

Steps to reproduce:

I created a simple table with a caption and 0 or more rows.

For example:
<table border=1>
<caption align=center style="white-space:nowrap;">Hello Cruel World</caption>
<tr><td>sup</td><td>sup</td></tr>
<tr><td>sup</td><td>sup</td></tr>
<tr><td>sup</td><td>sup</td></tr>
</table>


Actual results:

The table ignored the width of the caption within it - it only computes its width based on the widest visible row. As such, if there are no rows, the computed table width is 0. If the computed table width is less than the width of the caption, the table caption will absurdly extend over the boundaries of the table


Expected results:

The caption is contained within the table tags (and is visible, not floating, etc), so the table's calculated width should adjust to the width of the caption.

Comment 1

[Thomas Ahlblom]

Duplicate of bug 114734?

Comment 2

[Alain Bryden]

I believe Mozilla is trying to achieve better compliance when that bug was posted 3 years ago. Many of the issues mentioned in that ticket have been resolved in FF5, but this issue is outstanding.

Comment 3

[Mats Palmgren (inactive)]

This is the correct layout per CSS 2.1, see
http://www.w3.org/TR/2004/CR-CSS21-20040225/tables.html#q5

Opera 11.50 and IE10 have the same layout in standards mode.

Chrome "14.0.825.0 dev" does not implement what the standard says -
please report it here: https://bugs.webkit.org/

Comment 4

[Mats Palmgren (inactive)]

Just to make it clear it's still correct layout per the latest spec text:
http://www.w3.org/TR/CSS21/tables.html#model
"The width of the table wrapper box is the border-edge width of the table box inside it"

Comment 5

[Alain Bryden]

Firefox does not comply with the resource you linked to: http://www.w3.org/TR/2004/CR-CSS21-20040225/tables.html#q5

The specs say that the table should look like:
_____________________________________
|  CAPTION CAPTION CAPTION CAPTION  |
-------------------------------------
|       +-----+-----+-----+         |
|       |     |     |     |         |
|       +-----+-----+-----+         |
|       |     |     |     |         |
|       +-----+-----+-----+         |
|___________________________________|

But in Firefox, the table looks like this:
_______________________
|  CAPTION CAPTION CAPTION CAPTION
-----------------------
| +-----+-----+-----+ |
| |     |     |     | |
| +-----+-----+-----+ |
| |     |     |     | |
| +-----+-----+-----+ |
|_____________________|


IMO this issue is not resolved so it can't be marked as a duplicate of a resolved issue. Furthermore the ticket it's been marked a duplicate of isn't even from this branch. The resolution of bug 114734 was "this version doesn't support the latest CSS specs - so we WON'T FIX" - that does not apply to FF5


I'll let the ticket rest if Mozilla insists it's a non-issue, but one look at the attached sample image should confirm that it is in fact an issue.

Comment 6

[Mats Palmgren (inactive)]

> Firefox does not comply with the resource you linked to

That's why I provided a link to the up-to-date spec.  Note that it doesn't
really matter much for the example you provided in comment 0.
The (inner) table box has the same width in both version of the spec.

> But in Firefox, the table looks like this

Yes, this is the correct rendering per the latest CSS 2.1 spec.
See comment 4.

> The resolution of bug 114734 was "this version doesn't support the latest CSS > specs - so we WON'T FIX"

No, you have misunderstood what that resolution meant.
Bug 114734 was resolved WONTFIX because implementing the suggested change
would make us deviate from what the spec says is the correct layout.

If I understand what you reported in comment 0 correctly, you're suggesting
that the (inner) table width should have a minimal width equal to the width
of the caption, which is exactly what bug 114734 is about.

Did I understand your reported issue correctly?  If not, please elaborate.

Comment 7

[Alain Bryden]

Alright, I guess that's how it's going to be then. It certainly seems like counter-intuitive behaviour. In this case there's either a need to complain about the spec or I'm misusing the property.

Off the top of your head, while you're closing this ticket again, is there any way to achieve my desired behaviour with some styling of the caption or table? (i.e. have the table width match the width of the caption if it is larger than the table body?)

Comment 8

[Mats Palmgren (inactive)]

Actually, I could be wrong.

http://www.w3.org/TR/CSS21/tables.html#model
"The width of the table wrapper box is the border-edge width of the table box inside it, as described by section 17.5.2."

In 17.5.2.2 there is the notion of CAPMIN:
http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

"The caption width minimum (CAPMIN) is determined by calculating for each caption the minimum caption outer width as the MCW of a hypothetical table cell that contains the caption formatted as "display: block". The greatest of the minimum caption outer widths is CAPMIN."

"2. If the 'table' or 'inline-table' element has 'width: auto', the used width is the greater of the table's containing block width, CAPMIN, and MIN. However, if either CAPMIN or the maximum width required by the columns plus cell spacing or borders (MAX) is less than that of the containing block, use max(MAX, CAPMIN)."

which certainly looks like the "table wrapper box" should grow to fit
the caption.  Item 2 doesn't have the "If the used width is greater than MIN, the extra width should be distributed over the columns." like item 1, but
it seems reasonable to do that also in 2 (that is, the inner table should
grow to fill the wrapper box).

Boris?

Comment 9

[Boris Zbarsky [:bzbarsky]]

All that text is in the "The remainder of this section is non-normative." part of 17.5.2.2.  As in, "this is not a spec, just some prose describing what might be nice".  In practice, auto table layout as described in 17.5.2.2 is not compatible with the web in general last I checked; CSS3 will need to define this stuff properly.  But in the meantime, 17.5.2.2 can't just be implemented as written (even if one wanted to in spite of the non-normative bit).

It does seem like WebKit implements the CAPMIN bits of this, but since neither we nor Presto nor Trident do it's not clear that it's the right thing to specify in CSS3.

ccing dbaron too, since if anyone ends up writing a sane tables layout spec it's likely to be him.

Comment 10

[Gérard Talbot]

(In reply to Mats Palmgren [:mats] from comment #4)
> latest spec text:
> http://www.w3.org/TR/CSS21/tables.html#model
> "The width of the table wrapper box is the border-edge width of the table
> box inside it"

Diagram inside section 17.4 of CSS 2.1 uses something like this:

_______________________
|   CAPTION CAPTION   |
-----------------------
| +-----+-----+-----+ |
| |     |     |     | |
| +-----+-----+-----+ |
| |     |     |     | |
| +-----+-----+-----+ |
|_____________________|

where the caption box is clearly narrower than border-edge width of table box
but CSS 2.1 §17.4 does not specifically address the situation when/where a caption box - which is a normal block box inside [anonymous] table wrapper box - is wider than border-edge width of table box.

It has been suggested that the anonymous table wrapper box be as wide as 
max(table-width, table-caption-min-intrinsic-width) 

Issue 172: table-caption content overflows
http://wiki.csswg.org/spec/css2.1#issue-172

[CSS21] table-caption width
http://lists.w3.org/Archives/Public/www-style/2010Sep/0186.html

2 tests:

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/horizontal-layout-table-vs-caption-boxes-1.html

http://test.csswg.org/suites/css2.1/nightly-unstable/html4/anonymous-table-box-width-001.htm

------------------------

This bug summary should most likely be reworded and improved a bit.

At least 1 other bug report is closely related to this bug: bug 349144.
Bug 96463 comment 36 mentions this issue too.

Comment 11

[Gérard Talbot]

> At least 1 other bug report is closely related to this bug: bug 349144.

Bug 349144 believes that when caption box is larger than table box, then the anonymous table wrapper box should *not be* as large as caption box. 

Bug 674520 thinks the exact opposite: when caption box is larger than table box, then the anonymous table wrapper box *should become* as large as caption box.

To some extent, this issue has to be settled by CSSWG people and then clarified, edited accordingly in CSS 2.1 and CSS 3 module.

Comment 12

[Gérard Talbot]

Can anyone report how MS-Edge 16 (or Technical Preview 17) handle

http://test.csswg.org/suites/css2.1/nightly-unstable/html4/anonymous-table-box-width-001.htm

Thank you.

Comment 14

[Daniel Holbert [:dholbert]]

Incidentally, there's a WPT test that currently has a (somewhat trivial) dependency on Firefox's behavior here:
https://wpt.fyi/results/css/CSS2/floats/floats-wrap-bfc-006.xht

Right now this test fails in all other browsers but passes in Firefox. The failure in other browsers is due to some tables in the testcase being sized larger than the test expects (to be as wide as their caption child), which results in the purple cell area extending all the way to the right edge of the cyan container, when the test expects that purple cell area to only be as wide as the non-caption contents.

(This test comes from dbaron, ages ago, so it'd be totally fine to update it if needed / if the spec requirements become clearer. In the meantime, I just happened to run across this "only-passing-in-Firefox" testcase and wanted to be sure we had a bug filed somewhere on the interop difference, and it seems like this is that bug.)