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

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

5
components/layout/fragment.rs
View file

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

11
components/layout/inline.rs
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. /// Calculates inline metrics from font metrics and line block-size per CSS 2.1 § 10.8.1.
#[inline] #[inline]
pub fn from_block_height(font_metrics: &FontMetrics, block_height: Au) -> InlineMetrics { pub fn from_block_height(font_metrics: &FontMetrics,
let leading = block_height - (font_metrics.ascent + font_metrics.descent); 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 { InlineMetrics {
block_size_above_baseline: font_metrics.ascent + leading.scale_by(0.5), block_size_above_baseline: font_metrics.ascent + leading.scale_by(0.5),
depth_below_baseline: font_metrics.descent + 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,
} }
} }

1
tests/ref/basic.list
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 == incremental_inline_layout_a.html incremental_inline_layout_ref.html
!= inline_background_a.html inline_background_ref.html != inline_background_a.html inline_background_ref.html
== inline_block_baseline_a.html inline_block_baseline_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_a.html inline_block_border_ref.html
== inline_block_border_intrinsic_size_a.html inline_block_border_intrinsic_size_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 == inline_block_img_a.html inline_block_img_ref.html

24
tests/ref/inline_block_block_direction_margins_a.html Normal file
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>

25
tests/ref/inline_block_block_direction_margins_ref.html Normal file
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>