Bug 30949 - Wrong calculation of the width of empty table cells.
Summary: Wrong calculation of the width of empty table cells.
Status: RESOLVED DUPLICATE of bug 21664
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
URL: http://news.xinhuanet.com/video/2007-...
Keywords:
Depends on:
Blocks:
 
Reported: 2009-10-30 00:58 PDT by Hanrui
Modified: 2014-02-24 07:05 PST (History)
2 users (show)

See Also:


Attachments
Testcase of quirks mode. (2.52 KB, text/html)
2009-10-30 00:59 PDT, Hanrui
no flags Details
Testcase of standards mode. (2.54 KB, text/html)
2009-10-30 00:59 PDT, Hanrui
no flags Details
Screenshot for your reference. (9.86 KB, image/png)
2009-10-30 00:59 PDT, Hanrui
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Hanrui 2009-10-30 00:58:30 PDT
Browsers tested:
     Safari 4: Fail
     Chrome 4: Fail
    Firefox 3: OK
     IE 6/7/8: OK

What steps will reproduce the problem?
1. Launch the URL above
2. Pay attention to bottom area of the page
3. The right column has no black nor gray bar

What is the expected result?
The right column should have a black bar and a gray bar like what IE and Firefox do.

What happens instead?
The right column has no black nor gray bar.

Please provide any additional information below.
Screenshot attached.
There seems to be something wrong with the width calculation for empty 
cells in Chrome.
The page uses codes below to show the black bar and gray bar:
      <table width="227" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
          <td bgcolor="#FFFFFF" height="9"></td> 
        </tr> 
        <tr> 
          <td bgcolor="#000000" height="5"></td> 
        </tr> 
        <tr> 
          <td bgcolor="#E5E5E5" height="5"></td> 
        </tr> 
      </table>
This table has three rows with one empty cell in each row.
In Chrome and Safari, it counts the width of the three cells as 0, so there's no bar in the two browsers.
From 17.5.2.2 in W3C standard(http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout), we can see that "If the 'table' or 'inline-table' element's 'width' property has a computed value (W) other than 'auto', the property's value as used for layout is the greater of W and the minimum width required by all the columns plus cell spacing or borders (MIN). If W is greater than MIN, the extra width should be distributed over the columns."
In this case, W is greater than MIN, so the extra width(227px) should be distributed to the only one column.

From my test-cases attached, we can find that Chrome always treat empty cells as zero-width. So if the cell has background-color or background-image, you cannot see the it in Chrome as well as Safari.

This bug will be triggered in Chrome and Safari if all the conditions listed below are met:
1) The table's style 'table-layout' is 'auto'.
2) The table's width is specified.
3) The table's border width is 0.
4) The table cell is an empty cell.
5) The table cell's width is 'auto'.
6) The table cell's border width is 0.
7) The table cell's padding is 0.
8) In the same column, there is no other table cell which is not affected 
by this bug.
Comment 1 Hanrui 2009-10-30 00:59:05 PDT
Created attachment 42177 [details]
Testcase of quirks mode.
Comment 2 Hanrui 2009-10-30 00:59:25 PDT
Created attachment 42178 [details]
Testcase of standards mode.
Comment 3 Hanrui 2009-10-30 00:59:42 PDT
Created attachment 42179 [details]
Screenshot for your reference.
Comment 4 gur.trio 2014-02-24 07:05:40 PST

*** This bug has been marked as a duplicate of bug 21664 ***