mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +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:
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() {
|
||||
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)
|
||||
}
|
||||
|
||||
|
|
|
@ -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": [
|
||||
"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",
|
||||
[]
|
||||
|
|
|
@ -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