Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 22:45:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Recreate lazy block size when re-doing layout to avoid floats (#38366)

Browse source 
Block-level boxes that establish an independent formatting context need
to avoid overlapping floats. If their inline size stretches, then we may
need to lay out multiple times.

The problem was that when trying with a different inline size, the
intrinsic block size can change, but we were using the cached final
block size from the previous attempt.

Testing: Adding new test
Fixes: #38365

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-08-04 10:07:10 -07:00 • committed by GitHub
parent 04ec710e60
commit b01bb462b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 51 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
tests/wpt/meta/MANIFEST.json vendored
View file

@ -59963,6 +59963,19 @@
{}
]
],
"floats-bfc-003.html": [
"a40c6ae6c0e9edb2c696fc324abfa0c9eca35a91",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"floats-clear-multicol-000.html": [
"3598a2f7aba955b5ba3e6ee1739bfd468d2b28ea",
[

26
tests/wpt/tests/css/CSS2/floats-clear/floats-bfc-003.html vendored Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>CSS Test: Floats with overflow:hidden next to them</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats">
<link rel="help" href="https://github.com/servo/servo/issues/38365">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="
The border box of #bfc must not overlap the margin box of #float1 nor #float2.
First we try laying it out next to #float1, so it becomes 200px wide, and then
its inner floats fit next to each other, so it becomes 50px tall.
However, that would overlap #float2.
Therefore, we try again, now with a width of 100px. Then its inner floats no
longer fit next to each other, so it becames 100px tall.
">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="overflow: hidden">
<div style="width: 300px; height: 100px; margin-left: -200px; background: red">
<div id="float1" style="float: left; clear: left; width: 100px; height: 25px"></div>
<div id="float2" style="float: left; clear: left; width: 200px; height: 25px"></div>
<div id="bfc" style="overflow: hidden; background: green">
<div style="float: left; width: 100px; height: 50px"></div>
<div style="float: left; width: 100px; height: 50px"></div>
</div>
</div>
</div>