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

Table row heights in percentages are inconsistent with other browsers. #2389

Open
1 task
Psychpsyo opened this issue Nov 17, 2024 · 1 comment
Open
1 task

Table row heights in percentages are inconsistent with other browsers. #2389

Psychpsyo opened this issue Nov 17, 2024 · 1 comment
Labels
bug Something isn't working has repro We have a way to reproduce this bug. layout reduction of web content Issue has a simplified reduction based on real-world web content.

Comments

@Psychpsyo
Copy link
Contributor

Psychpsyo commented Nov 17, 2024 •
edited
Loading

Summary

The table height layout algorithms in CSS 2 say that CSS 2 does not specify what to do when the height is given as a percentage.
Despite that, both Firefox and Chrome agree on a behavior.
(I think they treat a percentage height as 0?)

This breaks https://www.psxdev.net/ in Ladybird.

Operating system

Linux

Steps to reproduce

  1. Open this in both Ladybird and Firefox or Chrome:
<!DOCTYPE html>
<style>
  td {
    background-color: black;
  }
</style>
<table width="100%">
  <tr height="100%">
    <td>
      <img src="http://psxdev.net/images/site/psxdev.gif"/>
    </td>
  </tr>
  <tr height="500%">
  </tr>
</table>
  1. Observe the difference.

Expected behavior

Ideally, Ladybird would follow whatever behavior the other browsers have here, especially since this causes breakages on real websites.

Actual behavior

Ladybird does something different from the other browsers.

URL for a reduced test case

https://www.psxdev.net/

HTML/SVG/etc. source for a reduced test case

<!DOCTYPE html>
<style>
  td {
    background-color: black;
  }
</style>
<table width="100%">
  <tr height="100%">
    <td>
      <img src="http://psxdev.net/images/site/psxdev.gif"/>
    </td>
  </tr>
  <tr height="500%">
  </tr>
</table>

Log output and (if possible) backtrace

None?

Screenshots or screen recordings

The reduced test case in Firefox:
image

The reduced test case in Ladybird:
image

Build flags or config settings

No response

Contribute a patch?

  • I’ll contribute a patch for this myself.
@Psychpsyo
Copy link
Contributor Author

Investigating further, I have now found https://www.w3.org/TR/css-tables-3/ and I assume the current table layout is based on an older version of that spec(?) since it seems to treat row and column layouting largely the same, while the current spec has a separate section for laying out the rows.

@AtkinsSJ AtkinsSJ added bug Something isn't working reduction of web content Issue has a simplified reduction based on real-world web content. has repro We have a way to reproduce this bug. layout labels Jan 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working has repro We have a way to reproduce this bug. layout reduction of web content Issue has a simplified reduction based on real-world web content.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@AtkinsSJ @Psychpsyo