From 841bd917840fe976646bab3923c0b54b62683040 Mon Sep 17 00:00:00 2001 From: Martin Robinson Date: Thu, 21 Mar 2024 16:58:03 +0100 Subject: [PATCH] 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. --- components/layout_2020/flow/inline.rs | 7 +++- .../CSS2/text/text-indent-wrap-002.html.ini | 2 ++ tests/wpt/meta/MANIFEST.json | 34 +++++++++++++++++++ .../text-align-justify-with-overflow-ref.html | 26 ++++++++++++++ .../text-align-justify-with-overflow.html | 29 ++++++++++++++++ .../CSS2/text/text-indent-wrap-002-ref.html | 23 +++++++++++++ .../css/CSS2/text/text-indent-wrap-002.html | 22 ++++++++++++ 7 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 tests/wpt/meta-legacy-layout/css/CSS2/text/text-indent-wrap-002.html.ini create mode 100644 tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html create mode 100644 tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow.html create mode 100644 tests/wpt/tests/css/CSS2/text/text-indent-wrap-002-ref.html create mode 100644 tests/wpt/tests/css/CSS2/text/text-indent-wrap-002.html diff --git a/components/layout_2020/flow/inline.rs b/components/layout_2020/flow/inline.rs index 45eb11ab77b..3d4a3b5a174 100644 --- a/components/layout_2020/flow/inline.rs +++ b/components/layout_2020/flow/inline.rs @@ -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) } diff --git a/tests/wpt/meta-legacy-layout/css/CSS2/text/text-indent-wrap-002.html.ini b/tests/wpt/meta-legacy-layout/css/CSS2/text/text-indent-wrap-002.html.ini new file mode 100644 index 00000000000..e3199f344c0 --- /dev/null +++ b/tests/wpt/meta-legacy-layout/css/CSS2/text/text-indent-wrap-002.html.ini @@ -0,0 +1,2 @@ +[text-indent-wrap-002.html] + expected: FAIL diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json index 5a0a92b31fd..21b14fbe825 100644 --- a/tests/wpt/meta/MANIFEST.json +++ b/tests/wpt/meta/MANIFEST.json @@ -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", [] diff --git a/tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html b/tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html new file mode 100644 index 00000000000..be2ac9dae17 --- /dev/null +++ b/tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow-ref.html @@ -0,0 +1,26 @@ + + + + + CSS Test: Overflowing content with text-align: justify + + + + + + + + + + +
lorem ipsum lastline
+
lorem ipsum lastline
+ + diff --git a/tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow.html b/tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow.html new file mode 100644 index 00000000000..927e9afd5ad --- /dev/null +++ b/tests/wpt/tests/css/CSS2/text/text-align-justify-with-overflow.html @@ -0,0 +1,29 @@ + + + + + CSS Test: Overflowing content with text-align: justify + + + + + + + + + + + +
lorem ipsum lastline
+
lorem ipsum lastline
+ + + diff --git a/tests/wpt/tests/css/CSS2/text/text-indent-wrap-002-ref.html b/tests/wpt/tests/css/CSS2/text/text-indent-wrap-002-ref.html new file mode 100644 index 00000000000..9750ce4c899 --- /dev/null +++ b/tests/wpt/tests/css/CSS2/text/text-indent-wrap-002-ref.html @@ -0,0 +1,23 @@ + + + + + CSS Test: text-indent test (multiple-lines and text-align: justify) + + + + + + + +

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.

+ + diff --git a/tests/wpt/tests/css/CSS2/text/text-indent-wrap-002.html b/tests/wpt/tests/css/CSS2/text/text-indent-wrap-002.html new file mode 100644 index 00000000000..128cba3f122 --- /dev/null +++ b/tests/wpt/tests/css/CSS2/text/text-indent-wrap-002.html @@ -0,0 +1,22 @@ + + + + + CSS Test: text-indent test (multiple-lines and text-align: justify) + + + + + + + + +

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.

+ +