Commit 2160a371 authored by Koji Ishii's avatar Koji Ishii Committed by Commit Bot

Fix `text-overflow: ellipsis` when `text-indent` is also applied

This patch fixes `text-overflow: ellipsis` to take the space
occupied by `text-indent` into the account.

Bug: 1006395
Change-Id: I417176efbc8f10fa3c073efa7695458fb2d302a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1975372Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#726504}
parent b74cf43d
......@@ -311,7 +311,8 @@ void NGInlineLayoutAlgorithm::CreateLine(
}
// Truncate the line if 'text-overflow: ellipsis' is set.
if (UNLIKELY(inline_size > line_info->AvailableWidth() &&
if (UNLIKELY(inline_size >
line_info->AvailableWidth() - line_info->TextIndent() &&
node_.GetLayoutBlockFlow()->ShouldTruncateOverflowingText())) {
inline_size = NGLineTruncator(*line_info)
.TruncateLine(inline_size, &line_box_, box_states_);
......
......@@ -16,7 +16,7 @@ namespace blink {
NGLineTruncator::NGLineTruncator(const NGLineInfo& line_info)
: line_style_(&line_info.LineStyle()),
available_width_(line_info.AvailableWidth()),
available_width_(line_info.AvailableWidth() - line_info.TextIndent()),
line_direction_(line_info.BaseDirection()) {}
LayoutUnit NGLineTruncator::TruncateLine(
......
<!DOCTYPE html>
<style>
div {
text-overflow: ellipsis;
overflow: hidden;
font-size: 10px;
}
</style>
<body>
<div style="padding-left: 3ch">123456</div>
<div style="padding-left: 3ch; width: 6ch">1234567</div>
<div style="padding-left: 6ch;">123</div>
<div style="padding-left: 6ch; width: 3ch">1234</div>
<div>123456789</div>
<div style="width: 9ch">1234567890</div>
</body>
<!DOCTYPE html>
<title>Test ellipsis with `text-indent`</title>
<link rel="match" href="reference/text-overflow-ellipsis-indent-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#ellipsing-details">
<link rel="author" href="mailto:kojii@chromium.org">
<style>
div {
text-overflow: ellipsis;
overflow: hidden;
font-size: 10px;
width: 6ch;
padding-left: 3ch;
}
</style>
<body>
<div>123456</div>
<div>1234567</div>
<div style="text-indent: 3ch;">123</div>
<div style="text-indent: 3ch;">1234</div>
<div style="text-indent: -3ch;">123456789</div>
<div style="text-indent: -3ch;">1234567890</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