[csswg-drafts] [css-tables][css-sizing] What sizing keywords allow fixed table mode? (#10937)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-tables][css-sizing] What sizing keywords allow fixed table mode? ==
### 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`](https://drafts.csswg.org/css-tables/#propdef-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()>`        | ❌ | ❌︎ | ✅ | ✅︎ |
| `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

```html
<!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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10937 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 23 September 2024 23:53:28 UTC