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

display: table element with a float and a width: 100%; display: table-cell child is not 100% wide. #3483

Open
1 task
Psychpsyo opened this issue Feb 6, 2025 · 0 comments
Open
1 task

display: table element with a float and a width: 100%; display: table-cell child is not 100% wide. #3483

Psychpsyo opened this issue Feb 6, 2025 · 0 comments

Comments

@Psychpsyo
Copy link
Contributor

Summary

See reduced test case.
All of it (except for the doctype) is necessary for this bug to happen.
The float can be either left or right, doesn't matter.

Operating system

Linux

Steps to reproduce

  1. Open the reduced test case in ladybird.
  2. Compare it to what you get in Chrome or Firefox.

Expected behavior

The gray background behind the text should be as wide as the page.

Actual behavior

The gray background behind the text does not go beyond the right edge of the text.

URL for a reduced test case

N/A

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

<!DOCTYPE html>

<style>
  div {
    background-color: lightgray;
    display: table;
  }

  .text {
    display: table-cell;
    width: 100%;
  }

  .icon {
    float: left;
    width: 10px;
  }
</style>

<div>
  <span class="icon"></span>
  <span class="text">a</span>
</div>

Log output and (if possible) backtrace

Nothing

Screenshots or screen recordings

In order: Ladybird, Firefox, Chrome
Image

Build flags or config settings

None

Contribute a patch?

  • I’ll contribute a patch for this myself.
@Psychpsyo Psychpsyo changed the title display: table element with a float and a width: 100% display: table-cell child is not 100% wide. display: table element with a float and a width: 100%; display: table-cell child is not 100% wide. Feb 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Psychpsyo