Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-30 00:29:14 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Unify logic for laying out replaced and non-replaced in a BFC (#37864)

Browse source 
The logic for laying out block-level replaced elements wasn't taking
floats into account when resolving a `stretch` inline size. By handling
them with the same logic as non-replaced elements, we fix that problem,
and reduce the amount of code.

Testing: Adding new tests
Fixes: #37861

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-07-04 19:47:40 +02:00 • committed by GitHub
parent 72b1331949
commit 4ee7a34f32
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 257 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -254076,6 +254076,32 @@
],
{}
]
],
"replaced-next-to-float-1.html": [
"b97f2ddba445dfdad6285691a509b3f2f7042b44",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"replaced-next-to-float-2.html": [
"1a00846074ba376528d82836a644952773ce0edf",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
]
},
"svg-intrinsic-size-005.html": [

23
tests/wpt/tests/css/css-sizing/stretch/replaced-next-to-float-1.html vendored Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
<link rel="help" href="https://github.com/servo/servo/issues/37861">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="width:200px; margin-left: -100px;">
<div style="float: left; width: 100px; height: 100px;"></div>
<canvas width="1" height="1" style="display: block; width: stretch; background: green"></canvas>
</div>

41
tests/wpt/tests/css/css-sizing/stretch/replaced-next-to-float-2.html vendored Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
<link rel="help" href="https://github.com/servo/servo/issues/37861">
<link rel="help" href="https://drafts.csswg.org/css2/#floats">
<meta name="assert" content="The border box of a block-level replaced element
can't overlap the margin box of any float in the same block formatting context.
The stretch size needs to respect that.
">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.stretch {
display: flow-root;
height: 25px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div style="width:200px; margin-left: -100px;">
<div style="float: left; width: 100px; height: 75px;"></div>
<canvas class="stretch" style="width: 0; min-width: stretch"></canvas>
<canvas class="stretch" style="width: 1000px; max-width: stretch"></canvas>
<canvas class="stretch" style="width: stretch; padding: 0 10px; border: solid green; border-width: 0 10px; margin-left: 10px"></canvas>
</div>
<div style="width:250px; margin-left: -150px;">
<div style="float: left; clear: left; width: 100px; height: 1px;"></div>
<div style="float: left; clear: left; width: 150px; height: 1px;"></div>
<div style="float: left; clear: left; width: 125px; height: 1px;"></div>
<canvas class="stretch" style="width: stretch"></canvas>
</div>