From 80efd6ea6e66b4b80318ae4e595bd0c49da956d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Fern=C3=A1ndez=20Garc=C3=ADa-Boente?=
 <jfernandez@igalia.com>
Date: Fri, 6 Nov 2020 17:40:17 +0000
Subject: [PATCH] Bug 1578343 [wpt PR 18799] - [css-text] Handling trailing
 ideographic spaces as regular spaces, a=testonly

Automatic update from web-platform-tests
[css-text] Handling trailing ideographic spaces as regular spaces

The CSS Text 3 specification states on its 'Phase II: Trimming and
Positioning' section:

https://www.w3.org/TR/css-text-3/#white-space-phase-2

3- A sequence at the end of a line of collapsible spaces is removed, as
well as any trailing U+1680 OGHAM SPACE MARK whose white-space property
is normal, nowrap, or pre-line.

4- If there remains any sequence of white space and/or and/or other space
separators, at the end of a line: If white-space is set to pre-wrap, the
UA must hang this sequence. It may also visually collapse the character
advance widths of any that would otherwise overflow.

Summarizing, other space separator are not considered as collapsible
spaces and should be hang, or broken in case of 'break-spaces', according
to the value of the 'white-space' property.

This CL tries to implement such behavior, since we were not considering
this kind of spaces in the hanging/collapsing logic.

For now this change affects LayoutNG only, but it'll be implemented for
Legacy in a different CL.

Bug: 972952
Change-Id: Idb0aff05f7f423f5b62f5169177c0240917435a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1687411
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#824597}

--

wpt-commits: 9c959d8835a582e864215eda9fe0e42086b046bf
wpt-pr: 18799
---
 .../full-width-leading-spaces-001.html        | 25 +++++++++++++++++
 .../full-width-leading-spaces-002.html        | 25 +++++++++++++++++
 .../full-width-leading-spaces-003.html        | 25 +++++++++++++++++
 .../full-width-leading-spaces-004.html        | 24 +++++++++++++++++
 .../full-width-leading-spaces-005.html        | 25 +++++++++++++++++
 .../full-width-leading-spaces-001-ref.html    |  6 +++++
 .../trailing-ideographic-space-011-ref.html   | 15 +++++++++++
 ...railing-ideographic-space-alt-011-ref.html | 11 ++++++++
 ...pace-pre-wrap-trailing-spaces-004-ref.html |  1 +
 ...-pre-wrap-trailing-spaces-alt-004-ref.html | 17 ++++++++++++
 .../trailing-ideographic-space-005.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-006.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-007.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-008.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-009.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-010.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-011.html       | 21 +++++++++++++++
 .../trailing-ideographic-space-012.html       | 24 +++++++++++++++++
 .../trailing-ideographic-space-013.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-014.html       | 27 +++++++++++++++++++
 .../trailing-ideographic-space-015.html       | 25 +++++++++++++++++
 .../trailing-ideographic-space-016.html       | 25 +++++++++++++++++
 ...te-space-pre-wrap-trailing-spaces-004.html |  2 ++
 23 files changed, 487 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-001.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-002.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-003.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-004.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-005.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/reference/full-width-leading-spaces-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-011-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-011-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-005.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-006.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-007.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-008.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-009.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-010.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-011.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-012.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-013.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-014.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-015.html
 create mode 100644 testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-016.html

diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-001.html
new file mode 100644
index 000000000000..c23e4fdbc76e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/full-width-leading-spaces-001-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) sequence at the beginning of the line must not be collapsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 20px/1 Ahem; }
+.test {
+    width: 5em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in a green rectangle and if there is no red.
+<div class="ref">XXXXX</div>
+<div class="test">&#x3000;&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-002.html
new file mode 100644
index 000000000000..610e5ae4632e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) sequence at the beginning of the line must not be collapsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 50px/1 Ahem; }
+.test {
+    width: 2em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div class="test">&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-003.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-003.html
new file mode 100644
index 000000000000..610e5ae4632e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) sequence at the beginning of the line must not be collapsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 50px/1 Ahem; }
+.test {
+    width: 2em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div class="test">&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-004.html
new file mode 100644
index 000000000000..eb7d24f042c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Leading ideographic space sequences must account for intrinsic size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.ref {
+    width: 100px;
+    height: 100px;
+    background: red;
+}
+.test {
+    width: min-content;
+    font-size: 100px;
+    line-height: 1;
+    background: green;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"><div class="test">&#x03000;</div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-005.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-005.html
new file mode 100644
index 000000000000..8fd86a900298
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="There is a breaking opportunity at the end of a leading ideographic space (U+3000) sequence.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 50px/1 Ahem; }
+.test {
+    width: 2em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div class="test">&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/full-width-leading-spaces-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/full-width-leading-spaces-001-ref.html
new file mode 100644
index 000000000000..2b9cf1c3b27e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/full-width-leading-spaces-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<p>Test passes if the characters below are arranged in a green rectangle and if there is no red.
+<div style="width: 100px; height: 20px; background: green"></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-011-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-011-ref.html
new file mode 100644
index 000000000000..a2efec249064
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-011-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    white-space: pre;
+}
+span { background: blue; }
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X X<span> </span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-011-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-011-ref.html
new file mode 100644
index 000000000000..03023f5359c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-011-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 20px/1 Ahem; }
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>X X<span>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-004-ref.html
index 0cbc7b231f0e..6f79dfbeb3fd 100644
--- a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-004-ref.html
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-004-ref.html
@@ -9,6 +9,7 @@ div {
   font: 25px/1 Ahem;
   color: green;
 }
+span { color: blue; }
 </style>
 
 <p>This test passes if there is a green square and no red.
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html
new file mode 100644
index 000000000000..de92f22e627b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+}
+span { color: blue; }
+</style>
+
+<p>This test passes if there is a green square and no red.
+
+<div>XX<span>X</span><br>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-005.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-005.html
new file mode 100644
index 000000000000..b33531bff998
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang unconditionally .">
+<style>
+div {
+  width: 2.5em;
+  white-space: normal;
+}
+span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-006.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-006.html
new file mode 100644
index 000000000000..f5a8ab1dfbec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must unconditionally hang.">
+<style>
+div {
+  width: 2.5em;
+  white-space: normal;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-007.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-007.html
new file mode 100644
index 000000000000..d58d5ba9cf21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap">
+<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must unconditionally hang.">
+<style>
+div {
+  width: 2.5em;
+  white-space: nowrap;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span><br>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-008.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-008.html
new file mode 100644
index 000000000000..50de162540f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-008.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">
+<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must unconditionally hang.">
+<style>
+div {
+  width: 2.5em;
+  white-space: pre-line;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-009.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-009.html
new file mode 100644
index 000000000000..2a642bbc6fd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-009.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap">
+<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang unconditionally .">
+<style>
+div {
+  width: 2.5em;
+  white-space: nowrap;
+}
+span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span><br>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-010.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-010.html
new file mode 100644
index 000000000000..eef3613edd00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-010.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequence of ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">
+<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang unconditionally .">
+<style>
+div {
+  width: 2.5em;
+  white-space: pre-line;
+}
+span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-011.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-011.html
new file mode 100644
index 000000000000..381d7a41b001
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-011.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ideographic-space-011-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-011-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    width: 3ch;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X&#x03000;<span>X&#x03000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-012.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-012.html
new file mode 100644
index 000000000000..2b73db18202d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-012.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span>&#x03000;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-013.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-013.html
new file mode 100644
index 000000000000..fa8195e4a828
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-013.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: break-word.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+  overflow-wrap: break-word;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span>&#x03000;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-014.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-014.html
new file mode 100644
index 000000000000..8eab5924c57f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-014.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: anywhere.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+  overflow-wrap: anywhere;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span>&#x03000;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-015.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-015.html
new file mode 100644
index 000000000000..efcb2c8a0575
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-015.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/trailing-ideographic-space-011-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-011-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: anywhere.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    width: 3ch;
+
+    overflow-wrap: anywhere;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X&#x03000;<span>X&#x03000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-016.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-016.html
new file mode 100644
index 000000000000..3e65785f39dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-016.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/trailing-ideographic-space-011-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-011-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: break-word.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    width: 3ch;
+
+    overflow-wrap: break-word;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X&#x03000;<span>X&#x03000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-004.html
index cde64415b7b0..d2fda889bc08 100644
--- a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-004.html
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-004.html
@@ -6,6 +6,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
 <link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
 <link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
 <meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
 <style>
@@ -17,6 +18,7 @@ div {
   width: 2ch;
   white-space: pre-wrap;
 }
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
 </style>
 
 <p>This test passes if there is a green square and no red.