summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-text/line-breaking
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-text/line-breaking')
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-001.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-002.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-003.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-004.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-005.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-006.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-007.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-008.html37
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-009.html40
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-010.html40
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-011.html40
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-012.html41
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-013.html60
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-014.html61
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-015.html16
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-016.html17
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-017.html17
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-018.html78
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-019.html88
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-020.html30
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-021.html16
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-022.html31
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-023.html32
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-024.html27
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-025.html27
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-026.html27
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-027.html27
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-001.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-002.html34
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-003.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-004.html32
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-005.html32
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-006.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-007.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-008.html33
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-009.html21
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-nowrap-001.html40
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-001.html40
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-002.html40
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-003.html40
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-001.html23
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-002.html23
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-003.html23
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-004.html17
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-005.html18
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-006.html29
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-001-ref.html19
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-012-ref.html18
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-013-ref.html41
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-015-ref.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-016-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-017-ref.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-018-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-019-ref.html72
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-021-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-023-ref.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-024-ref.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-025-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-026-ref.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-027-ref.html25
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-004-ref.html17
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html18
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html16
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html16
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-009-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-ic-001-ref.html33
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-001-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-003-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-004-ref.html9
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-006-ref.html16
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/reference/line-reabking-022.html17
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-1.html28
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-2.html28
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-3.html29
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-4.html29
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049-ref.html10
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049.html13
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-1.html21
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-2.html21
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-3.html22
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-4.html22
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-ref.html17
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/tools/generate-segment-break-transformation-rules-tests.py109
181 files changed, 3600 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-001.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-001.html
new file mode 100644
index 0000000000..f7c0cc0ff1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-001.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking around Zero With Space</title>
+<meta name=assert content="When ‘white-space’ allows wrapping, line breaking behavior defined for the ZW line-breaking classes in [UAX14] must be honored.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div>X&#x200B;X</div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-002.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-002.html
new file mode 100644
index 0000000000..2e2c285b52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-002.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking sanity check</title>
+<meta name=assert content="sanity check: an unstyled span should not affect line breaking">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>X&#x200B;</span>X</div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-003.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-003.html
new file mode 100644
index 0000000000..4d5048787b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-003.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking sanity check 2</title>
+<meta name=assert content="sanity check: an unstyled span should not affect line breaking">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>X</span>&#x200B;X</div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-004.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-004.html
new file mode 100644
index 0000000000..042d03c3af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-004.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking sanity check 3</title>
+<meta name=assert content="sanity check: an unstyled span should not affect line breaking">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div>X&#x200B;<span>X<span></div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-005.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-005.html
new file mode 100644
index 0000000000..bad85ec026
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-005.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking sanity check 4</title>
+<meta name=assert content="sanity check: an unstyled span should not affect line breaking">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div>X<span>&#x200B;X<span></div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-006.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-006.html
new file mode 100644
index 0000000000..edc161d526
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-006.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking sanity check 5</title>
+<meta name=assert content="sanity check: an unstyled span should not affect line breaking">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div>X<span>&#x200B;</span>X</div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-007.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-007.html
new file mode 100644
index 0000000000..de2ed7658d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-007.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking sanity check 6</title>
+<meta name=assert content="sanity check: an unstyled span should not affect line breaking">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>X&#x200B;</span><span>X</span></div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-008.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-008.html
new file mode 100644
index 0000000000..b17846dc6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-008.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking sanity check 7</title>
+<meta name=assert content="sanity check: an unstyled span should not affect line breaking">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>X</span><span>&#x200B;X</span></div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-009.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-009.html
new file mode 100644
index 0000000000..c5e4a55b46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-009.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundary</title>
+<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters, the white-space property on nearest common ancestor of the two characters controls breaking.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+span {
+ white-space: pre;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>X</span>&#x200B;<span>X</span></div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-010.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-010.html
new file mode 100644
index 0000000000..2d735cdf6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-010.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundary 2</title>
+<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters, the white-space property on nearest common ancestor of the two characters controls breaking.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+span {
+ white-space: pre;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>X</span>&#x200B;X</div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-011.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-011.html
new file mode 100644
index 0000000000..1a3c4f0076
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-011.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundary 3</title>
+<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters, the white-space property on nearest common ancestor of the two characters controls breaking.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ width: 1em;
+ line-height: 1em;
+ font-family: Ahem;
+ white-space: normal;
+ font-size: 20px;
+}
+span {
+ white-space: pre;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div>X&#x200B;<span>X<span></div>
+ <div class=fail>X</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-012.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-012.html
new file mode 100644
index 0000000000..6a10946131
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-012.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking for nowrap and floats</title>
+<meta name=assert content="When whitespace: nowrap is specified, floats should not cause line breaks">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel=match href="reference/line-breaking-012-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+ position: relative;
+ color:green;
+ line-height: 1em;
+ font-family: Ahem;
+ font-size: 20px;
+}
+
+.wrapper {
+ white-space: nowrap;
+}
+
+span {
+ float: left;
+}
+
+.fail {
+ color: red;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class="container">
+ <div class="fail">XX</div>
+ <div class="wrapper">X<span>X<span></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-013.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-013.html
new file mode 100644
index 0000000000..448a41d88f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-013.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking of emoji sequences that should form single clusters</title>
+<meta name=assert content="A UA must use the extended grapheme cluster (not legacy grapheme cluster), as defined in [UAX29], as the basis for its typographic character unit.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#characters">
+<link rel=match href="reference/line-breaking-013-ref.html">
+<link rel=author title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+ line-height: 1em;
+ font-size: 30px;
+}
+.container {
+ position: relative;
+ margin: .5em;
+}
+.ref {
+ background-color: white;
+ padding: .25em;
+}
+.test {
+ color: transparent;
+ background-color: red;
+ position: absolute;
+ width: .5em;
+ left: 0;
+ top: 0;
+ padding: .25em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>Each emoji should appear on a single line with no red background.</p>
+ <div class=container>
+ <div class=ref>&#x1F468;&#x200D;&#x1F4BB;</div><!-- man technologist -->
+ <div class=test>&#x1F468;&#x200D;&#x1F4BB;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div><!-- family with mother, son and daughter -->
+ <div class=test>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div><!-- woman juggling -->
+ <div class=test>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div><!-- woman basketball player (fitzpatrick type 6) -->
+ <div class=test>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div><!-- rainbow flag -->
+ <div class=test>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div><!-- flag of Wales -->
+ <div class=test>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-014.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-014.html
new file mode 100644
index 0000000000..ea9956362b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-014.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking (with word-break:break-all) of emoji sequences that should form single clusters</title>
+<meta name=assert content="A UA must use the extended grapheme cluster (not legacy grapheme cluster), as defined in [UAX29], as the basis for its typographic character unit.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#characters">
+<link rel=match href="reference/line-breaking-013-ref.html">
+<link rel=author title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+ line-height: 1em;
+ font-size: 30px;
+}
+.container {
+ position: relative;
+ margin: .5em;
+}
+.ref {
+ background-color: white;
+ padding: .25em;
+}
+.test {
+ word-break: break-all;
+ color: transparent;
+ background-color: red;
+ position: absolute;
+ width: .5em;
+ left: 0;
+ top: 0;
+ padding: .25em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>Each emoji should appear on a single line with no red background.</p>
+ <div class=container>
+ <div class=ref>&#x1F468;&#x200D;&#x1F4BB;</div><!-- man technologist -->
+ <div class=test>&#x1F468;&#x200D;&#x1F4BB;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div><!-- family with mother, son and daughter -->
+ <div class=test>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div><!-- woman juggling -->
+ <div class=test>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div><!-- woman basketball player (fitzpatrick type 6) -->
+ <div class=test>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div><!-- rainbow flag -->
+ <div class=test>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div>
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div><!-- flag of Wales -->
+ <div class=test>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-015.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-015.html
new file mode 100644
index 0000000000..aaa1c2ba87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-015.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundaries</title>
+<meta name=assert content="An empty inline element should not introduce a line-break opportunity">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-015-ref.html">
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.test { margin: 1em 0; width: 0; line-height: 2; }
+</style>
+<body>
+The word "unbroken" below should <b>not</b> be broken:
+<div class="test">un<span></span>bro<b></b>ken</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-016.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-016.html
new file mode 100644
index 0000000000..c600504b4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-016.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundaries</title>
+<meta name=assert content="An out-of-flow element should not introduce a line-break opportunity">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-016-ref.html">
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.test { margin: 1em 0; width: 0; }
+.oof { position: absolute; left: 6em; }
+</style>
+<body>
+The word "unbroken" below should <b>not</b> be broken:
+<div class="test">un<span class="oof"></span>bro<b class="oof">absolute</b>ken</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-017.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-017.html
new file mode 100644
index 0000000000..36af931b1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-017.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundaries</title>
+<meta name=assert content="An out-of-flow element should not introduce a line-break opportunity">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-017-ref.html">
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.test { margin: 1em 0; width: 0; }
+.oof { float: left; }
+</style>
+<body>
+The word "unbroken" below should <b>not</b> be broken:
+<div class="test">un<span class="oof"></span>bro<b class="oof">float</b>ken</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-018.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-018.html
new file mode 100644
index 0000000000..ade2b6d4d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-018.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text — out-of-flow element adjacent to a potential line-break</title>
+<meta name=assert content="An abs-pos out-of-flow must not introduce a soft line break
+ between the border and content of the enclosing inline">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-018-ref.html">
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.outer { float: left; padding: 0 1em; margin: 1em; border: 1px solid silver; }
+
+.outer div { font-family: monospace; line-height: 2; margin: 1em 0; border: 1px dotted silver; }
+
+.test20 div { width: 20ch; }
+.test27 div { width: 27ch; }
+.test30 div { width: 30ch; }
+
+b { color: blue; border-left: 2px solid red; border-right: 2px solid green; }
+
+.test::before,
+.test::after,
+.before,
+.after { position: absolute; }
+
+.test::before { content: ""; }
+.test::after { content: ""; }
+</style>
+
+<div>Test passes if all the examples in each group render the same:</div>
+
+<div class="outer test30">
+ <!-- Using ::before and ::after to insert abs-pos elements with empty content: -->
+ <div>
+ Preceding text <b class=test>target element</b> following text.
+ </div>
+ <!-- With explicit spans just inside the target element: -->
+ <div>
+ Preceding text <b><span class=before></span>target element<span class=after></span></b> following text.
+ </div>
+ <!-- With explicit spans just outside the target element: -->
+ <div>
+ Preceding text <span class=before></span><b>target element</b><span class=after></span> following text.
+ </div>
+ <!-- With explicit line breaks: -->
+ <div>
+ Preceding text <b>target element</b><br>following text.
+ </div>
+</div>
+
+<div class="outer test27">
+ <div>
+ Preceding text <b class=test>target element</b> following text.
+ </div>
+ <div>
+ Preceding text <b><span class=before></span>target element<span class=after></span></b> following text.
+ </div>
+ <div>
+ Preceding text <span class=before></span><b>target element</b><span class=after></span> following text.
+ </div>
+ <div>
+ Preceding text <b>target<br>element</b> following text.
+ </div>
+</div>
+
+<div class="outer test20">
+ <div>
+ Preceding text <b class=test>target element</b> following text.
+ </div>
+ <div>
+ Preceding text <b><span class=before></span>target element<span class=after></span></b> following text.
+ </div>
+ <div>
+ Preceding text <span class=before></span><b>target element</b><span class=after></span> following text.
+ </div>
+ <div>
+ Preceding text<br><b>target element</b><br>following text.
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-019.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-019.html
new file mode 100644
index 0000000000..e755eff381
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-019.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text — out-of-flow element adjacent to a potential line-break</title>
+<meta name=assert content="The anchor of an out-of-flow should not migrate across a soft line break">
+<!-- NOTE: I'm not sure the spec explicitly addresses this exact point, but it seems like a clear
+ bug in Firefox, hence this test (which passes as expected in Chrome and Safari). -->
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-019-ref.html">
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.outer { float: left; padding: 0 1em; margin: 1em; border: 1px solid silver; }
+
+.outer div { font-family: monospace; line-height: 2; margin: 1em 0; border: 1px dotted silver; }
+
+.test20 div { width: 20ch; }
+.test27 div { width: 27ch; }
+.test30 div { width: 30ch; }
+
+b { color: blue; border-left: 2px solid red; border-right: 2px solid green; }
+
+/* adjust for the width of the target element's border */
+div > .before { margin-left: 2px; }
+div > .after { margin-left: -2px; }
+
+.test::before,
+.test::after,
+.before,
+.after { position: absolute; font-size: 0.5em; }
+
+.test::before { content: "before"; }
+.test::after { content: "after"; }
+
+.before,
+.test::before { color: red; font-weight: normal; }
+.after,
+.test::after { color: green; font-weight: normal; }
+</style>
+
+<div>Test passes if all the examples in each group render the same:</div>
+
+<div class="outer test30">
+ <!-- Using ::before and ::after to insert abs-pos elements with non-empty content: -->
+ <div>
+ Preceding text <b class=test>target element</b> following text.
+ </div>
+ <!-- With explicit spans just inside the target element: -->
+ <div>
+ Preceding text <b><span class=before>before</span>target element<span class=after>after</span></b> following text.
+ </div>
+ <!-- With explicit spans just outside the target element: -->
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span> following text.
+ </div>
+ <!-- With explicit line breaks: -->
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+</div>
+
+<div class="outer test27">
+ <div>
+ Preceding text <b class=test>target element</b> following text.
+ </div>
+ <div>
+ Preceding text <b><span class=before>before</span>target element<span class=after>after</span></b> following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span> following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target<br>element</b><span class=after>after</span> following text.
+ </div>
+</div>
+
+<div class="outer test20">
+ <div>
+ Preceding text <b class=test>target element</b> following text.
+ </div>
+ <div>
+ Preceding text <b><span class=before>before</span>target element<span class=after>after</span></b> following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span> following text.
+ </div>
+ <div>
+ Preceding text<br><span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-020.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-020.html
new file mode 100644
index 0000000000..7c8d0f119e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-020.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: Simple line breaking test</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://crbug.com/1002442">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+}
+p {
+ width: 460px;
+}
+</style>
+<body>
+<p>
+abschließend geklärt. Allerdings scheint eine gewisse <b>genetische Veranlagung</b> eine
+Zahl der Typ-1-Diabetiker gerade unter Kleinkindern stetig wächst. Daher rücken auch <b>Virusinfektionen</b> in den Fokus
+</p>
+<script>
+test(() => {
+ for (let e of document.getElementsByTagName('b')) {
+ let bounds = e.getBoundingClientRect();
+ assert_less_than_equal(bounds.x + bounds.width, 460);
+ }
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-021.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-021.html
new file mode 100644
index 0000000000..b3b907410e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-021.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: Simple line breaking test</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="match" href="reference/line-breaking-021-ref.html">
+<meta name=assert content="Line breaking behavior defined for the ZWJ line-breaking classes in [UAX14] must be honored.">
+<style>
+div {
+ width: 0;
+}
+</style>
+
+<p>This test passes if there the text below is on a single line.
+
+<div>じ&#x200D;字&#x200D;자&#x200D;😂&#x200D;😭</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-022.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-022.html
new file mode 100644
index 0000000000..3591f46534
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-022.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: Simple line breaking test</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="match" href="reference/line-reabking-022.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
+<meta name="flags" content="ahem" >
+<meta name=assert content="Any Unicode character with the the BK and NL line breaking class must be treated as forced line breaks">
+<style>
+div {
+ font: 25px/1 Ahem;
+ color: transparent; /* No interested in the rendering of the characters with BK an ML line breaking classes themselves, merely in their effects on line breaking. */
+}
+span { color: green; }
+.red {
+ z-index: -1;
+ position: absolute;
+ width: 1em;
+ height: 6em;
+ background: red;
+}
+</style>
+
+<p>This test passes if there is no red.
+
+<div class=red></div>
+
+<div>
+<span>1</span>&#x000C;<span>2</span>&#x000B;<span>3</span>&#x2028;<span>4</span>&#x2029;<span>5</span>&#x0085;<span>6</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-023.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-023.html
new file mode 100644
index 0000000000..b8e957dc1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-023.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Javanese)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="mismatch" href="reference/line-breaking-023-ref.html">
+<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+section {
+ width: max-content;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<section>
+<div class=test lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
+
+<div class=ref lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-024.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-024.html
new file mode 100644
index 0000000000..14b8c9b93c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-024.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Khmer)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="mismatch" href="reference/line-breaking-024-ref.html">
+<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
+
+<div class=ref lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-025.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-025.html
new file mode 100644
index 0000000000..57c9ee4d3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-025.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Lao)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="mismatch" href="reference/line-breaking-025-ref.html">
+<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
+
+<div class=ref lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-026.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-026.html
new file mode 100644
index 0000000000..fdabe9fa07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-026.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Thai)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="mismatch" href="reference/line-breaking-026-ref.html">
+<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
+
+<div class=ref lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-027.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-027.html
new file mode 100644
index 0000000000..de6ee4cbde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-027.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Burmese)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="mismatch" href="reference/line-breaking-027-ref.html">
+<meta name=assert content="In languages requiring lexical or orthographic analysis for line breaking, some form of fallback line breaking must occur even if the UA doesn't know how to perform it correctly. Overflowing is not allowed.">
+<style>
+div {
+ border-right: 5em solid;
+ width: 7em;
+}
+.test {
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
+
+<div class=ref lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-001.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-001.html
new file mode 100644
index 0000000000..e071378c95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-001.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NBSP before atomic inline</title>
+<meta name=assert content="There's a soft wrap opportunity between an atomic inline and a preceeding NBSP">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ color: green;
+ width: 100px;
+ height: 100px;
+ background: red;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>AB&nbsp;<span>CD</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-002.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-002.html
new file mode 100644
index 0000000000..cfa4408a43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-002.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NBSP after atomic inline</title>
+<meta name=assert content="There's a soft wrap opportunity between an atomic inline and a following NBSP">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.red {
+ width: 100px;
+ height: 100px;
+ background: red;
+ position: absolute;
+ z-index: -1;
+}
+
+.test {
+ font: 50px/1 Ahem;
+ color: green;
+ width: 100px;
+ height: 100px;
+ margin-left: -50px;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div class=red></div>
+<div class=test><span>&nbsp;AB</span>&nbsp;CD</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-003.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-003.html
new file mode 100644
index 0000000000..dea68b0f87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-003.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE after atomic inline</title>
+<meta name=assert content="There is a soft wrap opportunity between an atomic inline and a preceeding NARROW NO-BREAK SPACE">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ color: green;
+ width: 100px;
+ height: 100px;
+ background: red;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>AB&#8239;<span>CD</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-004.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-004.html
new file mode 100644
index 0000000000..c10492f5c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-004.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE before atomic inline</title>
+<meta name=assert content="There is a soft wrap opportunity between an atomic inline and a following NARROW NO-BREAK SPACE">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-atomic-004-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.red {
+ font: 50px/1 Ahem;
+ position: absolute;
+ z-index: -1;
+ color: red;
+}
+
+.test {
+ font: 50px/1 Ahem;
+ color: green;
+ width: 100px;
+ height: 100px;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div class=red>&#8239;AB<br>&#8239;CD</div>
+<div class=test><span>&#8239;AB</span>&#8239;CD</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-005.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-005.html
new file mode 100644
index 0000000000..9901b013bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-005.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER after atomic inline</title>
+<meta name=assert content="There is a soft wrap opportunity between an atomic inline and a following WORD JOINER">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-atomic-005-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.red {
+ font: 50px/1 Ahem;
+ position: absolute;
+ z-index: -1;
+ color: red;
+}
+
+.test {
+ font: 50px/1 Ahem;
+ color: green;
+ width: 100px;
+ height: 100px;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div class=red>&#8288;AB<br>&#8288;CD</div>
+<div class=test><span>&#8288;AB</span>&#8288;CD</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-006.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-006.html
new file mode 100644
index 0000000000..bd3573bb7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-006.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER before atomic inline</title>
+<meta name=assert content="There is a soft wrap opportunity between an atomic inline and a preceeding WORD JOINER">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ color: green;
+ width: 100px;
+ height: 100px;
+ background: red;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>AB&#8288;<span>CD</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-007.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-007.html
new file mode 100644
index 0000000000..77da8d226d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-007.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — atomic inline line breaks before and after</title>
+<meta name=assert content="There's a soft wrap opportunity before and after an atomic inline">
+<link rel=match href="reference/line-breaking-atomic-007-ref.html">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ width: 40px;
+ height: 140px;
+ background: red;
+ color: green;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and <strong>no red</strong>.
+
+<div>A<span>B</span>C</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-008.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-008.html
new file mode 100644
index 0000000000..05063f8413
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-008.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — atomic inline line not affected by keep-all</title>
+<meta name=assert content="There is a soft wrap opportunity before and after an atomic inline even when word-break is keep-all">
+<link rel=match href="reference/line-breaking-atomic-008-ref.html"
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+}
+.red {
+ position: absolute;
+ z-index: -1;
+ color: red;
+}
+.test {
+ width: 0;
+ color: green;
+ word-break: keep-all;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and <strong>no red</strong>.
+
+<div class=red>A<br>B<br>C</div>
+<div class=test>A<span>B</span>C</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-009.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-009.html
new file mode 100644
index 0000000000..b14a27157c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-009.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — atomic inline and punctuation</title>
+<meta name=assert content="There's a soft wrap opportunity between an atomic inline following punctuation">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-atomic-009-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ font-size: 4em;
+ width: 0;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there the “:” is under the “A” in the text below.
+
+<div><span>A</span>:</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-nowrap-001.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-nowrap-001.html
new file mode 100644
index 0000000000..1e3b9edb1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-nowrap-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Check atomic inline+NBSP quirk does not apply if nowrap</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel="help" href="https://crbug.com/1002442">
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+ white-space: nowrap;
+ font-size: 10px;
+ line-height: 1;
+ width: 5ch;
+}
+.inline-block {
+ display: inline-block;
+ width: 3ch;
+ height: 1em;
+}
+img {
+ width: 3ch;
+ height: 1em;
+}
+</style>
+<body>
+ <div>000<span class="inline-block"></span>&nbsp;111</div>
+ <div>000<img>&nbsp;111</div>
+ <div>000&nbsp;<span class="inline-block"></span>111</div>
+ <div>000&nbsp;<img>111</div>
+<script>
+(function () {
+ for (let e of document.getElementsByTagName('div')) {
+ test(() => {
+ let height = e.offsetHeight;
+ assert_equals(Math.round(height / 10), 1);
+ });
+ }
+})();
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-001.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-001.html
new file mode 100644
index 0000000000..5d34a05692
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-001.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundary with ideographic caracters 1</title>
+<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters, the white-space property on nearest common ancestor of the two characters controls breaking.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-ic-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<style>
+div {
+ color: green;
+ background: green;
+ line-height: 1em;
+ width: 1em;
+ white-space: normal;
+ font-size: 20px;
+}
+span {
+ white-space: pre;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ background: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>口</span>口</div>
+ <div class=fail>口</div>
+ <div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-002.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-002.html
new file mode 100644
index 0000000000..83f1a200eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-002.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundary with ideographic caracters 2</title>
+<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters, the white-space property on nearest common ancestor of the two characters controls breaking.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-ic-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<style>
+div {
+ color: green;
+ background: green;
+ line-height: 1em;
+ width: 1em;
+ white-space: normal;
+ font-size: 20px;
+}
+span {
+ white-space: pre;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ background: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div>口<span>口</span></div>
+ <div class=fail>口</div>
+ <div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-003.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-003.html
new file mode 100644
index 0000000000..8ba5e00411
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-ic-003.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking at element boundary with ideographic caracters 1</title>
+<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters, the white-space property on nearest common ancestor of the two characters controls breaking.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-ic-001-ref.html">
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<style>
+div {
+ color: green;
+ background: green;
+ line-height: 1em;
+ width: 1em;
+ white-space: normal;
+ font-size: 20px;
+}
+span {
+ white-space: pre;
+}
+.container {
+ position: relative;
+}
+.fail {
+ color: red;
+ background: red;
+ position: absolute;
+ left: 0;
+ top: 1em;
+ z-index: -1;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div class=container>
+ <div><span>口</span><span>口</span></div>
+ <div class=fail>口</div>
+ <div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-001.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-001.html
new file mode 100644
index 0000000000..b992808475
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-001.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NBSP and replaced element</title>
+<meta name=assert content="There's a soft wrap opportunity between replaced elements and adjacent NBSP.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-replaced-001-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.red {
+ position: absolute;
+ z-index: -1;
+}
+.test {
+ width: 0;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50><br>&nbsp;<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50>&nbsp;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-002.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-002.html
new file mode 100644
index 0000000000..8f3d229dd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-002.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE and replaced element</title>
+<meta name=assert content="There is a soft wrap opportunity between replaced elements and adjacent NARROW NO-BREAK SPACE">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-replaced-002-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.red {
+ position: absolute;
+ z-index: -1;
+}
+.test {
+ width: 0;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50><br>&#8239;<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50>&#8239;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-003.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-003.html
new file mode 100644
index 0000000000..aae116c0f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-003.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER and replaced element</title>
+<meta name=assert content="There is a soft wrap opportunity between replaced elements and adjacent WORD JOINER">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-replaced-003-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.red {
+ position: absolute;
+ z-index: -1;
+}
+.test {
+ width: 0;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50><br>&#8288;<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50><br>&#8288;<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-004.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-004.html
new file mode 100644
index 0000000000..0a5b66d68b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-004.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — replaced elements line break before and after</title>
+<meta name=assert content="There's a soft wrap opportunity before and after a replaced element">
+<link rel=match href="reference/line-breaking-replaced-004-ref.html">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ width: 0;
+}
+</style>
+
+<p>Test passes if “B” is below “A”.
+
+<div>A<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-005.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-005.html
new file mode 100644
index 0000000000..7e5dc135ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-005.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — replaced elements line break before and after, even with keep-all</title>
+<meta name=assert content="There is a soft wrap opportunity before and after a replaced element even with word-break: keep-all">
+<link rel=match href="reference/line-breaking-replaced-004-ref.html">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ width: 0;
+ word-break: keep-all;
+}
+</style>
+
+<p>Test passes if “B” is below “A”.
+
+<div>A<br><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><br>B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-006.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-006.html
new file mode 100644
index 0000000000..492609bcdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-006.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — replaced element and punctuation</title>
+<meta name=assert content="There's a soft wrap opportunity between a replaced element punctuation">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-replaced-006-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+}
+.red {
+ position: absolute;
+ z-index: -1;
+ color: red;
+ white-space: pre;
+}
+.test {
+ color: green;
+ width: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div class=red><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width=50><br>:</div>
+<div class=test><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width=50>:</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-001-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-001-ref.html
new file mode 100644
index 0000000000..323a120592
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-001-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Reference File for line breaking tests</title>
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ line-height: 1em;
+ font-family: Ahem;
+ font-size: 20px;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div>X<br>X</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-012-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-012-ref.html
new file mode 100644
index 0000000000..2d55081f48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-012-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Reference File for line breaking tests</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ color:green;
+ line-height: 1em;
+ font-family: Ahem;
+ font-size: 20px;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div>XX</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-013-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-013-ref.html
new file mode 100644
index 0000000000..816015adea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-013-ref.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — reference file for emoji sequence line-breaking test</title>
+<link rel=author title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+ line-height: 1em;
+ font-size: 30px;
+}
+.container {
+ position: relative;
+ margin: .5em;
+}
+.ref {
+ background-color: white;
+ padding: .25em;
+}
+</style>
+<body>
+ <p>Each emoji should appear on a single line with no red background.</p>
+ <div class=container>
+ <div class=ref>&#x1F468;&#x200D;&#x1F4BB;</div><!-- man technologist -->
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F469;&#x200D;&#x1F467;&#x200D;&#x1F466;</div><!-- family with mother, son and daughter -->
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F939;&#x200D;&#x2640;&#xFE0F;</div><!-- woman juggling -->
+ </div>
+ <div class=container>
+ <div class=ref>&#x26F9;&#x1F3FF;&#x200D;&#x2640;&#xFE0F;</div><!-- woman basketball player (fitzpatrick type 6) -->
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F3F3;&#xFE0F;&#x200D;&#x1F308;</div><!-- rainbow flag -->
+ </div>
+ <div class=container>
+ <div class=ref>&#x1F3F4;&#xE0067;&#xE0062;&#xE0077;&#xE006C;&#xE0073;&#xE007F;</div><!-- flag of Wales -->
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-015-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-015-ref.html
new file mode 100644
index 0000000000..2837ce0cd7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-015-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — reference file for line-breaking test</title>
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.test { margin: 1em 0; line-height: 2; }
+</style>
+<body>
+The word "unbroken" below should <b>not</b> be broken:
+<div class="test">unbroken</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-016-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-016-ref.html
new file mode 100644
index 0000000000..e4d30e0115
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-016-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — reference file for line-breaking test</title>
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.test { margin: 1em 0; }
+.oof { position: absolute; left: 6em; }
+</style>
+<body>
+The word "unbroken" below should <b>not</b> be broken:
+<div class="test">unbroken<b class="oof">absolute</b></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-017-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-017-ref.html
new file mode 100644
index 0000000000..6f94b129d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-017-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — reference file for line-breaking test</title>
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.test { margin: 1em 0; }
+</style>
+<body>
+The word "unbroken" below should <b>not</b> be broken:
+<div class="test">unbroken<br><b>float</b></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-018-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-018-ref.html
new file mode 100644
index 0000000000..e40669b742
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-018-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text — reference</title>
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.outer { float: left; padding: 0 1em; margin: 1em; border: 1px solid silver; }
+
+.outer div { font-family: monospace; line-height: 2; margin: 1em 0; border: 1px dotted silver; }
+
+.test20 div { width: 20ch; }
+.test27 div { width: 27ch; }
+.test30 div { width: 30ch; }
+
+b { color: blue; border-left: 2px solid red; border-right: 2px solid green; }
+</style>
+
+<div>Test passes if all the examples in each group render the same:</div>
+
+<div class="outer test30">
+ <div>
+ Preceding text <b>target element</b><br>following text.
+ </div>
+ <div>
+ Preceding text <b>target element</b><br>following text.
+ </div>
+ <div>
+ Preceding text <b>target element</b><br>following text.
+ </div>
+ <div>
+ Preceding text <b>target element</b><br>following text.
+ </div>
+</div>
+
+<div class="outer test27">
+ <div>
+ Preceding text <b>target<br>element</b> following text.
+ </div>
+ <div>
+ Preceding text <b>target<br>element</b> following text.
+ </div>
+ <div>
+ Preceding text <b>target<br>element</b> following text.
+ </div>
+ <div>
+ Preceding text <b>target<br>element</b> following text.
+ </div>
+</div>
+
+<div class="outer test20">
+ <div>
+ Preceding text<br><b>target element</b><br>following text.
+ </div>
+ <div>
+ Preceding text<br><b>target element</b><br>following text.
+ </div>
+ <div>
+ Preceding text<br><b>target element</b><br>following text.
+ </div>
+ <div>
+ Preceding text<br><b>target element</b><br>following text.
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-019-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-019-ref.html
new file mode 100644
index 0000000000..4a7772aa29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-019-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text — reference</title>
+<link rel=author title="Jonathan Kew" href="jkew@mozilla.com">
+<style>
+.outer { float: left; padding: 0 1em; margin: 1em; border: 1px solid silver; }
+
+.outer div { font-family: monospace; line-height: 2; margin: 1em 0; border: 1px dotted silver; }
+
+.test20 div { width: 20ch; }
+.test27 div { width: 27ch; }
+.test30 div { width: 30ch; }
+
+b { color: blue; border-left: 2px solid red; border-right: 2px solid green; }
+
+/* adjust for the width of the target element's border */
+div > .before { margin-left: 2px; }
+div > .after { margin-left: -2px; }
+
+.before,
+.after { position: absolute; font-size: 0.5em; }
+
+.before { color: red; font-weight: normal; }
+.after { color: green; font-weight: normal; }
+</style>
+
+<div>Test passes if all the examples in each group render the same:</div>
+
+<div class="outer test30">
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+</div>
+
+<div class="outer test27">
+ <div>
+ Preceding text <span class=before>before</span><b>target<br>element</b><span class=after>after</span> following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target<br>element</b><span class=after>after</span> following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target<br>element</b><span class=after>after</span> following text.
+ </div>
+ <div>
+ Preceding text <span class=before>before</span><b>target<br>element</b><span class=after>after</span> following text.
+ </div>
+</div>
+
+<div class="outer test20">
+ <div>
+ Preceding text<br><span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+ <div>
+ Preceding text<br><span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+ <div>
+ Preceding text<br><span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+ <div>
+ Preceding text<br><span class=before>before</span><b>target element</b><span class=after>after</span><br>following text.
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-021-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-021-ref.html
new file mode 100644
index 0000000000..b1cc22bd20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-021-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+</style>
+
+<p>This test passes if there the text below is on a single line.
+
+<div>じ&#x200D;字&#x200D;자&#x200D;😂&#x200D;😭</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-023-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-023-ref.html
new file mode 100644
index 0000000000..ddf4974eb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-023-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Javanese)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ color: blue;
+ white-space: pre;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
+
+<div class=ref lang="jv-Java">꧋ꦱꦧꦼꦤ꧀ꦲꦸꦩꦠ꧀ꦩꦤꦸꦁꦱꦭꦲꦶꦂꦏꦤ꧀ꦛꦶꦲꦏ꧀ꦲꦏ꧀ꦏꦁꦥꦺꦴꦝꦺꦴꦭꦤ꧀ꦥꦶꦤꦱ꧀ꦛꦶꦭꦤ꧀ꦏꦤ꧀ꦛꦶꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦏꦧꦺꦧꦱ꧀ꦱꦤ꧀ꦲꦶꦁꦧꦏꦸꦤꦶꦁꦲꦁꦒꦼꦂꦲꦁꦒꦼꦂ</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-024-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-024-ref.html
new file mode 100644
index 0000000000..f96d3e05ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-024-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Khmer)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ white-space: pre;
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
+
+<div class=ref lang="km">ការទទួលស្គាល់សេចក្ដីថ្លៃថ្នូរជាប់ពីកំណើត</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-025-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-025-ref.html
new file mode 100644
index 0000000000..27a02910e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-025-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Lao)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ white-space: pre;
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+<div class=test lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
+
+<div class=ref lang="lo">ການຮັບຮູ້ກຽດຕິສັກອັນມີປະຈຳຢູ່ຕົວບຸກຄົນໃນວົງສະກຸນຂອງມະນຸດທຸກໆຄົນ</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-026-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-026-ref.html
new file mode 100644
index 0000000000..7c1656ea59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-026-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Thai)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ border-right: 6em solid;
+ width: 6em;
+}
+.test {
+ white-space: pre;
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
+
+<div class=ref lang="th">มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรีและสิทธิ</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-027-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-027-ref.html
new file mode 100644
index 0000000000..fad3f46f1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-027-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: fallback line breaking (Burmese)</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ border-right: 5em solid;
+ width: 7em;
+}
+.test {
+ white-space: pre;
+ color: blue;
+}
+.ref {
+ white-space: pre;
+ color: orange;
+}
+</style>
+
+<p>This test passes if the <strong>blue text wraps</strong> into more that one line, making it <strong>different</strong> from the orange one.
+
+
+<div class=test lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
+
+<div class=ref lang="my">အပြည်ပြည်ဆိုင်ရာလူ့အခွင့်ရေးကြေညာစာတမ်းကို</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-004-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-004-ref.html
new file mode 100644
index 0000000000..022004bfc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-004-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ position: absolute;
+ z-index: -1;
+ color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>&#8239;AB<br>&#8239;CD</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html
new file mode 100644
index 0000000000..bd88329ad0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ position: absolute;
+ z-index: -1;
+ color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>&#8288;AB<br>&#8288;CD</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html
new file mode 100644
index 0000000000..86bee40197
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ color: green;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and <strong>no red</strong>.
+
+<div>A<br>B<br>C</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html
new file mode 100644
index 0000000000..86bee40197
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ color: green;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and <strong>no red</strong>.
+
+<div>A<br>B<br>C</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-009-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-009-ref.html
new file mode 100644
index 0000000000..1300284c46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-atomic-009-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ font-size: 4em;
+}
+</style>
+
+<p>Test passes if there the “:” is under the “A” in the text below.
+
+<div>A<br>:</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-ic-001-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-ic-001-ref.html
new file mode 100644
index 0000000000..421002818f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-ic-001-ref.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Reference File for line breaking tests using ideographic caracters</title>
+<link rel=author title="Florian Rivoal" href="http://florian.rivoal.net">
+<!--
+ As 口 is as a CJK ideograph, its advance is expected to be 1em,
+ and as both background and color are green
+ this file should typically render identically to line-breaking-001-ref.
+ However, depending on the particular font available,
+ the glyph could be missing or sized differently.
+
+ Also, there may be and anti-aliasing / font rendering differences between
+ a 1em × 1em green background (this file)
+ and a 1em × 1em green glyph from the Ahem font (line-breaking-001-ref).
+
+ Therefore, as both files are only likely, not certain, to render identically,
+ we need both.
+-->
+<style>
+div {
+ color: green;
+ background :green;
+ line-height: 1em;
+ width: 1em;
+ font-size: 20px;
+}
+</style>
+<body>
+ <p>There should be a green rectangle and no red.</p>
+ <div>口<br>口</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-001-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-001-ref.html
new file mode 100644
index 0000000000..330c55e485
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-001-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if there is no red.
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50><br>&nbsp;<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html
new file mode 100644
index 0000000000..ae6f20488e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if there is no red.
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50><br>&#8239;<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-003-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-003-ref.html
new file mode 100644
index 0000000000..570f005418
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-003-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if there is no red.
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50><br>&#8288;<br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-004-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-004-ref.html
new file mode 100644
index 0000000000..c8913bdc59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-004-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if “B” is below “A”.
+
+<div>A<br><br>B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-006-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-006-ref.html
new file mode 100644
index 0000000000..59d552041f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-006-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font: 50px/1 Ahem;
+ color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width=50><br>:</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/reference/line-reabking-022.html b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-reabking-022.html
new file mode 100644
index 0000000000..95c86091cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-reabking-022.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: Simple line breaking test</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
+<style>
+div {
+ font: 25px/1 Ahem;
+ width: 1em;
+ height: 6em;
+ background: green;
+}
+</style>
+
+<p>This test passes if there is no red.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-1.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-1.html
new file mode 100644
index 0000000000..7c2b820bee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-removable-ref.html">
+<meta name="assert" content="Test checks that a collapsible segment break should be removed correctly,
+if the character immediately before/after the segment break is the zero-width space character (U+200B),
+or both the character before/after the segment break is F, W, or H (not A), and neither side is Hangul.">
+<style> p { line-height: 1; font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>no</b> white space between 2nd and 3rd CJK character.
+<!--Some[LF]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x000a;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][LF]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x000a;&#x4e2d;&#x6587;</p>
+<!--Some[LF][ZWSP]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x000a;&#x200b;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][LF]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x000a;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-2.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-2.html
new file mode 100644
index 0000000000..47bbaddfef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-removable-ref.html">
+<meta name="assert" content="Test checks that multiple segment breaks should be removed correctly,
+if the character immediately before/after the segment breaks is the zero-width space character (U+200B),
+or both the character before/after the segment breaks is F, W, or H (not A), and neither side is Hangul.">
+<style> p { line-height: 1; font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>no</b> white space between 2nd and 3rd CJK character.
+<!--Some[LF][LF][LF]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x000a;&#x000a;&#x000a;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][LF][LF][LF]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x000a;&#x000a;&#x000a;&#x4e2d;&#x6587;</p>
+<!--Some[LF][LF][LF][ZWSP]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x000a;&#x000a;&#x000a;&#x200b;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][LF][LF][LF]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x000a;&#x000a;&#x000a;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-3.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-3.html
new file mode 100644
index 0000000000..fd0ff31607
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-3.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-removable-ref.html">
+<meta name="assert" content="Test checks that a sequence which consists of a collapsible segment break
+surrounded by multiple white spaces should be removed correctly,
+if the character immediately before/after the sequence is the zero-width space character (U+200B),
+or both the character before/after the sequence is F, W, or H (not A), and neither side is Hangul.">
+<style> p { line-height: 1; font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>no</b> white space between 2nd and 3rd CJK character.
+<!--Some[WS][WS][LF][WS][WS]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x0020;&#x0020;&#x000a;&#x0020;&#x0020;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][WS][WS][LF][WS][WS]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x0020;&#x0020;&#x000a;&#x0020;&#x0020;&#x4e2d;&#x6587;</p>
+<!--Some[WS][WS][LF][WS][WS][ZWSP]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x0020;&#x0020;&#x000a;&#x0020;&#x0020;&#x200b;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][WS][WS][LF][WS][WS]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x0020;&#x0020;&#x000a;&#x0020;&#x0020;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-4.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-4.html
new file mode 100644
index 0000000000..6fb51beeae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-4.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-removable-ref.html">
+<meta name="assert" content="Test checks that a sequence which consists of multiple collapsible
+segment breaks mixed with multiple white spaces should be removed correctly,
+if the character immediately before/after the sequence is the zero-width space character (U+200B),
+or both the character before/after the sequence is F, W, or H (not A), and neither side is Hangul.">
+<style> p { line-height: 1; font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>no</b> white space between 2nd and 3rd CJK character.
+<!--Some[WS][LF][WS][LF][WS][LF][WS]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][WS][LF][WS][LF][WS][LF][WS]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x4e2d;&#x6587;</p>
+<!--Some[WS][LF][WS][LF][WS][LF][WS][ZWSP]Chinese-->
+<p>&#x4e00;&#x4e9b;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x200b;&#x4e2d;&#x6587;</p>
+<!--Some[ZWSP][WS][LF][WS][LF][WS][LF][WS]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x200b;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-ref.html
new file mode 100644
index 0000000000..0fa64d71df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-removable-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { line-height: 1; font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>no</b> white space between 2nd and 3rd CJK character.
+<!--Some Chinese-->
+<p>&#x4e00;&#x4e9b;&#x4e2d;&#x6587;</p>
+<!--Some Chinese-->
+<p>&#x4e00;&#x4e9b;&#x4e2d;&#x6587;</p>
+<!--Some Chinese-->
+<p>&#x4e00;&#x4e9b;&#x4e2d;&#x6587;</p>
+<!--Some Hangul-->
+<p>&#x4e00;&#x4e9b;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001-ref.html
new file mode 100644
index 0000000000..62bc0f6990
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>FULLWIDTHFULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001.html
new file mode 100644
index 0000000000..7c80115ae4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Full-width (F)/East Asian Full-width (F) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-001-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>FULLWIDTH&#x000a;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002-ref.html
new file mode 100644
index 0000000000..1827ec05b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>FULLWIDTHテスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002.html
new file mode 100644
index 0000000000..efd26a55cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-002.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Full-width (F)/East Asian Half-width (H) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-002-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>FULLWIDTH&#x000a;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003-ref.html
new file mode 100644
index 0000000000..12df12e09b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>FULLWIDTH測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003.html
new file mode 100644
index 0000000000..2461cc9cf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-003.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Full-width (F)/East Asian Wide (W) except Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-003-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>FULLWIDTH&#x000a;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004-ref.html
new file mode 100644
index 0000000000..1c218c2f61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x0020;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004.html
new file mode 100644
index 0000000000..26a5986baf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-004.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Full-width (F)/East Asian Narrow (Na) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-004-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x000a;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005-ref.html
new file mode 100644
index 0000000000..d51e638a31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x0020;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005.html
new file mode 100644
index 0000000000..41de8899f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-005.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Full-width (F)/East Asian Ambiguous (A) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-005-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x000a;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006-ref.html
new file mode 100644
index 0000000000..c07f3c5f96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x0020;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006.html
new file mode 100644
index 0000000000..83eebb0521
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-006.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Full-width (F)/Not East Asian (Neutral) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-006-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x000a;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007-ref.html
new file mode 100644
index 0000000000..602e9c151c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x0020;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007.html
new file mode 100644
index 0000000000..46c27e6b17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-007.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Full-width (F)/Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-007-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>FULLWIDTH&#x000a;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008-ref.html
new file mode 100644
index 0000000000..a5e36f8d70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>テストFULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008.html
new file mode 100644
index 0000000000..756422f7fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-008.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Half-width (H)/East Asian Full-width (F) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-008-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>テスト&#x000a;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009-ref.html
new file mode 100644
index 0000000000..94c5f29f89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>テストテスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009.html
new file mode 100644
index 0000000000..8d41c8477d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-009.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Half-width (H)/East Asian Half-width (H) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-009-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>テスト&#x000a;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010-ref.html
new file mode 100644
index 0000000000..1e8296b319
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>テスト測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010.html
new file mode 100644
index 0000000000..24504d3b03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-010.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Half-width (H)/East Asian Wide (W) except Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-010-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>テスト&#x000a;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011-ref.html
new file mode 100644
index 0000000000..394acf0b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x0020;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011.html
new file mode 100644
index 0000000000..017801fd0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-011.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Half-width (H)/East Asian Narrow (Na) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-011-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x000a;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012-ref.html
new file mode 100644
index 0000000000..ef2030a5cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x0020;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012.html
new file mode 100644
index 0000000000..22b012f3f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-012.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Half-width (H)/East Asian Ambiguous (A) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-012-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x000a;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013-ref.html
new file mode 100644
index 0000000000..4b71f6f1f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x0020;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013.html
new file mode 100644
index 0000000000..74f5f4dd4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-013.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Half-width (H)/Not East Asian (Neutral) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-013-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x000a;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014-ref.html
new file mode 100644
index 0000000000..6a92922f48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x0020;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014.html
new file mode 100644
index 0000000000..693763a9c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-014.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Half-width (H)/Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-014-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>テスト&#x000a;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015-ref.html
new file mode 100644
index 0000000000..53d4d36765
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>測試FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015.html
new file mode 100644
index 0000000000..c063d9f231
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-015.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Wide (W) except Hangul/East Asian Full-width (F) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-015-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>測試&#x000a;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016-ref.html
new file mode 100644
index 0000000000..705ceddcc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>測試テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016.html
new file mode 100644
index 0000000000..f3cc8f6bf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-016.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Wide (W) except Hangul/East Asian Half-width (H) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-016-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>測試&#x000a;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017-ref.html
new file mode 100644
index 0000000000..fd04992ac5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>測試測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017.html
new file mode 100644
index 0000000000..fe85a65e4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-017.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Wide (W) except Hangul/East Asian Wide (W) except Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-017-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>測試&#x000a;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018-ref.html
new file mode 100644
index 0000000000..d42603b9a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x0020;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018.html
new file mode 100644
index 0000000000..fa4d5515b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-018.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Wide (W) except Hangul/East Asian Narrow (Na) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-018-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x000a;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019-ref.html
new file mode 100644
index 0000000000..9e499adb01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x0020;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019.html
new file mode 100644
index 0000000000..a442ca7cc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-019.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Wide (W) except Hangul/East Asian Ambiguous (A) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-019-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x000a;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020-ref.html
new file mode 100644
index 0000000000..4ed13984fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x0020;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020.html
new file mode 100644
index 0000000000..6e25a4523d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-020.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Wide (W) except Hangul/Not East Asian (Neutral) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-020-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x000a;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021-ref.html
new file mode 100644
index 0000000000..13a8d12c65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x0020;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021.html
new file mode 100644
index 0000000000..db373d6b3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-021.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Wide (W) except Hangul/Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-021-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>測試&#x000a;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022-ref.html
new file mode 100644
index 0000000000..58c224e3f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x0020;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022.html
new file mode 100644
index 0000000000..f13b581f65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-022.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Narrow (Na)/East Asian Full-width (F) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-022-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x000a;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023-ref.html
new file mode 100644
index 0000000000..12f4df127b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x0020;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023.html
new file mode 100644
index 0000000000..423a4ec210
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-023.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Narrow (Na)/East Asian Half-width (H) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-023-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x000a;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024-ref.html
new file mode 100644
index 0000000000..18e2af4f5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x0020;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024.html
new file mode 100644
index 0000000000..d49a170160
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-024.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Narrow (Na)/East Asian Wide (W) except Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-024-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x000a;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025-ref.html
new file mode 100644
index 0000000000..384bcaf1ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x0020;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025.html
new file mode 100644
index 0000000000..36be6391c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-025.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Narrow (Na)/East Asian Narrow (Na) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-025-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x000a;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026-ref.html
new file mode 100644
index 0000000000..56ae5a0a53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x0020;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026.html
new file mode 100644
index 0000000000..56dddce491
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-026.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Narrow (Na)/East Asian Ambiguous (A) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-026-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x000a;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027-ref.html
new file mode 100644
index 0000000000..b5fb675abe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x0020;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027.html
new file mode 100644
index 0000000000..c0d24e11a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-027.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Narrow (Na)/Not East Asian (Neutral) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-027-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x000a;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028-ref.html
new file mode 100644
index 0000000000..dbcca9389a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x0020;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028.html
new file mode 100644
index 0000000000..4b9857b01e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-028.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Narrow (Na)/Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-028-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>narrow&#x000a;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029-ref.html
new file mode 100644
index 0000000000..1803b4e164
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x0020;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029.html
new file mode 100644
index 0000000000..4950374456
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-029.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Ambiguous (A)/East Asian Full-width (F) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-029-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x000a;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030-ref.html
new file mode 100644
index 0000000000..6fdfff16a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x0020;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030.html
new file mode 100644
index 0000000000..398117d22e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-030.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Ambiguous (A)/East Asian Half-width (H) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-030-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x000a;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031-ref.html
new file mode 100644
index 0000000000..3d14600e43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x0020;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031.html
new file mode 100644
index 0000000000..2ca442e6e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-031.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Ambiguous (A)/East Asian Wide (W) except Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-031-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x000a;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032-ref.html
new file mode 100644
index 0000000000..c2b8451c96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x0020;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032.html
new file mode 100644
index 0000000000..62fe0f26c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-032.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Ambiguous (A)/East Asian Narrow (Na) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-032-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x000a;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033-ref.html
new file mode 100644
index 0000000000..bbeeeabd5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x0020;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033.html
new file mode 100644
index 0000000000..4663e4aa00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-033.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Ambiguous (A)/East Asian Ambiguous (A) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-033-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x000a;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034-ref.html
new file mode 100644
index 0000000000..4949f59db2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x0020;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034.html
new file mode 100644
index 0000000000..3378077c53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-034.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Ambiguous (A)/Not East Asian (Neutral) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-034-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x000a;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035-ref.html
new file mode 100644
index 0000000000..0e64bb2c9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x0020;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035.html
new file mode 100644
index 0000000000..08b310bacb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-035.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with East Asian Ambiguous (A)/Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-035-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>■&#x000a;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036-ref.html
new file mode 100644
index 0000000000..1b9242d08f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x0020;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036.html
new file mode 100644
index 0000000000..5eef20dec6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-036.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Not East Asian (Neutral)/East Asian Full-width (F) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-036-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x000a;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037-ref.html
new file mode 100644
index 0000000000..d3205b4c3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x0020;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037.html
new file mode 100644
index 0000000000..2bd4ca1fee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-037.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Not East Asian (Neutral)/East Asian Half-width (H) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-037-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x000a;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038-ref.html
new file mode 100644
index 0000000000..0873382eff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x0020;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038.html
new file mode 100644
index 0000000000..57f78fecdc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-038.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Not East Asian (Neutral)/East Asian Wide (W) except Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-038-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x000a;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039-ref.html
new file mode 100644
index 0000000000..2a62fa149c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x0020;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039.html
new file mode 100644
index 0000000000..55e7cc208f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-039.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Not East Asian (Neutral)/East Asian Narrow (Na) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-039-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x000a;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040-ref.html
new file mode 100644
index 0000000000..9505af9af7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x0020;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040.html
new file mode 100644
index 0000000000..cb26c669bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-040.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Not East Asian (Neutral)/East Asian Ambiguous (A) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-040-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x000a;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041-ref.html
new file mode 100644
index 0000000000..f3d0918a41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x0020;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041.html
new file mode 100644
index 0000000000..62d29356cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-041.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Not East Asian (Neutral)/Not East Asian (Neutral) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-041-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x000a;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042-ref.html
new file mode 100644
index 0000000000..979ca514a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x0020;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042.html
new file mode 100644
index 0000000000..a067773171
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-042.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Not East Asian (Neutral)/Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-042-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>آزمون&#x000a;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043-ref.html
new file mode 100644
index 0000000000..2d467b0dfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x0020;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043.html
new file mode 100644
index 0000000000..de3f1941d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-043.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Hangul/East Asian Full-width (F) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-043-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x000a;FULLWIDTH</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044-ref.html
new file mode 100644
index 0000000000..89dcd61291
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x0020;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044.html
new file mode 100644
index 0000000000..9dafd2e757
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-044.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Hangul/East Asian Half-width (H) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-044-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x000a;テスト</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045-ref.html
new file mode 100644
index 0000000000..d788c276b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x0020;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045.html
new file mode 100644
index 0000000000..719dc917c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-045.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Hangul/East Asian Wide (W) except Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-045-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x000a;測試</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046-ref.html
new file mode 100644
index 0000000000..50b7733edc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x0020;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046.html
new file mode 100644
index 0000000000..8e04c8e00d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-046.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Hangul/East Asian Narrow (Na) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-046-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x000a;narrow</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047-ref.html
new file mode 100644
index 0000000000..a63575d11e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x0020;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047.html
new file mode 100644
index 0000000000..81b95a1a59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-047.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Hangul/East Asian Ambiguous (A) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-047-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x000a;■</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048-ref.html
new file mode 100644
index 0000000000..55bb19bbbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x0020;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048.html
new file mode 100644
index 0000000000..f578fa0145
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-048.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Hangul/Not East Asian (Neutral) in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-048-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x000a;آزمون</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049-ref.html
new file mode 100644
index 0000000000..77b1348f65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x0020;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049.html
new file mode 100644
index 0000000000..a55af42b45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-rules-049.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with Hangul/Hangul in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-049-ref.html">
+<style> p { font-family: ahem; } </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>테스트&#x000a;테스트</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-1.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-1.html
new file mode 100644
index 0000000000..4882f06c93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-unremovable-ref.html">
+<meta name="assert" content="Test checks that a collapsible segment break should be converted to a white space (U+0020),
+if both the character before/after the segment break is Hangul.">
+<style> p { font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>one</b> white space between 2nd and 3rd CJK character.
+<!--Some[LF]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x000a;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-2.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-2.html
new file mode 100644
index 0000000000..6627e0708e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-unremovable-ref.html">
+<meta name="assert" content="Test checks that multiple segment breaks should be converted to a white space (U+0020),
+if both the character before/after the segment breaks is Hangul.">
+<style> p { font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>one</b> white space between 2nd and 3rd CJK character.
+<!--Some[LF][LF][LF]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x000a;&#x000a;&#x000a;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-3.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-3.html
new file mode 100644
index 0000000000..e4b3ab9b73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-3.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-unremovable-ref.html">
+<meta name="assert" content="Test checks that a sequence which consists of a collapsible segment break
+surrounded by multiple white spaces should be converted to a white space (U+0020),
+if both the character before/after the sequence is Hangul.">
+<style> p { font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>one</b> white space between 2nd and 3rd CJK character.
+<!--Some[WS][WS][LF][WS][WS]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x0020;&#x0020;&#x000a;&#x0020;&#x0020;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-4.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-4.html
new file mode 100644
index 0000000000..e266f592fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-4.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-unremovable-ref.html">
+<meta name="assert" content="Test checks that a sequence which consists of multiple collapsible
+segment breaks mixed with multiple white spaces should be converted to a white space (U+0020),
+if both the character before/after the sequence is Hangul.">
+<style> p { font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>one</b> white space between 2nd and 3rd CJK character.
+<!--Some[WS][LF][WS][LF][WS][LF][WS]Hangul-->
+<p>&#x4e00;&#x4e9b;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#x000a;&#x0020;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-ref.html b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-ref.html
new file mode 100644
index 0000000000..a011229009
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/segment-break-transformation-unremovable-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 4.1.2. Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p { font-family: ahem; } </style>
+</head>
+<body>
+<div>Test passes if there is <b>one</b> white space between 2nd and 3rd CJK character.
+<!--Some Hangul-->
+<p>&#x4e00;&#x4e9b;&nbsp;&#xc5b8;&#xbb38;</p>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/tools/generate-segment-break-transformation-rules-tests.py b/testing/web-platform/tests/css/css-text/line-breaking/tools/generate-segment-break-transformation-rules-tests.py
new file mode 100644
index 0000000000..fc894161bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/tools/generate-segment-break-transformation-rules-tests.py
@@ -0,0 +1,109 @@
+#!/usr/bin/env python
+# - * - coding: UTF-8 - * -
+
+"""
+This script generates tests segment-break-transformation-rules-001 ~ 049 which
+cover all possible combinations of characters at two sides of segment breaks.
+More specifically, there are seven types of characters involve in these rules:
+
+1. East Asian Full-width (F)
+2. East Asian Half-width (H)
+3. East Asian Wide (W) except Hangul
+4. East Asian Narrow (Na)
+5. East Asian Ambiguous (A)
+6. Not East Asian (Neutral)
+7. Hangul
+
+So there are 49 different combinations. It outputs a list of all
+tests it generated in the format of Mozilla reftest.list to the stdout.
+"""
+
+from __future__ import unicode_literals, print_function, absolute_import
+
+TEST_FILE = 'segment-break-transformation-rules-{:03}.html'
+TEST_TEMPLATE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Test: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<meta name="assert" content="'segment-break-transformation-rules: with {prev}/{next} in front/back of the semgment break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="segment-break-transformation-rules-{index:03}-ref.html">
+<style> p {{ font-family: ahem; }} </style>
+<div>Pass if there is {expect} white space between the two strings below.
+<p>{prevchar}&#x000a;{nextchar}</p>
+</div>
+'''
+
+REF_FILE = 'segment-break-transformation-rules-{:03}-ref.html'
+REF_TEMPLATE_REMOVE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p {{ font-family: ahem; }} </style>
+<div>Pass if there is NO white space between the two strings below.
+<p>{0}{1}</p>
+</div>
+'''
+REF_TEMPLATE_KEEP = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Segment Break Transformation Rules</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style> p {{ font-family: ahem; }} </style>
+<div>Pass if there is ONE white space between the two strings below.
+<p>{0}{2}{1}</p>
+</div>
+'''
+
+CHAR_SET = [
+ ('East Asian Full-width (F)', 'FULLWIDTH'),
+ ('East Asian Half-width (H)', 'テスト'),
+ ('East Asian Wide (W) except Hangul', '測試'),
+ ('East Asian Narrow (Na)', 'narrow'),
+ ('East Asian Ambiguous (A)', '■'),
+ ('Not East Asian (Neutral)', 'آزمون'),
+ ('Hangul', '테스트'),
+ ]
+
+def write_file(filename, content):
+ with open(filename, 'wb') as f:
+ f.write(content.encode('UTF-8'))
+
+print("# START tests from {}".format(__file__))
+global idx
+idx = 0
+for i, (prevtype, prevchars) in enumerate(CHAR_SET):
+ for j, (nextype, nextchars) in enumerate(CHAR_SET):
+ idx += 1
+ reffilename = REF_FILE.format(idx)
+ testfilename = TEST_FILE.format(idx)
+ # According to CSS Text 3 - 4.1.2. Segment Break Transformation Rules,
+ # if the East Asian Width property of both the character before and
+ # after the segment break is F, W, or H (not A), and neither side is
+ # Hangul, then the segment break is removed. Otherwise, the segment
+ # break is converted to a space (U+0020).
+ if i < 3 and j < 3:
+ write_file(reffilename,
+ REF_TEMPLATE_REMOVE.format(prevchars, nextchars))
+ write_file(testfilename,
+ TEST_TEMPLATE.format(index=idx, prev=prevtype,
+ next=nextype,
+ prevchar=prevchars,
+ nextchar=nextchars,
+ expect='NO'))
+ else:
+ write_file(reffilename,
+ REF_TEMPLATE_KEEP.format(prevchars, nextchars, '&#x0020;'))
+ write_file(testfilename,
+ TEST_TEMPLATE.format(index=idx, prev=prevtype,
+ next=nextype,
+ prevchar=prevchars,
+ nextchar=nextchars,
+ expect='ONE'))
+ print("== {} {}".format(testfilename, reffilename))
+print("# END tests from {}".format(__file__))