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

Element collapsing thru should collapse with its children (#32060)

Browse source 
If the top and bottom margins of an element collapse through, then this
patch treats the bottom margin as collapsing with its children, even if
`height` doesn't compute to zero.

Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Oriol Brufau 2024-04-12 17:06:12 +02:00 • committed by GitHub
parent 95654b789c
commit bc7cced03c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 62 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -641,9 +641,6 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
let computed_block_size = style.content_block_size(); let computed_block_size = style.content_block_size();
let start_margin_can_collapse_with_children = let start_margin_can_collapse_with_children =
pbm.padding.block_start == Au::zero() && pbm.border.block_start == Au::zero(); pbm.padding.block_start == Au::zero() && pbm.border.block_start == Au::zero();
let end_margin_can_collapse_with_children = pbm.padding.block_end == Au::zero() &&
pbm.border.block_end == Au::zero() &&
computed_block_size.is_auto();
let mut clearance = None; let mut clearance = None;
let parent_containing_block_position_info; let parent_containing_block_position_info;
@ -745,6 +742,17 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
)); ));
} }
} }
let collapsed_through = collapsible_margins_in_children.collapsed_through &&
pbm.padding_border_sums.block == Au::zero() &&
block_size_is_zero_or_auto(computed_block_size, containing_block) &&
block_size_is_zero_or_auto(style.min_block_size(), containing_block);
block_margins_collapsed_with_children.collapsed_through = collapsed_through;
let end_margin_can_collapse_with_children = collapsed_through ||
(pbm.padding.block_end == Au::zero() &&
pbm.border.block_end == Au::zero() &&
computed_block_size.is_auto());
if end_margin_can_collapse_with_children { if end_margin_can_collapse_with_children {
block_margins_collapsed_with_children block_margins_collapsed_with_children
.end .end
@ -753,12 +761,6 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
content_block_size += collapsible_margins_in_children.end.solve().into(); content_block_size += collapsible_margins_in_children.end.solve().into();
} }
block_margins_collapsed_with_children.collapsed_through = collapsible_margins_in_children
.collapsed_through &&
pbm.padding_border_sums.block == Au::zero() &&
block_size_is_zero_or_auto(computed_block_size, containing_block) &&
block_size_is_zero_or_auto(style.min_block_size(), containing_block);
let block_size = containing_block_for_children.block_size.auto_is(|| { let block_size = containing_block_for_children.block_size.auto_is(|| {
content_block_size content_block_size
.clamp_between_extremums(min_box_size.block, max_box_size.block) .clamp_between_extremums(min_box_size.block, max_box_size.block)

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

@ -67438,6 +67438,19 @@
{} {}
] ]
], ],
"margin-collapse-clear-011.xht": [
"fed7bef25c532d02e38f9d2b58644f10958d72ad",
[
null,
[
[
"/css/CSS2/margin-padding-clear/margin-collapse-clear-011-ref.xht",
"=="
]
],
{}
]
],
"margin-collapse-min-height-001.xht": [ "margin-collapse-min-height-001.xht": [
"2c6936244308faced1e79c5115950a8b5a7079e5", "2c6936244308faced1e79c5115950a8b5a7079e5",
[ [
@ -374459,6 +374472,10 @@
"f9c8c4c765f75eb1135f9c723e90de5b34b18010", "f9c8c4c765f75eb1135f9c723e90de5b34b18010",
[] []
], ],
"margin-collapse-clear-011-ref.xht": [
"2611de9f4a9310475172e775c4b18db81567bcfc",
[]
],
"margin-collapse-min-height-001-ref.xht": [ "margin-collapse-min-height-001-ref.xht": [
"f86d2b201f6a488b5d875b61fab075497d88d08c", "f86d2b201f6a488b5d875b61fab075497d88d08c",
[] []

13
tests/wpt/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011-ref.xht Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"/>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
</head>
<body style="font: 25px/1 Ahem">
<div style="margin-bottom: 1em">X</div>
<div style="color: cyan;">X</div>
<div style="color: magenta">X</div>
</body>
</html>

21
tests/wpt/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011.xht Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Margin Collapsing with Clearance</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
<link rel="match" href="margin-collapse-clear-011-ref.xht"/>
<meta name="assert" content="The magenta X appears below the cyan X due to clearance"/>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
</head>
<body style="font: 25px/1 Ahem">
<div style="margin-bottom: 1em">X</div>
<div style="float: left; color: cyan;">X</div>
<div style="margin-bottom: 1em; height: 0px;">
<div style="margin-bottom: -1em;"></div>
</div>
<div style="clear: both; color: magenta">X</div>
</body>
</html>