Skip to content

GitLab

T
tangled
Commit 30dde1e3 authored by Koji Ishii's avatar Koji Ishii Committed by Commit Bot
Browse files
Options

[LayoutNG] Fix `vertical-align: top/bottom` with leading 

This patch fixes non-culled inline boxes to take the
`line-height` property into account when computing top or
bottom of inline boxes in the line for `vertical-align:
top` or `bottom`.

Bug: 1001418
Change-Id: Ia53b9894dd81e70e17588bc284f0df4bc4f5c382
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1795535
Commit-Queue: Koji Ishii <kojii@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#695443}
parent 7ffaca81
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 4 deletions
third_party/blink/renderer/core/layout/ng/inline/ng_inline_box_state.cc
View file @ 30dde1e3
......@@ -821,14 +821,26 @@ NGLineHeightMetrics NGInlineLayoutStateStack::MetricsForTopAndBottomAlign(
// BoxData contains inline boxes to be created later. Take them into account.
for (const BoxData& box_data : box_data_list_) {
// Except when the box has `vertical-align: top` or `bottom`.
DCHECK(box_data.item->Style());
const ComputedStyle& style = *box_data.item->Style();
EVerticalAlign vertical_align = style.VerticalAlign();
if (vertical_align == EVerticalAlign::kTop ||
vertical_align == EVerticalAlign::kBottom)
continue;
// |block_offset| is the top position when the baseline is at 0.
LayoutUnit box_ascent =
-line_box[box_data.fragment_end].offset.block_offset;
LayoutUnit box_descent = box_data.size.block_size - box_ascent;
NGLineHeightMetrics box_metrics(box_ascent,
box_data.size.block_size - box_ascent);
// The top/bottom of inline boxes should not include their paddings.
box_ascent -= box_data.padding.line_over;
box_descent -= box_data.padding.line_under;
metrics.Unite(NGLineHeightMetrics(box_ascent, box_descent));
box_metrics.ascent -= box_data.padding.line_over;
box_metrics.descent -= box_data.padding.line_under;
// Include the line-height property. The inline box has the height of the
// font metrics without the line-height included.
box_metrics.AddLeading(style.ComputedLineHeightAsFixed());
metrics.Unite(box_metrics);
}
// In quirks mode, metrics is empty if no content.
......
third_party/blink/web_tests/external/wpt/css/CSS2/linebox/vertical-align-negative-leading-001-ref.html 0 → 100644
View file @ 30dde1e3
<!DOCTYPE html>
<style>
.container {
margin: 30px 0;
color: orange;
background-color: blue;
line-height: 10px;
font-size: 30px;
font-family: Ahem;
}
.lh20 { line-height: 20px; }
.lh30 { line-height: 30px; }
.up5 { position: relative; top: -5px; }
.up10 { position: relative; top: -10px; }
.down5 { position: relative; top: 5px; }
.down10 { position: relative; top: 10px; }
</style>
<body>
<div class="container">
<span>XX</span>
<span>XX</span>
<span>XX</span>
</div>
<div class="container lh30">
<span class="up10">XX</span>
<span>XX</span>
<span class="down10">XX</span>
</div>
<div class="container"><span>XX</span></div>
<div class="container"><span>XX</span></div>
<div class="container lh20"><span class="up5">XX</span></div>
<div class="container lh20"><span class="down5">XX</span></div>
</body>
third_party/blink/web_tests/external/wpt/css/CSS2/linebox/vertical-align-negative-leading-001.html 0 → 100644
View file @ 30dde1e3
<!DOCTYPE html>
<title>Test vertical-align: top and bottom do not affect the line height</title>
<link rel="match" href="vertical-align-negative-leading-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">
<link rel="author" href="mailto:kojii@chromium.org">
<style>
.container {
margin: 30px 0;
color: orange;
background-color: blue;
line-height: 10px;
font-size: 30px;
font-family: Ahem;
}
span { background: purple; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.text-top { vertical-align: text-top; }
.text-bottom { vertical-align: text-bottom; }
</style>
<body>
<div class="container">
<span class="top">XX</span>
<span>XX</span>
<span class="bottom">XX</span>
</div>
<div class="container">
<span class="text-top">XX</span>
<span>XX</span>
<span class="text-bottom">XX</span>
</div>
<div class="container"><span class="top">XX</span></div>
<div class="container"><span class="bottom">XX</span></div>
<div class="container"><span class="text-top">XX</span></div>
<div class="container"><span class="text-bottom">XX</span></div>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment