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

Empty cells should have baseline at the bottom #31722

Closed
Loirooriol opened this issue Mar 17, 2024 · 3 comments · Fixed by #31831
Closed

Empty cells should have baseline at the bottom #31722

Loirooriol opened this issue Mar 17, 2024 · 3 comments · Fixed by #31831
Labels
A-layout/table A-layout/2020 https://github.com/servo/servo/wiki/Layout-2020

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Mar 17, 2024 •
edited

https://drafts.csswg.org/css-tables/#table-cell-baseline

The baseline of a cell is defined as the baseline of the first in-flow line box in the cell, or the first in-flow table-row in the cell, whichever comes first. If there is no such line box or table-row, the baseline is the bottom of content edge of the cell box.

That's not exactly what browsers do, but...

Testcase 
<!DOCTYPE html>
<style>
body {
  font: 16px "DejaVu Serif";
}
.table {
  display: inline-table
}
.cell {
  display: table-cell;
  height: 50px;
  width: 20px;
  background: cyan;
}
.pre {
  white-space: pre;
}
</style>
a<div class="table">
  <div class="cell"></div>
</div>
b<div class="table">
  <div class="cell"> </div>
</div>
c<div class="table">
  <div class="cell pre"></div>
</div>
d<div class="table">
  <div class="cell pre"> </div>
</div>
e<div class="table">
  <div class="cell">X</div>
</div>
f<div class="table">
  <div class="cell" style="font-size: 0px">X</div>
</div>
g<div class="table">
  <div class="cell" style="font-size: 0px">
    <div style="position: absolute"></div>
  </div>
</div>
h<div class="table">
  <div class="cell" style="font-size: 0px">
    <div style="position: absolute; height: 1px"></div>
  </div>
</div>
i<div class="table">
  <div class="cell" style="font-size: 0px">
    <div style="float: left"></div>
  </div>
</div>
j<div class="table">
  <div class="cell" style="font-size: 0px">
    <div style="float: left; height: 1px"></div>
  </div>
</div>
k<div class="table">
  <div class="cell">
    <div></div>
  </div>
</div>
l<div class="table">
  <div class="cell">
    <div style="height: 1px"></div>
  </div>
</div>
m<div class="table">
  <div class="cell">
    <span></span>
  </div>
n<div class="table">
  <div class="cell">
    <span style="border-left: solid"></span>
  </div>
</div>
o<div class="table">
  <div class="cell">
    <div style="display: inline-block"></div>
  </div>
</div>
p<div class="table">
  <div class="cell">
    <div style="display: inline-block; vertical-align: top"></div>
  </div>
</div>
q<div class="table">
  <div class="cell">
    <canvas style="height: 0; width: 0"></div>
  </div>
</div>
r<div class="table">
  <div class="cell">
    <canvas style="height: 0; width: 0; vertical-align: top"></div>
  </div>
</div>
Browser Result
Servo
Blink imatge
WebKit
Gecko

We should at least align with other browser where they all agree: a,b,c.

Blink seems to place the baseline at the bottom of the cell if no content generates a fragment (this differs from empty-cells with abspos contents).

Gecko and WebKit seem to place the baseline at the bottom of the cell if the contents are 0px tall.
@Loirooriol Loirooriol added C-untriaged New issues that haven't been triaged yet A-layout/table A-layout/2020 https://github.com/servo/servo/wiki/Layout-2020 and removed C-untriaged New issues that haven't been triaged yet labels Mar 17, 2024
@Loirooriol Loirooriol mentioned this issue Mar 17, 2024
Merged
4 tasks
@Loirooriol
Copy link
Contributor Author

OK, another interesting case:

!<div class="table">
  <div class="cell" style="font-size: 0">
    <div style="display: inline-block; height: 30px; width: 10px; background: orange; vertical-align: top"></div>
  </div>
</div>

Of course Blink considers it non-empty so the baseline is at the top.
WebKit also considers it non-empty, since the contents are taller than 0px.
However, Firefox puts the baseline at the bottom. So it seems that Firefox does that when the baseline would be at the very top.

I think aligning with Firefox will be the simplest option.

@Loirooriol
Copy link
Contributor Author

Firefox isn't actually making much sense:

a<div class="table">
  <div class="cell"></div>
</div>
b<div class="table">
  <div class="cell"><div></div></div>
</div>
c<div class="table">
  <div class="cell" style="border-top: 1px solid"></div>
</div>
d<div class="table">
  <div class="cell" style="border-top: 1px solid"><div></div></div>
</div>

Probably better to align with Blink after all.

@Loirooriol Loirooriol mentioned this issue Mar 22, 2024
Merged
4 tasks
@Loirooriol
Copy link
Contributor Author

For reference, Blink's logic was added in https://chromium-review.googlesource.com/c/chromium/src/+/2559250

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-layout/table A-layout/2020 https://github.com/servo/servo/wiki/Layout-2020
Projects
Layout 2020: Tables
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Don't update row baseline if cell is empty Loirooriol/servo
1 participant
@Loirooriol