[csswg-drafts] [css-align] Does `vertical-align` on table cell set `align-content` safely or not? (#12220)

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

== [css-align] Does `vertical-align` on table cell set `align-content` safely or not? ==
https://drafts.csswg.org/css-align/#distribution-block

> The [block axis](https://drafts.csswg.org/css-writing-modes-4/#block-axis). If a [<content-distribution>](https://drafts.csswg.org/css-align/#typedef-content-distribution) is specified its [fallback alignment](https://drafts.csswg.org/css-align/#fallback-alignment) is used instead. If no [<overflow-position>](https://drafts.csswg.org/css-align/#typedef-overflow-position) is specified, and the [block container](https://drafts.csswg.org/css-display-4/#block-container) is not a [scroll container](https://drafts.csswg.org/css-overflow-3/#scroll-container), then alignment is safe.

> For table cells, the behavior of [align-content: normal](https://drafts.csswg.org/css-align/#propdef-align-content) depends on the computed value of [vertical-align](https://drafts.csswg.org/css2/#propdef-vertical-align): [top](https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-top) makes it behave as [start](https://drafts.csswg.org/css-align/#valdef-self-position-start) and [bottom](https://drafts.csswg.org/css-inline-3/#valdef-baseline-shift-bottom) makes it behave as [end](https://drafts.csswg.org/css-align/#valdef-self-position-end); otherwise [middle](https://drafts.csswg.org/css-inline-3/#valdef-alignment-baseline-middle) makes it behave as [center](https://drafts.csswg.org/css-align/#valdef-self-position-center), and all other values make it behave as [baseline](https://drafts.csswg.org/css-align/#valdef-justify-self-baseline).

My understanding is that `vertical-align: bottom` should behave as `align-content: end`, which behaves as `align-content: safe end` if the cell isn't a scroll container.

```html
<!DOCTYPE html>
<style>
table { margin: 80px 0px }
td { height: 50px; }
td::before { content: ""; display: block; height: 250%; width: 50px; background: linear-gradient(to bottom, cyan, magenta) }
</style>
<table border="1">
  <td style="overflow: visible; align-content: end"></td>
  <td style="overflow: visible; align-content: safe end"></td>
  <td style="overflow: visible; align-content: unsafe end"></td>
  <td style="overflow: visible; vertical-align: bottom"></td>
</table>
<table border="1">
  <td style="overflow: hidden; align-content: end"></td>
  <td style="overflow: hidden; align-content: safe end"></td>
  <td style="overflow: hidden; align-content: unsafe end"></td>
  <td style="overflow: hidden; vertical-align: bottom"></td>
</table>
```

| Blink | WebKit | Gecko |
| - | - | - |
| ![](https://github.com/user-attachments/assets/32006e81-47c1-42e0-8ba7-5291b23bd8f5) | ![](https://github.com/user-attachments/assets/ff10555d-9e12-400a-bc71-11540a7d98fc) | ![](https://github.com/user-attachments/assets/1ef304e3-29fb-4254-ab93-30160d5e0667) |


So Blink seems wrong because it treats `vertical-align: bottom` as `align-content: unsafe end` even if it's not a scroll container. But is it even web compatible to change the legacy behavior of `vertical-align`? If it's a scroll container, it's not following https://drafts.csswg.org/css-align/#auto-safety-scroll either.

WebKit seems wrong since it ignores the overflow position.

Gecko avoids overflow in this case so not conclusive.

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


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

Received on Wednesday, 21 May 2025 18:30:33 UTC