Bug 8606 – Text overflowing outer table

• Component: Tables
• Status: REOPENED

[Matt Gough]

The main text of the web page (in a sub-table) flows outside of the enclosing table.

Firefox and Opera have no trouble displaying this OK.

(Seems to be related to whether or not the add down the right hand side gets loaded)

This is with 418 and 420+

[Matt Gough]

Created attachment 7979 [details]
The result in WebKit

[Matt Gough]

Created attachment 7980 [details]
The result in Firefox

[Alexey Proskuryakov]

> (Seems to be related to whether or not the add down the right hand side gets
> loaded)

The ad not being displayed may be a separate issue - a local copy of this page (with all links broken) is still rendered OK in Firefox, but not in Safari.

Created attachment 8008 [details]
Reduced test case

I'm not sure that this encompasses the entire problem, but Firefox renders this significantly differently. Notice that the middle cell on the first row has a rowspan of 2, then the first cell on the second row has a colspan of 3. I don't know what the specified behavior is for this case.

The URL renders correctly in TOT, probably as a result of fixing bug 3297.

[Alexey Proskuryakov]

I can still reproduce this problem with the latest nightly, r14879. Please note that when the ad at the right does load, you may need to increase the font size for the text to overflow. The reduced test case also renders differently than in Firefox - am I missing something?

My bad. Thanks, Alexey!

[Patrick Geiller]

Created attachment 8899 [details]
Reduction of DaVinci page, showing a rowspan bug

The original page's markup is bad : a cell has a rowspan=2, but there's no row left to span : top & bottom rows have a single cell with a colspan=3.

On the reduction, Safari and Firefox both visually overwrite text, but Firefox enlarges the table's height to match the bad cell's, where Safari doesn't. Thus the DaVinci page looks good on Firefox, but if there was text in the last cell, it would be overwritten even on Firefox.

[Brent Fulgham]

Safari does not match Chrome or Firefox in the reduced test case.

[Radar WebKit Bug Importer]

<rdar://problem/96546132>

[Karl Dubost]

Created attachment 473997 [details]
rendering in safari, firefox, chrome

This would benefit of a WPT test case. 

Safari Technology Preview  18.2          20621.1.9.111.1
Firefox Nightly            136.0a1       13625.1.23
Google Chrome Canary       134.0.6975.0  6975.0

[Karl Dubost]

The website is not accessible anymore.
but the web archive is and still exhibits a different rendering.
https://web.archive.org/web/20060207033449/http://www.kausal.com/leonardo/childhood.html

[Karl Dubost]

This is the code

<table>
    <tbody>

        <tr>
            <td style="width: 30px; height: 30px; background: skyblue;"></td>
            <td rowspan="2" valign="top" style="width: 100px; background: blue;">
                <div style="height: 200px; width: 20px; background: silver;"></div>
            </td>
            <td style="width: 30px; height: 30px; background: lightgreen;"></td>
        </tr>

        <tr>
            <td valign="top" style="background: green; height: 20px;" colspan="3"></td>
        </tr>

    </tbody>
</table>

[Karl Dubost]

Created attachment 478801 [details]
rendering in safari, firefox, chrome (10px)

To note, if I set the div inside at 10px, the rendering is the same.

There are two issues in there:

1. The distribution of height once the internal div is stretching the table to be higher
2. The visibility of the div on the row below.