Bug 12396 – max-width do not work on tables

• Component: Tables
• Status: NEW

[Jeremy Nicoll]

The URL that I have attached contains the bare necessities of what I am talking about.  As one resizes the window, each element inside resizes according to the size of the window.  In other words, each element has a width of the percentage of the window.  The exception is that there are two DIVs at the top which are used to measure whether the min and max values are being honored.  You will see that every element except for the table has the min and max values applied correctly.  I did not test on min/max height, but I would assume it would be the same.

I have the latest version of Safari running on 10.4, and I have also downloaded the latest version of Webkit nightly.  Both exhibit this problem.

[Sam Weinig]

Created attachment 12649 [details]
reduced test case

[David Kilzer (:ddkilzer)]

See also Bug 12460.

min-width works properly on tables in both Firefox (3.6.3 tested) and Opera (10.53 tested).

[Evan Chaney]

Issue persists on WebKit nightly r63606 (built 7/17/2010) and Safari 5.0 (6533.16) on Mac OS X 10.6.4.

[Evan Chaney]

Created attachment 61916 [details]
Minimal test case

[Max Vujovic]

For the min-width case, see Bug 76553 - min-width does not work on <table>

[Daniel Trebbien]

https://bugzilla.mozilla.org/show_bug.cgi?id=307866

[Ahmad Saleem]

I am able to reproduce these bugs using attached test cases in Safari 15.5 on macOS 12.4.

In both test cases, Safari differs from Chrome Canary 104 and Firefox Nightly 103, where both match each other.

From attached test cases, in "reduced test case", Safari renders "max-width" different from other browsers. While in "minimal test case", Safari does not show "red line" to restrict "table width" and it just goes off the edge of viewport.

If I am testing it incorrectly, please retest accordingly. Thanks!

[Brent Fulgham]

Safari continues to have different output than Chrome and Firefox.

[Radar WebKit Bug Importer]

<rdar://problem/96554687>

[Karl Dubost]

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

This would deserve 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

[Ahmad Saleem]

Blink Merge: https://chromium.googlesource.com/chromium/src.git/+/364480a952dc2eb710b26f82543e08bd4bac825b

void AutoTableLayout::applyPreferredLogicalWidthQuirks(LayoutUnit& minWidth, LayoutUnit& maxWidth) const
{
    if (auto& tableLogicalWidth = m_table->style().logicalWidth(); tableLogicalWidth.isFixed() && tableLogicalWidth.isPositive()) {
        // 'minWidth' is the result of measuring the intrinsic content's size. Keep it to
        // make sure we are *never* smaller than the actual content.
        LayoutUnit minContentWidth = minWidth;
        // FIXME: This line looks REALLY suspicious as it could allow the minimum
        // preferred logical width to be smaller than the table content. This has
        // to be cross-checked against other browsers.
        minWidth = maxWidth = std::max<int>(minWidth, LayoutUnit { tableLogicalWidth.value() });
        const auto& styleMaxLogicalWidth = m_table->style().logicalMaxWidth();
        if (styleMaxLogicalWidth.isFixed() && !styleMaxLogicalWidth.isNegative()) {
            minWidth = std::min<int>(minWidth, LayoutUnit { styleMaxLogicalWidth.value() });
            minWidth = std::max(minWidth, minContentWidth);
            maxWidth = minWidth;
        }
    }
}

^ Fixes this test case.

[Ahmad Saleem]

It also get fixed with proposed Blink commit merge in Bug 106603.

[Ahmad Saleem]

Pull request: https://github.com/WebKit/WebKit/pull/41759