layout: Support block-direction margins for inline-blocks.

Improves linux.com.
This commit is contained in:
Patrick Walton 2015-05-11 17:48:33 -07:00
parent 885068207f
commit 3875c9db4a
5 changed files with 61 additions and 5 deletions

View file

@ -1770,8 +1770,9 @@ impl Fragment {
let font_metrics = text::font_metrics_for_style(layout_context.font_context(),
font_style);
InlineMetrics::from_block_height(&font_metrics,
block_flow.base.position.size.block +
block_flow.fragment.margin.block_start_end())
block_flow.base.position.size.block,
block_flow.fragment.margin.block_start,
block_flow.fragment.margin.block_end)
}
SpecificFragmentInfo::InlineAbsoluteHypothetical(_) => {
// Hypothetical boxes take up no space.

View file

@ -1580,12 +1580,17 @@ impl InlineMetrics {
/// Calculates inline metrics from font metrics and line block-size per CSS 2.1 § 10.8.1.
#[inline]
pub fn from_block_height(font_metrics: &FontMetrics, block_height: Au) -> InlineMetrics {
let leading = block_height - (font_metrics.ascent + font_metrics.descent);
pub fn from_block_height(font_metrics: &FontMetrics,
block_height: Au,
block_start_margin: Au,
block_end_margin: Au)
-> InlineMetrics {
let leading = block_height + block_start_margin + block_end_margin -
(font_metrics.ascent + font_metrics.descent);
InlineMetrics {
block_size_above_baseline: font_metrics.ascent + leading.scale_by(0.5),
depth_below_baseline: font_metrics.descent + leading.scale_by(0.5),
ascent: font_metrics.ascent + leading.scale_by(0.5),
ascent: font_metrics.ascent + leading.scale_by(0.5) - block_start_margin,
}
}

View file

@ -137,6 +137,7 @@ flaky_cpu == append_style_a.html append_style_b.html
== incremental_inline_layout_a.html incremental_inline_layout_ref.html
!= inline_background_a.html inline_background_ref.html
== inline_block_baseline_a.html inline_block_baseline_ref.html
== inline_block_block_direction_margins_a.html inline_block_block_direction_margins_ref.html
== inline_block_border_a.html inline_block_border_ref.html
== inline_block_border_intrinsic_size_a.html inline_block_border_intrinsic_size_ref.html
== inline_block_img_a.html inline_block_img_ref.html

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
}
span {
display: inline-block;
margin-top: 100px;
margin-bottom: 100px;
}
div {
background: steelblue;
color: white;
}
</style>
</head>
<body>
<div>Four <span>score</span>&nbsp;and seven years ago</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
}
span {
display: inline-block;
}
div {
padding-top: 100px;
padding-bottom: 100px;
background: steelblue;
color: white;
}
</style>
</head>
<body>
<div>Four <span>score</span>&nbsp;and seven years ago</div>
</body>
</html>