layout: Remove wrong optimization when placing table among floats (#35207)

When we try to place a table next to some floats, and it doesn't fit
vertically, then we try again considering more floats. And as an
optimization we were using the previous width of the table as a minimum.
However, this was wrong, because the table might accept a smaller width
when the available space is smaller than beforehand.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-01-29 07:54:52 -08:00 committed by GitHub
parent 53fcc98585
commit bc7cdab46f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 41 additions and 16 deletions

View file

@ -59140,6 +59140,19 @@
],
{}
]
],
"table-among-floats-001.html": [
"3bc8f4514528633e92222d0e65db7118259e7049",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
]
},
"fonts": {

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>Table among floats</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="
The table needs to be at least 75px wide, but can grow up to 150px if there is enough space.
There are 125px available next to the 1st float, so the table can fit with a width of 125px.
However, in that case it needs a height of 200px, overlapping the 2nd float.
Therefore, the table needs to be 75px wide and 200px tall, thus fitting in the available
space next to both floats.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width: 200px; overflow: hidden; position: relative; background: red">
<div style="width: 75px; height: 100px; float: left; clear: left; background: green"></div>
<div style="width: 125px; height: 100px; float: left; clear: left; background: green"></div>
<table cellpadding="0" cellspacing="0">
<td>
<div style="float: left; width: 75px; height: 100px; background: green"></div>
<div style="float: left; width: 75px; height: 100px; background: green"></div>
</td>
</table>
<div style="position: absolute; left: 75px; top: 0; width: 50px; height: 100px; background: green"></div>
</div>