Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-align] Baseline of row with no cells #10137

Open
Loirooriol opened this issue Mar 25, 2024 · 2 comments
Open

[css-align] Baseline of row with no cells #10137

Loirooriol opened this issue Mar 25, 2024 · 2 comments
Labels
css-align-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Mar 25, 2024 •
edited

https://drafts.csswg.org/css-align/#baseline-export

If any cells in the row participate in first baseline/last baseline alignment along the inline axis [...]

If there are no cells, the condition is false, so...

Otherwise, the first/last baseline set of the row is synthesized from the lowest and highest content edges of the cells in the row.

What if there are no cells?

<!DOCTYPE html>
a
<table style="display: inline-table; border: 10px solid; margin: 10px; baseline-source: first; width: 60px">
  <tr style="height: 20px; outline: solid cyan"></tr>
  <tr style="height: 20px; outline: solid orange"><td>b</td></tr>
  <tr style="height: 20px; outline: solid magenta"><td></td></tr>
</table>
<table style="display: inline-table; border: 10px solid; margin: 10px; baseline-source: last; width: 60px">
  <tr style="height: 20px; outline: solid cyan"></tr>
  <tr style="height: 20px; outline: solid orange"><td>c</td></tr>
  <tr style="height: 20px; outline: solid magenta"></tr>
</table>
Gecko Blink WebKit
  • Gecko seems to ignore baseline-source on tables. The 1st baseline is placed at the top of the content area of the 1st row.
  • Blink places the 1st baseline at the top of the content area of the 1st row, and the last baseline at the top of the content area of the last row.
  • WebKit doesn't set a row baseline, so the baseline of the table is synthesized from the bottom of the margin box (as per https://drafts.csswg.org/css-inline-3/#baseline-tables).
@Loirooriol Loirooriol added the css-align-3 Current Work label Mar 25, 2024
@bfgeek
Copy link

bfgeek commented Mar 25, 2024

Note I think we (try) and follow the definition here:
https://drafts.csswg.org/css-tables-3/#table-row-baseline

@Loirooriol
Copy link
Contributor Author

But it's still the same problem:

If a row doesn’t have any cell that has 'vertical-align: baseline', the baseline of that row is the bottom content edge of the lowest cell in the row.

What's the lowest cell, if there is no cell?

https://github.com/chromium/chromium/blob/5883f5a39a5b3faa1b6c38f028660cab21528174/third_party/blink/renderer/core/layout/table/table_layout_utils.cc#L1752

  // Empty row's baseline is top.
  return LayoutUnit();

I'm not sure if that comes from any spec.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-align-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bfgeek @Loirooriol