gecko-dev/testing/web-platform/tests/css/CSS2/linebox/vertical-align-top-bottom-padding-ref.html
Koji Ishii dd23ca4fd3 Bug 1555780 [wpt PR 17105] - [LayoutNG] Fix vertical-align: top/bottom not to include paddings, a=testonly
Automatic update from web-platform-tests
[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: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664862}

--

wp5At-commits: 1f7dcd9d4364946e8d2cca4aef7e264d7278cb14
wpt-pr: 17105
2019-06-19 11:06:23 -07:00

38 lines
520 B
HTML

<!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>