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

Fix clearance on replaced elements

Browse source
This commit is contained in:
Oriol Brufau 2023-06-26 01:57:21 +02:00
parent cc4650aeb3
commit 246dc983f6
3 changed files with 69 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/layout_2020/flow/mod.rs
View file

@ -733,10 +733,13 @@ fn layout_in_flow_replaced_block_level<'a>(
let mut clearance = Length::zero();
if let Some(ref mut sequential_layout_state) = sequential_layout_state {
sequential_layout_state.adjoin_assign(&CollapsedMargin::new(margin.block_start));
sequential_layout_state.collapse_margins();
clearance = sequential_layout_state.calculate_clearance(ClearSide::from_style(style));
sequential_layout_state
.advance_block_position(pbm.border.block_sum() + pbm.padding.block_sum() + size.block);
sequential_layout_state.advance_block_position(
pbm.border.block_sum() + pbm.padding.block_sum() + size.block + clearance,
);
sequential_layout_state.adjoin_assign(&CollapsedMargin::new(margin.block_end));
};
let content_rect = Rect {
@ -756,7 +759,7 @@ fn layout_in_flow_replaced_block_level<'a>(
pbm.padding,
pbm.border,
margin,
Length::zero(),
clearance,
block_margins_collapsed_with_children,
)
}

29
tests/wpt/meta/MANIFEST.json
View file

@ -61742,6 +61742,35 @@
{}
]
],
"clear-on-replaced-element.html": [
"e5566b38326da17455d54c3d06d498f72bc4c693",
[
null,
[
[
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{
"fuzzy": [
[
null,
[
[
0,
2
],
[
0,
1500
]
]
]
]
}
]
],
"clear-with-top-margin-after-cleared-empty-block.html": [
"5d0fba7981f3f688b22442c1e8bef2ff8b146f5e",
[

34
tests/wpt/tests/css/CSS2/floats-clear/clear-on-replaced-element.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Clear on block-level replaced element</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
<link rel="help" href="https://www.w3.org/TR/CSS22/conform.html#replaced-element">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-1500">
<style>
#wrapper {
width: 90px;
border: 5px solid green;
background-image: linear-gradient(
to bottom,
red 30px, green 30px,
green 50px, red 50px,
red 60px, green 60px,
green 70px, red 70px,
red 80px, green 80px
)
}
#wrapper > * {
display: block;
width: 100%;
background: green content-box;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="wrapper">
<div style="float: left; height: 20px"></div>
<canvas style="clear: both; height: 10px; margin: 10px 0"></canvas>
<canvas style="float: left; height: 10px; margin: 10px 0"></canvas>
<div style="clear: both; height: 10px; padding-bottom: 10px"></div>
</div>