summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-text
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-text')
-rw-r--r--testing/web-platform/tests/css/css-text/line-breaking/line-breaking-029.html46
-rw-r--r--testing/web-platform/tests/css/css-text/parsing/WEB_FEATURES.yml4
-rw-r--r--testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control-ref.html13
-rw-r--r--testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control.html16
-rw-r--r--testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br.html18
-rw-r--r--testing/web-platform/tests/css/css-text/text-spacing-trim/WEB_FEATURES.yml3
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html42
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html40
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html50
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html63
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html69
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html38
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html70
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html42
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html34
-rw-r--r--testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html35
17 files changed, 597 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-029.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-029.html
new file mode 100644
index 0000000000..c390d2272d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-029.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — line breaking around Break After and Exclamation</title>
+<meta name=assert content="When ‘white-space’ allows wrapping, line breaking behavior defined for IS and QU line-breaking classes in [UAX14] must be honored.">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-breaking">
+<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1880362">
+<link rel=author title="Makoto Kato" href="mailto:m_kato@ga2.so-net.ne.jp">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+.test > div {
+ font-family: monospace;
+ font-size: 25px;
+ width: 1ch;
+ line-height: 30px;
+}
+</style>
+<body>
+
+<div class="test">
+ <div id="nonbreakable1">1.&#x201D;</div>
+ <div id="nonbreakable2">a.&#x201D;</div>
+ <div id="nonbreakable3">1.&#x0022;</div>
+ <div id="nonbreakable4">a.&#x0022;</div>
+</div>
+
+<script>
+test(function() {
+ assert_true(document.getElementById('nonbreakable1').offsetHeight <= 35);
+}, "U+0x0031 (NU), U+0x002E (IS) and U+0x201D (QU)");
+test(function() {
+ assert_true(document.getElementById('nonbreakable2').offsetHeight <= 35);
+}, "U+0x0041 (AL), U+0x002E (IS) and U+0x201D (QU)");
+test(function() {
+ assert_true(document.getElementById('nonbreakable3').offsetHeight <= 35);
+}, "U+0x0031 (NU), U+0x002E (IS) and U+0x0022 (QU)");
+test(function() {
+ assert_true(document.getElementById('nonbreakable4').offsetHeight <= 35);
+}, "U+0x0041 (AL), U+0x002E (IS) and U+0x0022 (QU)");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-text/parsing/WEB_FEATURES.yml
new file mode 100644
index 0000000000..e06782e8f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/WEB_FEATURES.yml
@@ -0,0 +1,4 @@
+features:
+- name: text-spacing-trim
+ files:
+ - text-spacing-trim-*
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control-ref.html
new file mode 100644
index 0000000000..c30c5a0178
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ja">
+ <head>
+ <meta charset="utf-8">
+ <title>text-align: justify for a bidi control + a CJK ideograph</title>
+ <style>
+ p { text-align: justify; width: 3.9em; }
+ </style>
+ </head>
+ <body>
+ <p>東京都東京都東京都</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control.html
new file mode 100644
index 0000000000..934e947b75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-bidi-control.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ja">
+ <head>
+ <meta charset="utf-8">
+ <title>text-align: justify for a bidi control + a CJK ideograph</title>
+ <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+ <link rel="help" href="https://crbug.com/331680200">
+ <link rel="match" href="text-align-justify-bidi-control-ref.html">
+ <style>
+ p { text-align: justify; width: 3.9em; }
+ </style>
+ </head>
+ <body>
+ <p>東&#x2066;京都東京&#x2069;都東京都</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br-ref.html
new file mode 100644
index 0000000000..efe5481e82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ja">
+ <head>
+ <title>text-align-last: justify for &lt;br></title>
+ <meta charset="utf-8">
+ <style>
+ .left { float: left; display: inline-block; }
+ .right { float: right; display: inline-block; }
+ </style>
+ </head>
+ <body>
+ <p><span class="left">東<br>京</span><span class="right">京<br>城</span></p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br.html
new file mode 100644
index 0000000000..5685da088b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-br.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ja">
+ <head>
+ <meta charset="utf-8">
+ <title>text-align-last: justify for &lt;br></title>
+ <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+ <link rel="help" href="https://crbug.com/331729346">
+ <link rel="match" href="text-align-last-justify-br-ref.html">
+ <style>
+ p {
+ text-align-last: justify;
+ }
+ </style>
+ </head>
+ <body>
+ <p>東京<br>京城</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-text/text-spacing-trim/WEB_FEATURES.yml
new file mode 100644
index 0000000000..329fa18e2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: text-spacing-trim
+ files: "**"
diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html
new file mode 100644
index 0000000000..17e778165d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-001.tentative.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Level 3: glyphs can only hang at the edge of a line</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="assert" content="Glyphs can't hang at the end of the line if there are non-hanging glyphs after them in the line">
+
+<style>
+ div {
+ font: 25px/1 Ahem;
+ width: 5ch;
+ height: 4ch;
+ margin-left: -1ch;
+ background:
+ linear-gradient(red, red) 1ch 0 / 4ch 1ch no-repeat,
+ linear-gradient(green, green) 1ch 0 / 4ch 4ch no-repeat;
+
+ text-align: right;
+ white-space: normal;
+ }
+ span {
+ color: transparent;
+ background: green;
+ }
+ .break-spaces {
+ white-space: break-spaces;
+ }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div><span>X&#x3000;&#x3000;</span><span class="break-spaces"> </span></div>
+
+<!--
+ With white-space: normal, ideographic spaces (U+3000) are preserved but do
+ hang. But here they are followed by spaces with white-space: break-spaces,
+ which are preserved and never hang. Since only glyphs at the edge of a line
+ can hang, this prevents the ideographic spaces from hanging.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html
new file mode 100644
index 0000000000..6c486ac69c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-002.tentative.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Level 3: pre-wrap conditionality when not at line end</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="assert" content="Spaces with white-space: pre-wrap always hang unconditionally when followed by other unconditionally hanging glyphs">
+
+<style>
+ div {
+ font: 25px/1 Ahem;
+ width: 5ch;
+ height: 4ch;
+ margin-left: -1ch;
+ background:
+ linear-gradient(red, red) 4ch 0 / 1ch 4ch no-repeat,
+ linear-gradient(green, green) 1ch 0 / 3ch 4ch no-repeat;
+
+ white-space: normal;
+ text-align: right;
+ color: green;
+ }
+ .pre-wrap {
+ white-space: pre-wrap;
+ }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div><span class="pre-wrap">X </span>&#x3000;<br>X<br>X<br>X</div>
+
+<!--
+ With white-space: pre-wrap, spaces hang conditionally when they are followed
+ by a forced line break. If instead they are followed by a glyph that hangs
+ unconditionally, such as the ideographic space (U+3000) with
+ white-space: normal, then they are not followed by a forced line break, even
+ if that hanging glyph might be, and thus hang unconditionally as well.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html
new file mode 100644
index 0000000000..b8f4df5967
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/hanging-whitespace-003.tentative.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Level 3: unconditional hanging spaces don't hang before non-overflowing conditionals</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="assert" content="Hanging can only happen at the end of a line, so unconditionally hanging spaces can only hang before conditionally hanging spaces if the latter would fully overflow">
+
+<style>
+ div {
+ font: 25px/1 Ahem;
+ width: 4ch;
+ height: 4ch;
+ background:
+ linear-gradient(green, green) 0 1ch / 1ch 1ch no-repeat,
+ linear-gradient(green, green) 0 2ch / 2ch 1ch no-repeat,
+ linear-gradient(green, green) 1ch 3ch / 3ch 1ch no-repeat,
+ red;
+
+ text-align: right;
+ white-space: normal;
+ color: green;
+ }
+ .pre-wrap {
+ white-space: pre-wrap;
+ }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div>XXXX&#x3000;&#x3000;<span class="pre-wrap"> </span><br>
+ XXX&#x3000;&#x3000;<span class="pre-wrap"> </span><br>
+ XX&#x3000;&#x3000;<span class="pre-wrap"> </span><br>
+ X&#x3000;&#x3000;<span class="pre-wrap"> </span></div>
+
+<!--
+ With white-space: normal, an ideographic space (U+3000) hangs unconditionally,
+ as long as every glyph after it until the end of the line also hangs.
+ With white-space: pre-wrap, a sequence of spaces that is followed by a forced
+ line break (where the end of the block counts as a forced line break) hangs
+ conditionally, meaning that the part of it that doesn't fit in the line's
+ available width is the only one that hangs. (This is independent to whether it
+ would overflow the block's content area.)
+
+ Therefore, unconditional hanging glyphs before such a sequence of conditional
+ hanging glyphs can only hang if the conditional sequence overflows the line's
+ available width.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html
new file mode 100644
index 0000000000..d3574427b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-misref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'>
+
+<style>
+section {
+ width: 50ch;
+ font-family: monospace;
+}
+.test { color: blue; }
+.ref { color: orange; }
+.mis { color: magenta; }
+
+</style>
+
+<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text.
+
+<section class=test>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+<br>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</section>
+
+<section class=ref>
+<div>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+</div>
+<div>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</div>
+</section>
+
+<section class=mis>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+<br>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html
new file mode 100644
index 0000000000..74d6b392f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-004-ref.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'>
+
+<style>
+section {
+ width: 50ch;
+ font-family: monospace;
+}
+.test, .ref {
+ text-wrap: balance;
+}
+.test { color: blue; }
+.ref { color: orange; }
+.mis { color: magenta; }
+
+</style>
+
+<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text.
+
+<section class=test>
+<div>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+</div>
+<div>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</div>
+</section>
+
+<section class=ref>
+<div>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+</div>
+<div>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</div>
+</section>
+
+<section class=mis>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+<br>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html
new file mode 100644
index 0000000000..6e01737173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-006-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+body {
+ font: 20px/1 monospace;
+}
+.float {
+ float: left;
+ width: 15ch;
+ height: 150px;
+ background: silver;
+}
+.mask {
+ width: 15ch;
+ height: 150px;
+ background: green;
+ position: absolute;
+ left: 15ch;
+}
+.test {
+ width: 28ch;
+ background: red;
+}
+</style>
+</head>
+
+<body>
+<p>There should be no red:</p>
+<div class="float">
+ <div class="mask"></div>
+</div>
+<p class="test">
+Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit.
+</p>
+</body>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html
new file mode 100644
index 0000000000..f5494708ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-004.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS test: balancing and forced breaks</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'>
+<link rel='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'>
+<meta name="assert" content="Groups of lines separated by a forced line break are processed separately.">
+<link rel="match" href="reference/text-wrap-balance-004-ref.html">
+<link rel="mismatch" href="reference/text-wrap-balance-004-misref.html">
+
+<style>
+section {
+ width: 50ch;
+ font-family: monospace;
+}
+.test, .ref {
+ text-wrap: balance;
+}
+.test { color: blue; }
+.ref { color: orange; }
+.mis { color: magenta; }
+
+</style>
+
+<p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text.
+
+<section class=test>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+<br>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</section>
+
+<section class=ref>
+<div>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+</div>
+<div>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</div>
+</section>
+
+<section class=mis>
+Lorem ipsum dolor sit amet,
+consectetur adipiscing elit,
+sed do eiusmod tempor incididunt
+ut labore et dolore magna aliqua.
+Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi
+ut aliquip ex ea commodo consequat.
+<br>
+Duis aute irure dolor in reprehenderit
+in voluptate velit
+esse cillum dolore eu fugiat nulla pariatur.
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html
new file mode 100644
index 0000000000..5343e84598
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-006.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<link rel="match" href="reference/text-wrap-balance-float-006-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1888449">
+<style>
+body {
+ font: 20px/1 monospace;
+}
+.float {
+ float: left;
+ width: 15ch;
+ height: 150px;
+ background: silver;
+}
+.mask {
+ width: 15ch;
+ height: 150px;
+ background: green;
+ position: absolute;
+ left: 15ch;
+}
+.test {
+ width: 28ch;
+ text-wrap: balance;
+ background: red;
+}
+</style>
+</head>
+
+<body>
+<p>There should be no red:</p>
+<div class="float">
+ <div class="mask"></div>
+</div>
+<p class="test">
+Lorem ipsum dolor <span>sit</span> amet consectetur adipisicing elit.
+</p>
+</body>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html
new file mode 100644
index 0000000000..b9d50684d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-right-to-left.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#container {
+ width: 20ch;
+}
+.balance {
+ text-wrap: balance;
+}
+</style>
+<div id="container" dir="rtl" lang="AR"></div>
+<script>
+const container = document.getElementById('container');
+for (const text of [
+ 'ينبغي تحقيق التوازن',
+ 'يجب ألا تؤدي موازنة التفاف النص إلى تغيير عدد الأسطر',
+ 'يجب ألا تؤدي موازنة التفاف النص إلى تغيير عدد الأسطر لهذه الفقرة النصية',
+ ]) {
+ const normal = document.createElement('div');
+ const balance = document.createElement('div');
+ normal.textContent = text;
+ balance.textContent = text;
+ balance.classList.add('balance');
+ container.appendChild(normal);
+ container.appendChild(balance);
+ test(() => {
+ assert_equals(normal.offsetHeight, balance.offsetHeight);
+ });
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html
new file mode 100644
index 0000000000..0c0f6b55ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-top-to-bottom.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#container {
+ height: 15ch;
+ writing-mode: vertical-rl;
+}
+.balance {
+ text-wrap: balance;
+}
+</style>
+<div id="container"></div>
+<script>
+const container = document.getElementById('container');
+for (const text of [
+ '平衡应该',
+ '平衡文本换行不应改变行数',
+ '平衡文本换行不应改变该文本段落的行数',
+ ]) {
+ const normal = document.createElement('div');
+ const balance = document.createElement('div');
+ normal.textContent = text;
+ balance.textContent = text;
+ balance.classList.add('balance');
+ container.appendChild(normal);
+ container.appendChild(balance);
+ test(() => {
+ assert_equals(normal.offsetWidth, balance.offsetWidth);
+ });
+}
+</script>