Table row containing floats do not float and makes row height incorrect

[jeffgabhart]

Here is a simplified example of the html I'm using. The floats inside the table are not respected and there is a lot of extra space between the rows. Maybe 2x the height of the divs when they are stacked.

<table>
  <colgroup>
    <col>
  </colgroup>
  <tbody>
    <tr>
      <td>
        <div style="float: left;">Value 1</div>
        <div style="float: left;">Value 2</div>
        <div style="float: left;">Value 3</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="float: left;">Value 1</div>
        <div style="float: left;">Value 2</div>
        <div style="float: left;">Value 3</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="float: left;">Value 1</div>
        <div style="float: left;">Value 2</div>
        <div style="float: left;">Value 3</div>
      </td>
    </tr>
   </tbody>
</table>

Chrome output:

Weasyprint output:

I can get these onto the same line using the following, but again the space between looks like the height of the divs if they were stacked.

<table>
  <colgroup>
    <col>
  </colgroup>
  <tbody>
    <tr>
      <td>
        <div style="float: left; position: relative; top: 0px; left: 8px; width: 120px; margin-right:-120px;">Value 1</div>
        <div style="float: left; position: relative; top: 0px; left: 142px; width: 120px; margin-right:-120px;">Value 2</div>
        <div style="float: left; position: relative; top: 0px; left: 277px; width: 184px; margin-right:-184px;">Value 3</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="float: left; position: relative; top: 0px; left: 8px; width: 120px; margin-right:-120px;">Value 1</div>
        <div style="float: left; position: relative; top: 0px; left: 142px; width: 120px; margin-right:-120px;">Value 2</div>
        <div style="float: left; position: relative; top: 0px; left: 277px; width: 184px; margin-right:-184px;">Value 3</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="float: left; position: relative; top: 0px; left: 8px; width: 120px; margin-right:-120px;">Value 1</div>
        <div style="float: left; position: relative; top: 0px; left: 142px; width: 120px; margin-right:-120px;">Value 2</div>
        <div style="float: left; position: relative; top: 0px; left: 277px; width: 184px; margin-right:-184px;">Value 3</div>
      </td>
    </tr>
   </tbody>
</table>

Chrome output:

Weasyprint output:

[liZe]

There are two different issues:

• the floating boxes are not side by side because the preferred size of the cell doesn't include floats (I'm not sure that's it's defined in the spec, but it would definitely be an improvement in WeasyPrint),
• the height is strange, really strange, I really don't know what's going on 😄.

[jeffgabhart]

So obviously, the height thing can be recreated with my simplified examples, but my production html seems ok now, and I'm not sure what I changed to fix it..

[liZe]

92b3dbd fixes the second part of the bug.

The first one is not really a bug, as it's definitely not defined in the specs:

• CSS 2.1 tells that the remainder of this section is non-normative,
• even David Baron's More precise definitions of intrinsic widths and table layout says "The handling of floats within the definition of max-content width of blocks is not yet written properly" and "Note that the current behavior of Web browsers for handling intrinsic widths of blocks containing floats is not very interoperable."

It's really easy to make other browsers give "wrong" results for preferred size:

<table>
  <tbody>
    <tr style="background: red">
      <td>
        <div><div style="float: left;">float 1</div></div>
        <div><div style="float: left;">float 2</div> normal long text</div>
      </td>
    </tr>
   </tbody>
</table>

The result with Chrome for example:

There's an extra padding at the right of the cell.

WeasyPrint's rendering is "better" here:

Short answer: I think that there's no need to solve a "problem" that's not specified, not solved by other browsers and not solved by David Baron (probably the very best specialist about tables and preferred-widths of the whole universe).