Skip to content

GitLab

T
tangled
Commit 7d5e2664 authored by Koji Ishii's avatar Koji Ishii Committed by Commit Bot
Browse files
Options

[LayoutNG] Fix `vertical-align: top/bottom` not to include paddings 

This patch fixes the top and bottom of inline boxes for the
`top` and `bottom` values of `vertical-align` not to include
their paddings.

The spec[1] says align with the top/bottom of boxes. Line
box in CSS is special that paddings are included to draw
background and borders, but are not included when computing
their heights[2]. All impls agree that the top/bottom in this
case is the latter; i.e., not to include paddings.

[1]: https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align
[2]: https://drafts.csswg.org/css2/visudet.html#inline-non-replaced

Bug: 968438
Change-Id: I034d0390e3695e8a3fcc737f94fc5561e16cd617
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1637006
Commit-Queue: Emil A Eklund <eae@chromium.org>
Reviewed-by: default avatarEmil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664862}
parent e52ae43f
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 2 deletions
third_party/blink/renderer/core/layout/ng/inline/ng_inline_box_state.cc
View file @ 7d5e2664
......@@ -766,10 +766,14 @@ NGLineHeightMetrics NGInlineLayoutStateStack::MetricsForTopAndBottomAlign(
// BoxData contains inline boxes to be created later. Take them into account.
for (const BoxData& box_data : box_data_list_) {
// |block_offset| is the top position when the baseline is at 0.
LayoutUnit box_ascent =
-line_box[box_data.fragment_end].offset.block_offset;
metrics.Unite(
NGLineHeightMetrics(box_ascent, box_data.size.block_size - box_ascent));
LayoutUnit box_descent = 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));
}
// In quirks mode, metrics is empty if no content.
......
third_party/blink/web_tests/external/wpt/css/CSS2/linebox/vertical-align-top-bottom-padding-ref.html 0 → 100644
View file @ 7d5e2664
<!DOCTYPE html>
<style>
div {
margin-top: 50px;
font-size: 10px;
line-height: 1;
}
.inline-block {
display: inline-block;
height: 30px;
width: 30px;
background: blue;
}
.top .inline-block {
vertical-align: top;
}
.bottom .inline-block {
vertical-align: bottom;
}
</style>
<body>
<div class="top">
<span>
Next
<span class="inline-block"></span>
</span>
</div>
<div class="bottom">
<span>
Next
<span class="inline-block"></span>
</span>
</div>
</body>
third_party/blink/web_tests/external/wpt/css/CSS2/linebox/vertical-align-top-bottom-padding.html 0 → 100644
View file @ 7d5e2664
<!DOCTYPE html>
<link rel="match" href="vertical-align-top-bottom-padding-ref.html">
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" />
<link rel="author" href="kojii@chromium.org">
<style>
div {
margin-top: 50px;
font-size: 10px;
line-height: 1;
}
.inline-block {
display: inline-block;
height: 30px;
width: 30px;
background: blue;
}
.top .padding {
padding-top: 20px;
}
.top .inline-block {
vertical-align: top;
}
.bottom .padding {
padding-bottom: 20px;
}
.bottom .inline-block {
vertical-align: bottom;
}
</style>
<body>
<div class="top">
<span class="padding">
Next
<span class="inline-block"></span>
</span>
</div>
<div class="bottom">
<span class="padding">
Next
<span class="inline-block"></span>
</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