Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 22:15:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Take into account text-indent for justification (#31777)

Browse source 
This change makes it so that when calculating the space added between
words for justification, text-indent is taken into account.

Fixes #31775.
This commit is contained in:
Martin Robinson 2024-03-21 16:58:03 +01:00 • committed by GitHub
parent 755701f4f6
commit 841bd91784
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 142 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/layout_2020/flow/inline.rs
View file

@ -989,13 +989,18 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
match self.current_line.count_justification_opportunities() {
0 => Length::zero(),
num_justification_opportunities => {
(available_space - line_length) / (num_justification_opportunities as f32)
(available_space - text_indent - line_length) /
(num_justification_opportunities as f32)
},
}
},
_ => Length::zero(),
};
// If the content overflows the line, then justification adjustment will become negative. In
// that case, do not make any adjustment for justification.
let justification_adjustment = justification_adjustment.max(Length::zero());
(adjusted_line_start, justification_adjustment)
}

2
tests/wpt/meta-legacy-layout/css/CSS2/text/text-indent-wrap-002.html.ini Normal file
View file

@ -0,0 +1,2 @@
[text-indent-wrap-002.html]
expected: FAIL

34
tests/wpt/meta/MANIFEST.json
View file

@ -107831,6 +107831,19 @@
{}
]
],
"text-align-justify-with-overflow.html": [
"927e9afd5add40e0509fb1ceb357abd5f8be43db",
[
null,
[
[
"/css/CSS2/text/text-align-justify-with-overflow-ref.html",
"=="
]
],
{}
]
],
"text-align-white-space-001.xht": [
"85d62902f4070db368403973dad91ca04c498118",
[
@ -109287,6 +109300,19 @@
{}
]
],
"text-indent-wrap-002.html": [
"128cba3f1221d8349265eb169112a399fde8e143",
[
null,
[
[
"/css/CSS2/text/text-indent-wrap-002-ref.html",
"=="
]
],
{}
]
],
"text-transform-001.xht": [
"c55c151db2b1f20f6751cb45ca0809f7e29b6396",
[
@ -379087,6 +379113,10 @@
"0e8b86f98b128d6994b1d815e281c29700aae66b",
[]
],
"text-align-justify-with-overflow-ref.html": [
"be2ac9dae173062a8a473fdeeda4afa97d418319",
[]
],
"text-align-white-space-001-ref.xht": [
"44dc0aabc9a8588311acd8e64d10e0facd4a69b7",
[]
@ -379211,6 +379241,10 @@
"8b9aeacf34436c545d0d087db04fef0170825962",
[]
],
"text-indent-wrap-002-ref.html": [
"9750ce4c8994bb807cfbdd5cba0f789892bda07c",
[]
],
"text-transform-001-ref.xht": [
"f34e7044897f7f48e204a7b8c75bd051c227a8c9",
[]

26
tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Overflowing content with text-align: justify</title>
<link rel="author" title="Martin Robinson" href="mrobinson@igalila.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop">
<link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property">
<style type="text/css">
div {
width: 0px;
}
</style>
</head>
<body>
<!-- These two divs should overflow, one because of the length of the content
and the other because of `text-indent`. In both of these cases, `text-align: justify`
should be treated like `text-align: left` since there is no extra space to
distribute to justification opportunities. -->
<div>lorem&nbsp;ipsum lastline</div>
<div style="text-indent: 50px">lorem&nbsp;ipsum lastline</div>
</body>
</html>

29
tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: Overflowing content with text-align: justify</title>
<link rel="author" title="Martin Robinson" href="mrobinson@igalila.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop">
<link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property">
<link rel="match" href="text-align-justify-with-overflow-ref.html"/>
<style type="text/css">
div {
text-align: justify;
width: 0px;
}
</style>
</head>
<body>
<!-- These two divs should overflow, one because of the length of the content
and the other because of `text-indent`. In both of these cases, `text-align: justify`
should be treated like `text-align: left` since there is no extra space to
distribute to justification opportunities. -->
<div>lorem&nbsp;ipsum lastline</div>
<div style="text-indent: 50px">lorem&nbsp;ipsum lastline</div>
</body>
</html>

23
tests/wpt/tests/css/CSS2/text/text-indent-wrap-002-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: text-indent test (multiple-lines and text-align: justify)</title>
<link rel="author" title="Martin Robinson" href="mrobinson@igalila.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop">
<link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property">
<style type="text/css">
p {
text-align: justify;
}
span {
margin-left: 100px;
background: yellow;
}
</style>
</head>
<body>
<p><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p>
</body>
</html>

22
tests/wpt/tests/css/CSS2/text/text-indent-wrap-002.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: text-indent test (multiple-lines and text-align: justify)</title>
<link rel="author" title="Martin Robinson" href="mrobinson@igalila.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#indentation-prop">
<link ref="help" href="https://drafts.csswg.org/css-text/#text-align-property">
<link rel="match" href="text-indent-wrap-002-ref.html"/>
<style type="text/css">
p {
text-indent: 100px;
text-align: justify;
}
span { background: yellow }
</style>
</head>
<body>
<p><span>This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines. This is a long piece of text that will wrap to multiple lines.</span></p>
</body>
</html>