[css-tables][css-sizing] What sizing keywords allow fixed table mode?

Loirooriol commented 1 month ago

Situation

https://drafts.csswg.org/css-tables/#table-layout-property says

A table-root is said to be laid out in fixed mode whenever the computed value of the table-layout property is equal to fixed, and the specified width of the table root is either a <length-percentage>, min-content or fit-content.

This is the logic that browsers use for the inline size:

WebKit: https://searchfox.org/wubkat/rev/b36cbce69fddb7da33823f316bd8ead5bebee970/Source/WebCore/rendering/style/RenderStyleInlines.h#526 logicalWidth().isSpecified() || logicalWidth().isFitContent() || logicalWidth().isMinContent()
Firefox: https://searchfox.org/mozilla-central/rev/1e8cec3727d6e09f4af41bb3d202b7a4c326ed84/layout/tables/nsTableFrame.cpp#3482 (negated) iSize.IsAuto() || iSize.IsMaxContent()
Chrome: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/style/computed_style.h;drc=572789ee61c7e857aa288a7ac7768b2b0b4f4dcc;l=1924 !LogicalWidth().HasAuto() && !LogicalWidth().HasMaxContent()

So we have a mismatch of keywords that accept fixed table layout:

Value	Spec	WebKit	Gecko	Blink
`<length-percentage>`	✅	✅	✅	✅
`auto`	❌	❌	❌	❌
`min-content` (*)	✅	✅	✅	✅
`max-content` (*)	❌	❌	❌	❌
`fit-content` (*)	✅	✅	✅	✅
`<fit-content()>`	❌	❌︎	✅	✅︎
`contain`	❌	❌︎	✅︎	✅︎
`stretch`	❌	❌︎	✅	✅︎
`-webkit-fill-available`	❌︎	❌	✅	✅
`-moz-available`	❌︎	❌︎	✅	✅︎
`intrinsic`	❌︎	❌	✅︎	✅︎
`min-intrinsic`	❌︎	❌	✅︎	✅︎

<calc-size()> should just behave as its basis.

(*) including -webkit- and -moz- prefixes. ✅: Supports the value (at least partially), and allows fixed table layout ✅︎: Doesn't support the value, but it would allow fixed table layout ❌: Supports the value (at least partially), and doesn't allows fixed table layout ❌︎: Doesn't support the value, but it wouldn't allow fixed table layout

Example

<!DOCTYPE html>
<div style="width: 0">
  <table style="table-layout: fixed; width: -webkit-fill-available" border>
    <tr><td>lorem ipsum</td></tr>
  </table>
</div>

On Firefox (with layout.css.webkit-fill-available.enabled = true) and Blink the table ignores the contents and is almost 0px wide, while on WebKit it's wider according to the text.

Changes

I think that <fit-content()> should allow fixed table layout, just like fit-content and min-content.

And maybe stretch should too, to match 100%? Also, -webkit-fill-available/-moz-available is kinda the same thing, and it allows fixed table layout on 2/3 of the major browsers.

Nobody implements contain, but we should also decide what to do with it.

bfgeek commented 1 month ago

As an aside does anyone know what max-content doesn't apply?

(FWIW the "rule" that we've been applying to to a lot of these table behaviours, is if "width is auto" do the special behaviour - this comes up a suprising amount in table layout).

Loirooriol commented 1 month ago

Yeah, it's kinda weird that, given enough available space, fit-content doesn't behave like max-content:

<!DOCTYPE html>
<div style="width: max-content">
  <table style="table-layout: fixed; width: max-content" border>
    <tr><td style="width: 0">lorem ipsum</td></tr>
  </table>
  <table style="table-layout: fixed; width: fit-content" border>
    <tr><td style="width: 0">lorem ipsum</td></tr>
  </table>
</div>

Only checking for auto would make this more future-proof.

Loirooriol commented 1 month ago

There was a broken test in https://github.com/web-platform-tests/wpt/blob/master/css/css-tables/fixed-layout-2.html, I have fixed it and tested all the cases above to help with interoperability.

Loirooriol commented 1 month ago

https://github.com/WebKit/WebKit/pull/34706 aligned -webkit-fill-available with Blink and Gecko.

w3c / csswg-drafts