Skip to content

Commit 444f29b

Browse files
javifernandezmoz-wptsync-bot
authored andcommitted
Bug 1750885 [wpt PR 32444] - Compute the NGLineInfo hang_width even if ignored in text alignment, a=testonly
Automatic update from web-platform-tests Compute the NGLineInfo hang_width even if ignored in text alignment The NGLineInfo class has an attribute hang_width_ to store the width of the preserved trailing spaces. Theoretically, this value is intended to be used during text alignment, following the rules discussed and resolved in the CSS WG issue 3440 [1]. In this issue it's been discussed how to handle end-of-line pre-wrap spaces, which may hang and could affect the final result of the text alignment. However, we also use the NGLineInfo's attribute to compute the line box's inline size, as part of the NGInlineLayoutAlgorithm::CreateLine logic. Since we ignore the hanging spaces when using 'center' alignment, we don't compute it; this leads to an incorrect inline size of the fist line in the test case described in the bug 782638, which incorrectly overflows the box's fixed size, causing the scrollbar to be activated when it shouldn't. Since we always compute the hang_width now, we need to consider it also in the case of RTL scenarios, where we were assuming it was ignored depending on certain values of the text alignment. In order to avoid regressions, this CL also simplifies the line_box's inline_size computation performed in the CreateLine function, ignoring for now the text direction, we always subtract the hang_width Then, the inclusion or not of the hang_width will be decided where it should; the function NGInlineLayoutAlgorithm::ApplyTextAlign is the one responsible of implementing the rules agreed in the CSS WG issue mentioned before. w3c/csswg-drafts#3440 Bug: 782638, 1278559 Change-Id: Ib1950533169fb9cabc6b7bb9e6925451eff2a767 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3360876 Reviewed-by: Koji Ishii <[email protected]> Commit-Queue: Javier Fernandez <[email protected]> Cr-Commit-Position: refs/heads/main@{#961084} -- wpt-commits: e5cfd27e4a082ec75151f98f2ffcc99376b656e8 wpt-pr: 32444
1 parent 5125e21 commit 444f29b

15 files changed

+576
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text Reference File</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
6+
<style>
7+
div {
8+
display: inline-block;
9+
width: 3ch;
10+
height: 100px;
11+
font: 40px/1 Ahem;
12+
border: 1px solid black;
13+
box-sizing: content-box;
14+
overflow-y: hidden;
15+
overflow-x: auto;
16+
}
17+
.left { text-align: left; }
18+
.center { text-align: center; }
19+
.right { text-align: right; }
20+
.start { text-align: start; }
21+
.end { text-align: end; }
22+
</style>
23+
<div class="left">XXX&#10;X</div>
24+
<div class="center">XXX&#10;X</div>
25+
<div class="right">XXX&#10;X</div>
26+
<div class="start">XXX&#10;X</div>
27+
<div class="end">XXX&#10;X</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text Reference File</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
6+
<style>
7+
div {
8+
display: inline-block;
9+
width: 3ch;
10+
height: 100px;
11+
font: 40px/1 Ahem;
12+
border: 1px solid black;
13+
box-sizing: content-box;
14+
overflow-y: hidden;
15+
overflow-x: auto;
16+
}
17+
.left { text-align: left; }
18+
.center { text-align: center; }
19+
.right { text-align: right; }
20+
.start { text-align: start; }
21+
.end { text-align: end; }
22+
</style>
23+
<div class="left">XXXX&#10;X</div>
24+
<div class="center">XXXX&#10;X</div>
25+
<div class="right">XXXX&#10;X</div>
26+
<div class="start">XXXX&#10;X</div>
27+
<div class="end">XXXX&#10;X</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text Reference File</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
6+
<style>
7+
div {
8+
display: inline-block;
9+
width: 3ch;
10+
height: 100px;
11+
font: 40px/1 Ahem;
12+
border: 1px solid black;
13+
box-sizing: content-box;
14+
overflow-y: hidden;
15+
overflow-x: auto;
16+
17+
direction: rtl;
18+
}
19+
.left { text-align: left; }
20+
.center { text-align: center; }
21+
.right { text-align: right; }
22+
.start { text-align: start; }
23+
.end { text-align: end; }
24+
</style>
25+
<div class="left">XXX&#10;X</div>
26+
<div class="center">XXX&#10;X</div>
27+
<div class="right">XXX&#10;X</div>
28+
<div class="start">XXX&#10;X</div>
29+
<div class="end">XXX&#10;X</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text Reference File</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
6+
<style>
7+
div {
8+
display: inline-block;
9+
width: 3ch;
10+
height: 100px;
11+
font: 40px/1 Ahem;
12+
border: 1px solid black;
13+
box-sizing: content-box;
14+
overflow-y: hidden;
15+
overflow-x: auto;
16+
17+
direction: rtl;
18+
}
19+
.left { text-align: left; }
20+
.center { text-align: center; }
21+
.right { text-align: right; }
22+
.start { text-align: start; }
23+
.end { text-align: end; }
24+
</style>
25+
<div class="left">XXXX&#10;X</div>
26+
<div class="center">XXXX&#10;X</div>
27+
<div class="right">XXXX&#10;X</div>
28+
<div class="start">XXXX&#10;X</div>
29+
<div class="end">XXXX&#10;X</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text Reference File</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
6+
<style>
7+
div {
8+
display: inline-block;
9+
width: 3ch;
10+
height: 100px;
11+
font: 40px/1 Ahem;
12+
border: 1px solid black;
13+
box-sizing: content-box;
14+
overflow-y: hidden;
15+
overflow-x: auto;
16+
17+
direction: rtl;
18+
}
19+
.left { text-align: left; }
20+
.center { text-align: center; }
21+
.right { text-align: right; }
22+
.start { text-align: start; }
23+
.end { text-align: end; }
24+
</style>
25+
<div class="left">&nbsp;XXX&#10;X</div>
26+
<div class="center">&nbsp;XXX&#10;X</div>
27+
<div class="right">&nbsp;XXX&#10;X</div>
28+
<div class="start">&nbsp;XXX&#10;X</div>
29+
<div class="end">&nbsp;XXX&#10;X</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
6+
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
7+
<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
8+
<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
10+
<link rel="match" href="reference/trailing-space-and-text-alignment-001-ref.html">
11+
<meta name="assert" content="preserved trailing spaces under 'white-space: normal' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
12+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
13+
<style>
14+
textarea {
15+
/* Reset user-agent style */
16+
margin: initial;
17+
padding: initial;
18+
border: initial;
19+
outline: initial;
20+
resize: initial;
21+
overflow-wrap: initial;
22+
23+
height: 100px;
24+
font: 40px/1 Ahem;
25+
border: 1px solid black;
26+
overflow-y: hidden;
27+
overflow-x: auto;
28+
29+
/* testing */
30+
width: 3ch;
31+
white-space: normal;
32+
}
33+
.left { text-align: left; }
34+
.center { text-align: center; }
35+
.right { text-align: right; }
36+
.start { text-align: start; }
37+
.end { text-align: end; }
38+
</style>
39+
<textarea class="left">XXX X</textarea>
40+
<textarea class="center">XXX X</textarea>
41+
<textarea class="right">XXX X</textarea>
42+
<textarea class="start">XXX X</textarea>
43+
<textarea class="end">XXX X</textarea>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
6+
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
7+
<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
8+
<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre">
10+
<link rel="match" href="reference/trailing-space-and-text-alignment-002-ref.html">
11+
<meta name="assert" content="preserved trailing spaces under 'white-space: pre' shouldn't hang and may cause overflow and activate the scrollbars.">
12+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
13+
<style>
14+
textarea {
15+
/* Reset user-agent style */
16+
margin: initial;
17+
padding: initial;
18+
border: initial;
19+
outline: initial;
20+
resize: initial;
21+
overflow-wrap: initial;
22+
23+
height: 100px;
24+
font: 40px/1 Ahem;
25+
border: 1px solid black;
26+
overflow-y: hidden;
27+
overflow-x: auto;
28+
29+
/* testing */
30+
width: 3ch;
31+
white-space: pre;
32+
}
33+
.left { text-align: left; }
34+
.center { text-align: center; }
35+
.right { text-align: right; }
36+
.start { text-align: start; }
37+
.end { text-align: end; }
38+
</style>
39+
<textarea class="left">XXX &#10;X</textarea>
40+
<textarea class="center">XXX &#10;X</textarea>
41+
<textarea class="right">XXX &#10;X</textarea>
42+
<textarea class="start">XXX &#10;X</textarea>
43+
<textarea class="end">XXX &#10;X</textarea>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
6+
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
7+
<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
8+
<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
10+
<link rel="match" href="reference/trailing-space-and-text-alignment-001-ref.html">
11+
<meta name="assert" content="preserved trailing spaces under 'white-space: pre-wrap' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
12+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
13+
<style>
14+
textarea {
15+
/* Reset user-agent style */
16+
margin: initial;
17+
padding: initial;
18+
border: initial;
19+
outline: initial;
20+
resize: initial;
21+
overflow-wrap: initial;
22+
23+
height: 100px;
24+
font: 40px/1 Ahem;
25+
border: 1px solid black;
26+
overflow-y: hidden;
27+
overflow-x: auto;
28+
29+
/* testing */
30+
width: 3ch;
31+
white-space: pre-wrap;
32+
}
33+
.left { text-align: left; }
34+
.center { text-align: center; }
35+
.right { text-align: right; }
36+
.start { text-align: start; }
37+
.end { text-align: end; }
38+
</style>
39+
<textarea class="left">XXX X</textarea>
40+
<textarea class="center">XXX X</textarea>
41+
<textarea class="right">XXX X</textarea>
42+
<textarea class="start">XXX X</textarea>
43+
<textarea class="end">XXX X</textarea>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
6+
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
7+
<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
8+
<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
10+
<link rel="match" href="reference/trailing-space-and-text-alignment-002-ref.html">
11+
<meta name="assert" content="preserved trailing spaces under 'white-space: break-spaces' shouldn't hang and may cause overflow and activate the horizontal scrollbar.">
12+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
13+
<style>
14+
textarea {
15+
/* Reset user-agent style */
16+
margin: initial;
17+
padding: initial;
18+
border: initial;
19+
outline: initial;
20+
resize: initial;
21+
overflow-wrap: initial;
22+
23+
height: 100px;
24+
font: 40px/1 Ahem;
25+
border: 1px solid black;
26+
overflow-y: hidden;
27+
overflow-x: auto;
28+
29+
/* testing */
30+
width: 3ch;
31+
white-space: break-spaces;
32+
}
33+
.left { text-align: left; }
34+
.center { text-align: center; }
35+
.right { text-align: right; }
36+
.start { text-align: start; }
37+
.end { text-align: end; }
38+
</style>
39+
<textarea class="left">XXX X</textarea>
40+
<textarea class="center">XXX X</textarea>
41+
<textarea class="right">XXX X</textarea>
42+
<textarea class="start">XXX X</textarea>
43+
<textarea class="end">XXX X</textarea>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
4+
<link rel="author" title="Javier Fernandez" href="mailto:[email protected]" />
5+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
6+
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
7+
<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
8+
<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">
10+
<link rel="match" href="reference/trailing-space-and-text-alignment-001-ref.html">
11+
<meta name="assert" content="preserved trailing spaces under 'white-space: pre-line' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
12+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
13+
<style>
14+
textarea {
15+
/* Reset user-agent style */
16+
margin: initial;
17+
padding: initial;
18+
border: initial;
19+
outline: initial;
20+
resize: initial;
21+
overflow-wrap: initial;
22+
23+
height: 100px;
24+
font: 40px/1 Ahem;
25+
border: 1px solid black;
26+
overflow-y: hidden;
27+
overflow-x: auto;
28+
29+
/* testing */
30+
width: 3ch;
31+
white-space: pre-line;
32+
}
33+
.left { text-align: left; }
34+
.center { text-align: center; }
35+
.right { text-align: right; }
36+
.start { text-align: start; }
37+
.end { text-align: end; }
38+
</style>
39+
<textarea class="left">XXX X</textarea>
40+
<textarea class="center">XXX X</textarea>
41+
<textarea class="right">XXX X</textarea>
42+
<textarea class="start">XXX X</textarea>
43+
<textarea class="end">XXX X</textarea>

0 commit comments

Comments
 (0)