mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
layout: Take into account text-indent for justification (#31777)
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
GitHub
parent
755701f4f6
commit
841bd91784
7 changed files with 142 additions and 1 deletions
|
|
@ -989,13 +989,18 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
|
||||||
match self.current_line.count_justification_opportunities() {
|
match self.current_line.count_justification_opportunities() {
|
||||||
0 => Length::zero(),
|
0 => Length::zero(),
|
||||||
num_justification_opportunities => {
|
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(),
|
_ => 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)
|
(adjusted_line_start, justification_adjustment)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
[text-indent-wrap-002.html]
|
||||||
|
expected: FAIL
|
||||||
|
|
@ -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": [
|
"text-align-white-space-001.xht": [
|
||||||
"85d62902f4070db368403973dad91ca04c498118",
|
"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": [
|
"text-transform-001.xht": [
|
||||||
"c55c151db2b1f20f6751cb45ca0809f7e29b6396",
|
"c55c151db2b1f20f6751cb45ca0809f7e29b6396",
|
||||||
[
|
[
|
||||||
|
|
@ -379087,6 +379113,10 @@
|
||||||
"0e8b86f98b128d6994b1d815e281c29700aae66b",
|
"0e8b86f98b128d6994b1d815e281c29700aae66b",
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
"text-align-justify-with-overflow-ref.html": [
|
||||||
|
"be2ac9dae173062a8a473fdeeda4afa97d418319",
|
||||||
|
[]
|
||||||
|
],
|
||||||
"text-align-white-space-001-ref.xht": [
|
"text-align-white-space-001-ref.xht": [
|
||||||
"44dc0aabc9a8588311acd8e64d10e0facd4a69b7",
|
"44dc0aabc9a8588311acd8e64d10e0facd4a69b7",
|
||||||
[]
|
[]
|
||||||
|
|
@ -379211,6 +379241,10 @@
|
||||||
"8b9aeacf34436c545d0d087db04fef0170825962",
|
"8b9aeacf34436c545d0d087db04fef0170825962",
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
"text-indent-wrap-002-ref.html": [
|
||||||
|
"9750ce4c8994bb807cfbdd5cba0f789892bda07c",
|
||||||
|
[]
|
||||||
|
],
|
||||||
"text-transform-001-ref.xht": [
|
"text-transform-001-ref.xht": [
|
||||||
"f34e7044897f7f48e204a7b8c75bd051c227a8c9",
|
"f34e7044897f7f48e204a7b8c75bd051c227a8c9",
|
||||||
[]
|
[]
|
||||||
|
|
|
||||||
|
|
@ -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 ipsum lastline</div>
|
||||||
|
<div style="text-indent: 50px">lorem ipsum lastline</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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 ipsum lastline</div>
|
||||||
|
<div style="text-indent: 50px">lorem ipsum lastline</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
tests/wpt/tests/css/CSS2/text/text-indent-wrap-002-ref.html
Normal file
23
tests/wpt/tests/css/CSS2/text/text-indent-wrap-002-ref.html
Normal 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
22
tests/wpt/tests/css/CSS2/text/text-indent-wrap-002.html
Normal 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue