Skip to content

Commit e3cea74

Browse files
andreubotellachromium-wpt-export-bot
andreubotella
authored and
chromium-wpt-export-bot
committed
[text-overflow] [line-clamp] Fix text-overflow: <string> inside line-clamp
The https://crrev.com/c/6773707 CL just recently added support for passing a string to `text-overflow`, which is used as a replacement for the ellipsis added when the line is truncated. In that CL, `LineTruncator` was updated to use the string that was passed to `text-overflow` if there was one. However, `LineTruncator` is also used for the `(-webkit-)line-clamp` ellipses (when the `CSSLineClampLineBreakingEllipsis` runtime feature is disabled), and those should not use the string passed to `text-overflow`. Furthermore, since the `line-clamp` ellipsis can end up placed in descendant inline formatting contexts which don't have the relevant `line-clamp` shorthands, and since `text-overflow` can also be used inside a `line-clamp` container, it can't be known which of those properties caused the line truncation just from the computed styles. This CL fixes this by updating `InlineLayoutAlgorithm::GetLineClampState` so the `kLineClampEllipsis` and `kTextOverflowEllipsis` return values indicate which property caused the ellipsis, rather than the method in which the ellipsis is placed. This is then passed to `LineTruncator` constructor. Bug: 40336192, 41492459 Change-Id: Ifad94fd848492fc46b5548a1df7833f5df69c46a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6845961 Commit-Queue: Andreu Botella <abotella@igalia.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1501770}
1 parent b56a33b commit e3cea74

4 files changed

Lines changed: 72 additions & 1 deletion

css/css-overflow/line-clamp/line-clamp-with-text-overflow-string.html renamed to css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-001.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
white-space: pre;
1616
background-color: yellow;
1717
padding: 0 4px;
18-
text-overflow: "-"
18+
text-overflow: "-";
19+
overflow: hidden;
1920
}
2021
</style>
2122
<div class="clamp">Line 1

‎css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-002.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: line-clamp with text-overflow<string></title>
4+
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
6+
<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
7+
<meta name="assert" content="line-clamp should clamp with default ellipsis even if text-overflow has string value. This is the case even if the inline root of the ellipsized line is not the line-clamp container, but a descendant of it.">
8+
<style>
9+
.clamp {
10+
display: -webkit-box;
11+
-webkit-box-orient: vertical;
12+
-webkit-line-clamp: 4;
13+
line-clamp: 4;
14+
font: 16px / 32px serif;
15+
white-space: pre;
16+
background-color: yellow;
17+
padding: 0 4px;
18+
text-overflow: "-";
19+
overflow: hidden;
20+
}
21+
</style>
22+
<div class="clamp"><div>Line 1
23+
Line 2
24+
Line 3
25+
Line 4
26+
Line 5</div></div>

‎css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-003.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: line-clamp with text-overflow<string></title>
4+
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
6+
<link rel="match" href="reference/line-clamp-with-text-overflow-string-003-ref.html">
7+
<meta name="assert" content="If text-overflow has a string value, all lines that ellipsize because of that property should use that string as the ellipsis. This should happen even inside of a line-clamp container.">
8+
<style>
9+
.clamp {
10+
display: -webkit-box;
11+
-webkit-box-orient: vertical;
12+
-webkit-line-clamp: 4;
13+
line-clamp: 4;
14+
font: 16px / 32px monospace;
15+
white-space: pre;
16+
background-color: yellow;
17+
padding: 0 4px;
18+
width: 35.1ch;
19+
text-overflow: "-";
20+
overflow: hidden;
21+
}
22+
</style>
23+
<div class="clamp">Line 1
24+
Line 2 overflows the line-clamp container
25+
Line 3
26+
Line 4
27+
Line 5</div>

‎css/css-overflow/line-clamp/reference/line-clamp-with-text-overflow-string-003-ref.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Reference</title>
4+
<style>
5+
.clamp {
6+
font: 16px / 32px monospace;
7+
white-space: pre;
8+
background-color: yellow;
9+
padding: 0 4px;
10+
width: 35.1ch;
11+
}
12+
</style>
13+
14+
<div class="clamp">Line 1
15+
Line 2 overflows the line-clamp co-
16+
Line 3
17+
Line 4…</div>

0 commit comments

Comments
 (0)